Breakout, Mobile App
Individual Project, Wellness, Ironhack Madrid
For our first individual project with Ironhack we were tasked with creating a mobile application directed at wellness within 2 weeks. The result is Breakout.
Due to the COVID Pandemic, there has been a global shift in our habits. More people are working or studying from home than ever. That’s a good thing right? It means no long commutes, more sleep, and you can even go to work in your pajamas. However, it also means people are moving less which leads to more physical aches and pains, uncomfortable chairs, and less social interaction. People are more sedentary and solitary than ever, and it shows.
User Research
I started my process with user research by conducting surveys and interviews to see exactly how working or studying from home affected people. The results were staggering. From over 40 surveys and interviews, 80% of people suffer from back pain, and 75% say that they lack social interactions.
With the information from my research, I was able to complete the Lean UX Canvas and focus on the problem: An increase in physical aches and pains due to lack of movement and an absence of social interactions. With that in mind, I completed a Competitive Analysis to compare features of possible competitors in the area of stretching and fitness. Looking at the results, I realized there was a large gap in the market, no app offered a collaborative way to complete exercises as a team.
User Persona
Now it was time to focus on a target user in order to really understand the needs of the market. After creating an Empathy Map using all customer surveys and interviews, I focused on fusing the results together to create a User Persona. Marta Martínez, an environmentally-conscious woman who works at an NGO from home full-time and is constantly suffering back pain. She wanted to do yoga during her work breaks, but can’t find the motivation to do so alone. She misses the workshops and social interactions she used to participate in with her colleagues.
Creating Marta really allowed for a deep understanding of users and their needs, and allowed the development of an Affinity Diagram and brainstorming to come up with solutions to users’ recurring problems. With various solutions ideated, I was ready to put them to the test while taking Marta on a User Journey. I took Marta through her workday and identified pain points that could be turned into opportunities. Solving these points turned out to be the solutions I had mapped out, and were translated onto paper in the User Scenario.
Solutions
Focusing on the solutions laid out through various brainstorming sessions, I had to prioritize features the app would have using the MOSCOW Method. From there, I could focus on the most important characteristics of the app:
● Short timed workouts with instructions on how to do them
● Creation of personalized workout events with colleagues or friends
● Workout results and statistics
● Calendar with pending workouts to carry out
● Progress of other team members
● Alarm to alert of scheduled workouts
Wireframing
With all features clear in mind, I started with various Crazy 8’s and continued the Low Fidelity version. After completing user testing with a few small changes, it was time to clean it all up and create wireframes with Figma for the Mid Fidelity.
UI
With the Mid Fidelity version confirmed and tested, it was time to bring it all together and create its design. The first step was to create a Mood Board, selecting photos that represent the brand and its feelings. After completing a Usability Test with users, the following brand attributes were selected to describe it; Flexible, Healing, Collaborative, Relaxing. Using these adjectives, after testing many different combinations of colors using the Mid Fidelity version to confirm coherency, I selected a color palette to accompany it, a base of white and accent colors cool blue and a warm orange.
After establishing the colors and mood of Breakout, it was time to lay the foundations of design including the Style Tile, where the typography, logo, colors and buttons were set, the Alignment & Spacing, and UI Kit to include the various components that will make up the app.
Now with the Style Guide confirmed and tested, it was time to put it all together and create the High Fidelity version of the app, the final version. We were also tasked with creating a Landing Page to attract users to the app. See the final prototype below.
