Sketch Illustrator Photoshop InVision Principle Validately
For this 6-week school project, I created the visual design for a mobile platform that reimagines how people can find and engage with fitness recommendations and health plans, in order to stay healthy.
I worked with users to conduct interviews in order to move forward with a user-centered design, and delivered the following:
Branding and Logo design
Responsive Web design
Our client is developing a fitness app and has identified a gap in the market. There is a need for a solution that incorporates both mental well-being,
as well as physical fitness.
Since Erin has an ongoing health condition, I thought it would be important for my app to include mind as well as body wellness.
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.
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.
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 problems.
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.
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, as opposed to showing and testing the entire app. This was very important in order to focus on one task 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. Ultimately, it was very helpful to know the areas that needed more work. I ended up changing the flow of this section, and the language of the buttons, so that it’s much more clear and easy to navigate.
Coming up with the mantras (affirmations) gave me the encouragement I needed to take on the challenge of working
in Principle, in order to create a micro-interaction. Little did I know that in addition to motivating our user to stay focused and positive, I’d also be motivating myself!
To learn more about me, I can be reached at
firstname.lastname@example.org or 206.679.2409.