The objective for this challenge is to reverse engineer the interaction design and user flow of an app of your choice.
I decided to work with Nike Training App, because I use it quite often when I go to the gym and need some guidance on the routine. Another reason to why I chose this app is because I think that they did a very good job in making it simple, clean and intuitive. Also, the structure is especially well thought of, I appreciate a the divisions they use because you have freedom to choose the routine will best fit your preferences.
The flow I chose was the process of browsing a workout routine on the search bar and downloading it. Following are the 7 screens of the flow:
Inventory of the UI elements
To complete the creation of the wireframe I had to make use of a wireframe kit in order to complete the task. The UI elements I made use of are:
List boxes, navigational components, buttons, icons, image box, and accordion containers.
Task Analysis
The task in the app begins where the browse option has been chosen. Once we choose the category by which we want to filter the types of routines which in this case is “workout focus”, there is a accordion container that appears with 4 different options of focus. Whether we select strength, mobility, endurance or yoga, the app will take us to list of options that coincide with the selection. Once we get to this screen we can filter, sort the routines or go back to the previous page. When filtering, a list box appears, selecting the options you prefer will make the button turn a darker color so you can visibly notice which ones are being implemented. Once we click done, the app will organize the routines based on your need. Finally you select a workout and it takes you to the downloading page.
Wireframes:
Prototype
In addition to this I have also put together a prototype in Figma of the full user flow in these screens. Check it out!
Learnings
In this project I got to learn a lot about wireframing and the different UI elements that are involved in the process. Also, I got way more familiar with Figma and was able to do things more efficiently.
