Sketch, Illustrator, Photoshop, InVision, Principle, Validately
Build a fitness app for busy millennials to stay motivated.
• Exploratory Research
• User Interviews / User Testing Report
• Branding and Logo Design
• User Flow
• Mood Boards / Style Tiles
• High-fidelity Screens
• Responsive Web Design
• Style Guide
Lead UI Designer
According to The New York Times, millennials are the most stressed generation our world has ever seen. Meditation is the perfect mindful activity for millennials because you can tap into yourself anyplace you feel the need.
Though there’s clearly momentum around yoga and meditation, CDC data shows that access to these tools isn’t equal. White adults were more likely to use yoga and meditation compared with Hispanic and African American adults.
The stakeholder provided one persona, which I used to devise a concept statement, brand direction, and overall user interface, in order to address our user’s needs and goals.
Since Erin doesn’t know how to alleviate her stress, I thought it would be important to incorporate different areas of wellness, besides just physical. This led to the Mind section of the app.
Erin gets discouraged by her ongoing health condition, and doesn’t know how to stay positive. I decided to add positive affirmation screens that appear before and after each activity, to encourage our user along the way.
After solidifying the problems that I wanted to address in the app, I made a list of words that I thought evoked the right mood. I went through a few iterations, and learned that it’s important to be as specific as possible, so the brand has a particular point of view.
What differentiates our brand is the idea that success incorporates both self-care and strength.
The wireframes were provided by the stakeholder, and I found that in the Progress section having too much information on one long page can be very overwhelming.
The way the categories are set up and the order things are revealed to the user has to be understandable or else it is very confusing where you are and what you’re supposed to do.
I have chosen to change the way the information is organized by separating it into three different categories instead of having the user scroll down for such a long time. Within these areas (Body, Mind, and Goals), the user can review her Daily or Weekly progress.
The ability to send a daily or weekly report to your health expert is also more noticeable, since it now has a call-to-action button.
After the first iteration of designs, I conducted two user interviews, in order to test for usability issues.
The Progress screen user flow was tested using the Validately Recorder app on the users’ iPhones. Due to Covid-19, the test was conducted remotely, and it was unmoderated.
Both users had trouble completing the tasks, due to unclear text regarding how to find the Daily and Weekly Goals and Workouts. This was confusing for one user, who didn’t know what Body, Mind, or Goals meant.
The other user was able to click on Body, and find her daily workout, but did not see how to find her weekly workout. Neither user knew how to add or view the list of Goals, or how to get to the Long-term Goals.
These user insights impacted the design of the next version by letting me know that I needed to make it more clear to find the Daily and Weekly Goals and Workouts. I did this by combining the Body and Mind Goals together, to simplify the navigation. The user can now scroll down for a little more information, instead of having to click on another tab.
Working on pages with a lot of info and data was really great to finesse the typography, and explore designing different infographics to see what works best.
Look & Feel
I created two diverse mood boards and style tiles. The first step was to think about the attributes of the brand, so that I could convey them.
The design direction became more real once I selected specific typefaces, buttons and colors for the style tiles. Writing sample text was another way the two different styles became more distinctive from one another.
My first style tile is a good fit for the user (Erin), since she would appreciate a brand that values balance and calmness, due to her overworked and busy schedule. The colors reflect this feeling, while the photos have a quiet strength.
Although my second style tile is energetic and has bright colors, I think it is also a good fit for my user, in a different way. In this one, I wanted to focus on Erin’s determination in getting even more physically fit, and improving her strength and vitality. After getting this training and guidance from the app’s health experts, she will be headed in the right direction.
The Mighty app fills a critical gap for a variety of minority groups. Empowering all women, no matter their ethnicity, was what inspired the bold, strong colors, and photographic style, since the photos are powerful, positive, and embrace diversity.
The meditations and mantras in the Mind section allows our user to practice her mental strength.
The ability to chat with a personal health expert
gives accountability to health goals and habits.
The micro-interactions are a welcome surprise that give motivational messages before and after an activity that not only delights, but builds self-confidence. I wanted to influence the decision point before someone had chosen a workout. This way, they’ll be more likely to go ahead and to ahead and begin. Since the brand ethos and overall concept is one that’s vibrant in its tone and copywriting, I chose to use a bold typestyle and fun graphics that would trigger automatically to surprise and empower the user.
After looking at a few competitors’ web sites and sketching out some layouts, I wrote the marketing text which included bullet points for the app’s features, and a testimonial. It was a good exercise to really think about distilling the most important features from the Mighty app for the mobile and desktop site.
I set up this Style Guide which includes instructional information for the Brand Attributes, Color Palette, Photography, UI Elements, Infographics, Mantras, Logo, and Micro-interactions.
After six weeks of research, analysis and design, I was able to validate the assumptions and changes I had made. I did this by testing my prototype with two new users. The results are:
Find your Daily Progress: 2 out of 2 users were able
to click on Progress and find it quickly.
Find your Weekly Progress: 2 out of 2 users were able
to find it easily.
Add to or view your Goals: 2 out of 2 users were able
to find it easily and add goals easily.
Along with empowering our user to feel comfortable with her health condition and gain confidence in her ability to manage her stress, I also became more empowered and confident in my UX skills as I incorporated user interview feedback into data-driven solutions.
This was the first time I tested a particular user flow, which was very important in order to make sure any usability issues were addressed.
One of the biggest problems came from the results of the usability testing, when both users were unable to complete the tasks successfully. This allowed me to make the right changes, so the flow is more clear and easy to navigate.
Coming up with the mantras (affirmations) gave me the encouragement I needed to work in Principle, in order to create a micro-interaction. Little did I know that in addition to motivating our user to stay positive, I’d also be motivating myself!
To learn more about me, I can be reached at
email@example.com or 206.679.2409.