Wireframing Challenge: Reverse-Engineering the Headspace App
In the second part of the Ironhack’s prework the challenge was to create a simple wireframe version and interactive prototype of the user flow of the app of our own choice, based on screenshots or high-fidelity prototype screens of such app. The goal was to reverse engineer and simplify the design to its bare wireframe state.
The Power of Wireframing
The purpose of wireframing is to put emphasis on the content — the order, structure, layout, navigation and organization. It’s not to communicate visual design aspects such as imagery, color, and typography. For that reason, they are often done in black and white, placing boxes and placeholders when needed to signify different UI elements.
The Challenge
I chose to recreate a simple user flow from the Headspace app (the meditation feature), an app I loved using since the beginning. I find it very helpful when it comes to navigating self care. It’s user friendly — simple and fun to use, plus I adore the fun animations and videos.
Making Wireflows
First off, I went trough the meditation feature user flow and found it as a simple, smooth, fun and enjoyable experience. No confusion whatsoever, which was great.
User flow steps for a guided audio meditation:
- Click on the Play button,
- Choose your teacher and click on Next Session,
- Click on Play button to start the guided meditation, here you can also choose the duration of it,
- When the audio finishes, you are automatically transferred to the next screen,
- After seeing some stats on the progress and helpful quotes, click on Done button to finish the meditation session,
- After clicking Done you are being transferred back to the Next Session screen from which you can go back to the starting screen.
When I got the steps broken down, before jumping into Figma, I went on and made a very simple wireframe sketch showing the user flow on paper.
Having the steps and the sketch made, the time was to design the wireflow and make the interactive prototype, for which I used Figma. To help create the wireframes quickly I used an UI kit. UI kits already have the most common elements created and are a great tool when trying to put together a quick mockup for testing/demonstration purposes.
While creating the wireframes I found it challenging to think about which text labels are important and which text should be replaced with dummy text (Lorem Ipsum).
You can check out the interactive prototype ➡️ HERE.
Learning by Doing
A nice methodology promoted at Ironhack and I couldn’t agree more. Once again I really enjoyed this practice as an intro to UX/UI design and preparation for the bootcamp. Also, coming from a graphic design background I am used to creating in Illustrator, which is similar but in the end very diffrent from Figma, so I’m definitely looking forward to having the time and practice my Figma skills to speed up my workflow.
Hope you enjoyed and catch you in the next Ironhack challenge post. All feedback is very welcome. 👍
