Mobile App from scratch UX/UI
The brief
“The Wellness Institute is very excited to explore how they can leverage technology to help people live a healthier life.
The institute defines wellness as an active process through which people try to improve or maintain their well-being. But they noticed that despite the vast availability of personal metrics and health apps, people continue to struggle.
They would like you to propose a new mobile app designed to support wellness.
The only requirement is that it tracks the user’s progress and pushes them to commit to a healthier lifestyle. Based on user research, you’ll identify an opportunity for an app to improve people’s day-to-day lives.”
Being in a team with 2 other people, we decided to create an IOS native app for a fitness application.
So let’s start with the UX part 🌞
Research
We start some market research, to see our competitors. We decided to focus on 4 apps that were the most relevant according to us: Nike Training, Running by Adidas, 7 minutes workout and Fitness Buddy.
As a tool, we used feature analysis. This one helped us to observe the individual characteristics and features of every fitness app.
Then, we interrogated some users. Our users were 5 men and women, from Paris and Germany and their age went from 23 to 35 years old. Also, we did app store research to see some other opinions to have a wider idea of the product we will create.
Affinity diagram
After the research, we created the affinity diagram. We grouped the gains, pains, demographics and habits in subgroups. It helped us to do the brainstorm and come to each one with some ideas.
Empathy map
To gain a deeper insight into the customer, we created the empathy map.
We realized that the main pain points they have are the lack of time or motivation to do sport. In some cases, it came from the fact that they don’t have a personal coach.
And if they do it, is to lose weight, gain muscles or maintain their body.
User persona
Sophie is a 28 y.o marketing manager that lives & works in Paris.
She has a healthy lifestyle and feels concerned by social issues such as gender equality and ecology. Her hobbies are doing sport, watching documentaries & going out with her friends. She really likes to learn and share with passionate people.
Her goals are to sculpt her body while staying healthy.
User journey
After a long day of telecommuting, Sophie seeks to reconnect to the real world. She wants to do some sport. She finds herself alone and wants to do new exercises to avoid the sport routine, but she couldn’t find a fitness app that matches her current expectations.
Some opportunities we propose are :
- Have an app that offers several steps of intensity, to keep improving and avoid routine.
- Propose a range of programs in the app, with eventually a coach that could give advice and be involved in the progression of the customer.
- Adapt prices for several types of customers, for instance totally free or freemium.
- Offer several types of programs to target all users.
Problem statement 💡
“Design is about solving problems. Fall in love with the Problem, not the Solution.”
Using data from our research, we asked ourselves:
- What product/service we will be designing for?
- Which success metrics will let us know we are meeting users needs?
Our fitness app was designed to fulfil the desire for a personal sport program and a shared sports experience with a real community and coach.
We have observed that some fitness applications do not meet users’ expectations:
- The chance to connect with a real community.
- A real-life coach to follow the program.
- A personal program that adapts to the client’s needs, which leads to a sport routine, a feeling of being isolated or stored in a virtual world and being lost without a coach.
Hypothesis statement
We believe that proposing a customized app combined it with a gym for busy people, will achieve a good effective sport routine & develop a feeling of being surrounded by the other of the human being. We will know we are right with qualitative feedback.
The user flow
Next, we created the user flow. It helped us to build easily the steps of the lo and mid-fidelity.
The whole point is that Sophie opens our app and enter all her metrics, puts her goals, she can choose a gym or home program. From the data we have, our app can propose some customized programs, she selects one and chooses a coach. She can take an appointment with him. She has the possibility to track her progress and share it with her personal coach.
And now, the UI part ✨
Lo-fidelity
After we created a concept sketching, to establish a hierarchy of information into the wireframes. To validate the low-fi we tested some users, after that, we started the mid-fidelity.
Mid-fidelity
Because we build a native app, for the mid-fidelity we added some new wireframes and did some changes to have a rational flow.
MOODBOARD
Then (one of my favourite part), we did a selection of 4 brand attributes and put the words into the image to make a moldboard. We have chosen words like home, eco-friendly, healthy and community.
Then, we tested with some users to make sure we made the right choices.
Atomic design
The next step is the Atomic design.
This methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
Hi-Fidelity Prototype
On this project, our idea was to do the Lo-Fidelity in Glassmorphism style for the iPhone 11pro.
Glassmorphism is a new design trend that is currently very popular. We can see it all over websites such as Dribbble, and even big companies like Apple and Microsoft.
Essentially, the main aspect of this trend is a semi-transparent background, with a sublime shadow and border.
Steps:
Sophie opens the app → clicks on the logo and opens the “Terms and conditions page” → “Allows” the app to track the user terms and conditions
→ goes to the “About you page”, she enters her metrics like gender and body parameters → clicks on “Confirm” → goes to the “Plan setup page” → clicks on hours per week, and a popup asks how many times per week is she practice sport → clicks on 1-2 → clicks on “include cardio” → yes → Validate →
“Define your goals” page → Clicks on Weigh loss (she has the possibility to download the program to watch it without cellular data with the small cloud) → Clicks on “Home workout” → “Detailed program page”, (she has the possibility to start the program or selects her coach), she selects her coach → Clicks on Thiana coach → Confirm → Appointment page (she sees the calendar and her last appointments with other coaches) → Clicks on 5 June → Ok → “Hours page” → Clicks on 6:00 pm → Set up your alarm page → Clicks on “set up alarm” → Clicks on progress icon → Track your Progress page (she can track her BMI (body mass index), current weight, active energy, water reminder, distance, share the results with her coach and add her goals.
Next steps
We thought about the integration of a nutrition 🍏 program with a professional dietician and build a wireframe that conducts the user to this step.
Conclusion
In conclusion, I had the pleasure to work on this project. It was quite challenging to work in a group of 3 and start doing an app from scratch. Choosing the colors and working on a new style was a bit tricky. But the final result, I think that deserves some claps.
So, if you read this thank you for your time according and if you have questions, feel free to ask!
