Co-authored with Andrea Abney
Andrea is an accomplished User Researcher. She has lead UX Research teams at Disney Interactive in the past and currently spearheads User Research at mobile gaming juggernaut Scopely.
If usability testing lies at the heart of UX validation then building a sound prototype is the key to unlock it’s full potential. - Om
We all know that UX design relies heavily on UX research and usability testing for generating valuable insights which shape the future of products and businesses.
Image above shows various touch points for prototype testing in pre-prod cycle.
Not only will applying UX methodology to generate user behaviour insights before building a feature save multiple iterative efforts post launch but also millions of dollars worth of dev. time. In the previous walkthrough series we covered how usability testing should be set up and conducted in sanitised conditions with a moderator, what aspects to avoid and best practices.
As promised, we will walk you through a hypothetical feature and apply all the UX steps we would in a real world environment.
A typical agile flow process for a feature in pre-production generally looks like this:
High Level Brief
Product managers across organizations create a high level brief of a feature regarding the app or game they are working on. This brief may be targeted at boosting KPI’s like retention, monetisation, engagement or a new USP not seen in competitor products.
Examples #1 Demonstrates what a one-page high level brief may look like for a games' "Inventory" feature:
High level concepts, as above, will translate into a more granular specs fleshing out details and forming an early base for tech dependencies like front end, platform or backend. It could also integrate Game designers/Business Analysts who get involved whilst working closely with other leads to generate a concrete spec.
NOTE: At this stage there is input from UX from a research perspective. Included will be any pre-built target personas, demographic studies or competitor benchmarks to integrate best practices for this specific feature.
Sketches & Low Fidelity Wireframes
Once the brief has been iterated upon by stakeholders, it is handed over to the UX designers to build flows to better understand how player will journey through different scenarios, screens and required actions.
Post blocking the flow, sketch sessions are held to brainstorm with different permutation combinations of content placement and action hierarchy. Wireframe creation stage can involve exploration starting from white-boarding which is then further refined to create digital counterparts.
It’s a good idea to start with some early pencil sketches or white-boarding to create a wide range of options. Sketching gives iteration speed and removes tunnel vision which is often seen while designing a software/game.
Some best practices and pitfalls to avoid when developing wireframes:
Explore a Wide Spectrum: It is good to come up with at least 2-3 variations of a feature, not only in terms of the layout but also functionality and aspirational design. Here is why:
Most features start out as MVPs. What makes it into the game depends on costing in terms of dev. effort, projected timeline and release schedule.
MVP versions may be sufficient enough for launch but it is good to have atleast 1 aspirational version designed as well. For example: use of micro animations, 3D elements for more immersion vs 2D elements, parallax mapping etc. Even if the need of the hour is to launch with low-tech (low dev cost) feature, gradually over time in various updates this feature can be updated to the aspirational one.
It often happens that road maps shuffle as we move along, some features are dropped that could be the breather space to make a push for your aspirational version. If you have it ready.
By future proofing your aspirational design along with the MVP version, you avoid context switching as both versions can be designed at one go, rather than designers having to shuffle back and forth to solve the same problem over and over again.
Resist Temptation to Use UI: UX designers should avoid falling for the lure of designing their initial flows using some hacked up UI or UI widgets available from your existing products library to make flows look prettier or more aspirational.
I have often seen UX designers succumb to the pressure of using UI screens.
