Changing your body is a complicated thing. Sometimes you have a Nutri plan, a training plan, and maybe even something else, U unifies all those to-dos into one platform.
If you are an amateur athlete or someone that tried to change something in your body (gain weight, lose fat, heal a severe injury, etc.), you know how demanding and challenging it is, especially if you have to combine different efforts like nutrition, training, meds, and sometimes more. Athletes have a team of professionals behind them, guiding their decisions and tracing their next steps, but my research showed that nowadays, a lot of amateurs athletes also have a team behind them, most commonly, a nutritionist and a personal trainer. The Nutri sends you a pdf, and the personal trainer sometimes sends you another or, even worst, just do it with you at the gym. People pay what they have to to have the body they want or need, but their professionals don't talk to each other. It gets even more confusing to match all the different things you should do during your days for all different disciplines (food, exercise, mobility, injury prevention, etc.).
Research
The research targets amateur athletes, fitness enthusiasts, and wannabe fitness. It was conducted a survey and several interviews, from which it was elaborated an empathy map and affinity map, and conducted a "How Might We" exercise to identify a core problem to solve. Afterward, were elaborated three personas that fit the interviews and the surveys.
The survey purpose was to know the following: -If people would use a tracker for improving their perfomance on their main activity -If the user need this type of tracker -What this type of tracker needs to be usefull -Does this tracker needs to give all the info or it should be all through input? or hybrid? -Is it frustrating when the objective was not achieved? How so? -Is there a way to transform it into more motivation?
60% use apps to track their activities 87% think they need an activity tracker 50% think they need a reminder on what to do
The interviews were the main focus of this research; since this is an app with a very specific niche, it was essential to understand what that niche thinks about and its pain points. Even though the interviews had a scripted set of questions, most interviewees often answered more than one question at a time. Every interview was conducted adapting to the interviewee, as it should be.
The interviews followed the following script: For how long would you say that you are not sedentary?
What physical activity are you currently enrolled to?
Over the last month, how frequent did you exercise?
Would you say that activity is your favorite?
(If not) Why don't you practice your favorite then?
Have you ever started to practice something and had to quit? Why?
Can you tell me more about your experience with sports/physical activities?
Have you ever hired a professional? like a personal trainer, a coach, etc.
What's your experience with fitness apps?
What about other selfgrowing app? like planners, meditation, health, etc
Have you ever struggle with getting better, performance-wise, with any sport that you have practiced?
In your opinion, what kept you from evolving?
Have you ever injured yourself practicing a sport? Or had any injury related to the practice of a sport/ physical activity?
(If yes) How did you handle it?
If an app could track your progress, set a goal, and define all the steps between where you are and where you want to be, what extra feature do you think it should have? Notifications, accountability, inspirations, further information, social interaction… etc
Research Insights
I generated the insights and clustered them into categories, Apps, features, Pains, Gains, Trust, Goals, and Sports.
Generated a problem statement and correlated with the Different H.M.W.
The Problem Statement is: The user needs to keep track of progress because feels compelling to stay on track and achieve the goal proudly.
In the end, I defined the H.M.W. most with higher priority as the one linked to Goals: How Might We link all objectives into one single Goal?
Concept
Answering the H.M.W. and as a concept of functionality for the app was conducted quick guerrilla research asked the interviewees about how might we link all objectives in one single Goal, and the majority answered as follow:
In that sense, this concept testing also prioritized the features and functions and, later in the project, helped decide how the app should focus.
Personas
The survey and the interviews were translated into an empathy map and the development of the personas.
The empathy map and the interviewee's stories were essential sources for elaborating the personas. It was divided into three main categories by the modality of exercise most interviewees practice.
The personas were both used for the ideation of the app itself as well as for the branding. For that matter, the profiles were developed, including psychographics of the personas, to give more perspective on the cultural background of our target public.
A journey map was elaborated for every persona. Consider that those journeys were supposed to be with the app deployed.
Competitors
The wellness industry is very saturated already, and it has several competitors, both direct and indirect. My criteria for picking which ones to analyze as if they were mentioned during interviews or the survey.
The competitor matrix was developed to position U in the spectrum. And, for the competitors analyzed, there was a clear spot perfect for the app. A service where the user could have more than one kind of input (Nutri, training, etc.) and also be focused on performance.
Branding
Based on the research, I started by defining the What, Why, and How. Followed by choosing a brand archetype, defining the experience guidelines and the core attributes.
Archetype: The Sage
Based on the attributes of the archetype plus the definition of the brand's What, Why, and How.
Followed by defining the Core Attributes, Target, Fit in the Market, and Differentiators.
Finally, I defined a brand experience guideline that allows a clear vision of what the brand must communicate and how to communicate, keeping in sight the hierarchy of connections with the user.
The experience guideline will come back throughout the project to anchor the product into those experience guidelines.
Finally…
Naming
The decision on the name followed a structure consisting in:
Defining three concepts; Generating names; choosing the most appropriate considering the criteria; Deciding on the best ones; Guerrilla research, and asking the interviewees which names fit the best with the concept related.
The last image is the most appropriate choice considering the criteria, with five interviewees' votes and one vote mine. The name chosen was U.
Visual
I elaborated a mood board considering not only the brand design but also the product and the UI. Afterward, I defined the typography.
The mood board served as visual inspiration for the elements, layout, visual identity, colors, and visual concept. From the mood board inspiration, I decided to experiment with the Neumorphism style, which relies on shades and lights to design the UI elements. Neumorphism sometimes is used in medical applications because it keeps the focus on the data displayed on screens rather than on buttons and functionalities of the app. This was the main reason why I chose that style.
Type
The typography was chosen considering the family's variations and a font that could get bold enough to overlay graphics.
Logo
The visual identity was going to be based on the trademark because since the name has only one letter, I decided to keep the focus on that. Also, due to time restraints, shapes and elements were based on and derived from the trademark.
The following image shows a few sketches from 2 different concepts. Concept 01 was inspired by race tracks, with a different beginning and end, going from one place to another. Concept 02 was inspired by chart and data visualization. But, this felt too literal and too much "explanatory." Therefore, the concept chosen to move on with was the 01 because I could get more creative freedom, and Sagig Haviv says, "A logo is identification, not communication."
The final logo design took into consideration the form's inspiration, plus the moldboard's visual inspirations. It was aimed to look Simple, Digital, Dynamic, and of course, Identifiable.
I know the gradient could be a problem for printing media, although the product would be shown primarily digitally, where the gradient works fine. This is why the logo also should work in different applications, black and white and/or with a solid color.
*It was not on the scope of the project to go that further with the branding, but I thought it was necessary, and the most laborious part (which is the research) was already done, and this gave me all the information I needed to develop the Branding Design as well.
Testing
A low, mid, and high fidelity prototype was elaborated in this project phase. After each test, iterations were made for the next phase, and for the high fidelity, some iterations were made regarding the UI.
Low fidelity
The low-fidelity prototype intended to identify the app's structure and if the layout and the flow were working correctly.
The first four pages were the onboarding phase, where the user would input their goal, answer if there's a professional working with them or not, register the professionals, and, after receiving the plan, go to overview. The overview is also the steps screen.
The main screens were divided by the purpose as follows: Stats: It would work as a home screen, displaying what the user has to do for the day with a checkbox to mark as completed and a drag bar to input the feedback. Drag right (green) for easy and Drag Left (red) for hard.
Insights
- The testers responded very positively to the onboarding part of the app and the step-by-step.
- Most testers didn't understand the drag to give the feedback before any explanation.
- It was not clear to the user that the calendar colors were related to the feedback given.
Mid Fidelity
Taking into consideration the feedback given in the low fidelity prototype, the following was developed:
- The onboarding phase was kept the same.
- The feedback slide was given a gradient with functional colors going from green to blue to red, respectively easy, neutral, and hard.
- The calendar also incorporated the gradient on the graphics and color-coded the days per average feedback.
Insights
- The arrow buttons for the onboarding were hard to click.
- Most testers still didn't understand the drag to give the feedback before any explanation, and the prototype was hard to interact with due to the small slider.
- New feedback about the calendar was present: a few testers didn't understand why they needed a calendar of previous feedback if they could get that same information on the data visualization.
- The drop-down button to expand the steps (training and diet items) was unnecessarily huge. Most testers didn't see any advantage in expanding every item.
High fidelity
The main changes related to the feedback were:
- Replaced the arrows with buttons
- Took out the slider for feedback.
- I took out the calendar screen and incorporated the information on the stats screen.
- Left the description of the steps always open but divided in modality (Training, diet, etc.) month and week.
The UI style chosen initially was Neumorphism, but during the testing and designing of the interface, I received feedback from the Ironhack lead teacher that the accessibility was off. She recommended I run a plugin in Figma (called Stark) to check for accessibility, especially for impaired vision users. For that reason, I colored a few elements and gave more contrast, and mainly used micro animations during the onboarding phase as a guide for the user to have a glimpse of how the app interactions work.
The User Interface
The style chosen was originally a Neumorphism, but I changed it into a hybrid to make the interface more accessible.
Micro-interactions
Every kind of button has an animation with the intention to signify to the user that it was pressed.
The animations on the feedback system served the following purpose: Mark as done; show the chosen feedback (easy, neutral, hard); Clear from the list; Signify as 'done.'
When the user clears the daily activities, an animation is shown communicating so and in a gamification fashion.
And that's it for the project!
This project lasted for two weeks, and I suppose this is something that never stops getting improved, but Time Management! As I lived through this Bootcamp experience and dived into a new set of skills, I had to learn, or better, to rediscover my own pace for each stage of the process.
Another learning is that Figjam is not infinite. At some point, it stops working, and you can't add anything else!
As the next steps: The design of the app version for the Professional. Refine the Brand voice and the Brand Lexia. Deepen the gamification interactions.