Pre-work Challenge 2
For two years, I’ve been using Headspace to improve my mental comfort. I’ve noticed the constant improvements in the app and I really like the funny illustrations and videos. Therefore, I analyzed Headspace’s user workflow by creating hand-sketched low-fidelity wireframes and mid-fidelity wireframes in Figma (Ironhack and Figma UI-Kit).
At first, I focused on the course search, because I wanted to understand how the user can quickly find a course or a video lesson. The home screen (the section called “Today”) leads directly to different categories and themes. Next, the user gets a description of each category. Each screen of a category offers a variety of different related courses or video lessons. On the last screen of the workflow, the user opens the actual lesson or video itself.
It can be confusing to the user that the Tab Bar (Today, Meditate, Sleep, Move, and Focus) is not consistently visible. As a consequence, the user has to click the back icon several times to return to the home screen.
Once back on the home screen, the user can start another workflow where they can visit their user profile.
I really enjoyed focusing on the workflow of an app that I like. Take a look at my prototype of the user flow (choose “options” and “fit — scale down to fit”).
Conclusion
I learned that simple wireframes help to get to know all about the essence of the workflow and not being distracted by the UI elements and beautiful illustrations. The multitude of images in the app that distracted me was the main challenge. Additionally, I got confused by the variety of different wireframing possibilities and the inconsistencies of wireframe-practices I found online.
