Ironhack Challenge 2 • Wireframing or how I “reverse engineer” the Petit BamBou meditation app
Finding mindfulness, living a healthier life with more compassion and selfcare are the goals of Petit BamBou. Since 2014, millions of users have downloaded the French meditation app.
At a time when many people are living in the fast line, more and more tend to refocus on themselves in order to find more peacefulness. This also has been highlighted by the public health crisis since 2020. This is the reason why I found it quite interesting to choose and analyse Petit BamBou as the Ironhack’s prework second challenge — the task is to create a wireframe version of the user flow from hi-fi screenshots of the app.
First of all, what is wireframing?
When we come to design a mobile application, one of the first step is to create the simplest version of how we want the app to be like. The goal is to go for the essence of the user flow with elementary shapes, black and white colors (ideally) so that we don’t spend time to build the very detailed UI elements that will be created later on (logos, icons, colorimetry, titles,…). In that way, we build a user flow that is easily understood by the stakeholders who won’t be distracted by one or another color or one or another specific word in a title. We gain time and efficiency.
Analysing a specific task — the meditation user flow
In order to “reverse engineer” the Petit BamBou mobile app user flow and interaction design, I choose to focus on a specific task which is the meditation user flow. In other words, how is the user led to a specific type of meditation from the first screen of the app to the meditation session? It is indeed interesting to analyse how a new or regular user reaches a meditation session, which is the core functionality of Petit BamBou.
On the first page of the app, the information is clear, there are 3 types of meditation to choose. I decided to focus on the first type of meditation which is the “free meditation” that allows the user to set the features of the meditation session. The session is not “guided” like the second type of meditation. I was also curious to study how the user could change the attributes in order to create a unique experience before the beginning of the meditation.
After having selected the high-fidelity screenshots of the user flow (just above), I dissected 8 subtasks that flow from the following high level task: “I want to meditate”. In order to understand each subtask, I also detailed the goal of each of them.
The tasks analysis does help to create the user flow and design interaction. In this case of “reverse engineering”, it is also a way to better understand how the user flow works and how deep we need to look into each task. Creating the lo-fi wireframes afterwards is then much easier!
Wireframing the user flow
Following the task analysis, I’ve been able to create a wireframe version of the meditation user flow on Figma, keeping in mind that shapes and ideas needed to be as simple as possible. No embellishment.
The prototype goes live just below ↓
Less is more.
As Nietzsche would said “devil is in the details”. Even though the first wireframes need to be simple, it is still crucial to identify which elements to emphasize on in the low definition wireframes. With bold, thin or bigger characters and shapes, we can define which elements — the essential ones — will catch one’s attention.
This challenge made me discover the logic of user flow, new functionalities on Figma and I can’t wait to know more and more about it!
Thanks for reading :)
