The Challenge
The task in this challenge is to reverse engineer a user flow in a popular app. Broken down into stages, I was required to:
- Choose an application
- Identify a flow with at least 5 screens and consider its significance
- Build an inventory of the UI elements present in the flow
- Create a low-fidelity sketch of the flow
- Consider the efficiency of the flow in achieving the task
- Create wireframes of the screens
- and finally create a working prototype using Figma.
1. Choose an application
My first hurdle came in choosing an app. I rarely find apps I enjoy using — most are purely functional and my aim is to complete my task as quickly as possible and close the app. Messaging apps and streaming apps are among my most-used apps, but none struck me as particularly exciting to review. I then expanded my search to consider more engaging digital products, and that’s when I landed on reviewing a flow within the operating system of the Nintendo Switch.
The Nintendo Switch appeals to me as a platform that is both engaging and entertaining, without feeling exploitative. Examining a flow within this space would make this task more interesting and even exciting for me.
2. Identify a preferred flow
The most significant flows on the Nintendo Switch are arguably launching a game, and purchasing new games. The former is however a very short and simple flow, and the latter is quite long, with many hurdles due to the nature of purchasing content.
There is currently a Summer Sale in the Nintendo eShop, and with new software in my library, I’ll need to archive some older titles. So let’s have a look at the Archive Software flow.
This flow also contains a combination of button controls and optional on-screen touch controls, layered modals and multiple button states, adding complexity to the wireframing task.
3. Build an inventory of the UI elements
The UI elements present are limited, but interesting due to the nature of the device, with both physical buttons and a touch screen present.
4. Sketch a low-fi flow
Visualising the flow as a low-fidelity sketch is a quick way to examine the various screens and stages in the flow. Simplifying the screens and boiling them down to only the essential details gives a clear view of just the key information without other visual distractions. Using low-fi wireframes, we can assess whether the flow is indeed effective and efficient.
5. Consider the efficiency of the flow
While the option is 2-layers deep (it takes 2 taps to reveal the option) it is not a primary function and so can afford to be more hidden than essential software information. The flow also contains enough information and significant warning for the results of archiving the software within just a few short steps.
Displaying a clear message to confirm the success of the action avoids confusion, and converting the “Archive Software” option state to disabled again confirms that the action has been completed and avoids a situation where a user attempts to select an unavailable option.
6. Create wireframes
With low-fi sketches and a set of mid-fi UI elements, creating a full wireframe of the flow comes together very quickly in Figma. Similar to the low-fi sketches, only elements essential to this specific flow are included to avoid distractions, and ensure the flow in question can be accurately assessed.
7. Create a working Figma prototype
This stage involves switching to the Prototype workspace in Figma, and connecting interactive elements in the wireframes using the pleasingly-named prototype noodles. Understanding the task and the actions becomes much easier with a working prototype to tap through.
Check out the prototype here, and feel free to add your thoughts in notes or comments below!
Final thoughts: obstacles
While creating the wireframes and prototype was a relatively simple task, indicating interactive elements becomes challenging in a low- to mid-fidelity mock-up when there are multiple means of interaction—users may choose to use physical buttons to navigate and select options, or touch controls to tap the screen directly like a smart phone.
What appears as a highlight in a high-fidelity design (on the actual Nintendo Switch) appears more as an outline in a simple grey-scale wireframe, which may be confused for a selectable button rather than the selected option. Applying colour to these instances even in low-fidelity mocks offers a possible solution to this challenge.
