Muv is about giving you the tools you need to achieve your health goals whether it's to lose weight, lead a holistic lifestyle, reduce stress or even personalize to your health conditions.
I was asked to create the visual design for a fitness app aimed for millennials which can be personalized for specific health goals. I needed to target our Millennial user who is single, with a demanding job, trying to workout while dealing with an ongoing health condition.
My final UI deliverables include a style guide, HI-FI screens, and a prototype that demonstrate a complete user flow.
* * *
THE CHALLENGE
DEVELOP A FITNESS APP AIMED FOR MILLENNIALS
The client is developing a fitness app and has identified a gap in the market; A need for a solution that's personalized for specific health conditions and individual preferences. The client wants to focus on physical fitness for millennials but is open to hearing my recommendations on how mental wellbeing and holistic fitness might fit into the solution as well.
Using visual exploration based on competitive and domain research, I need to create a holistic brand concept to meet the needs of the user with a 5 week timeframe. The brand will tell the story of how a user relates to their fitness goals/routine and how the user overcomes his/her pain points.
With provided UX deliverables my focus was more on creating the visual content that would be applied to these existing elements. Although this is helpful, it laid out design decisions such the elimination of a bottom navigation and only using a hamburger style menu located in the top left corner.
USERS & AUDIENCE
I needed to target our Millennial user who is single, with a demanding job, trying to workout while dealing with an ongoing health condition.
Working with the UX provided persona, my final product needed to focus on a number of user goals.
FOCUSED GOALS
* * *
THE PROCESS
DESIGN ISN'T A STRAIGHT LINE
* * *
THE DISCOVERY
RESEARCH, INSIGHTS & TAKEAWAYS
USER RESEARCH
FIGURING OUT HOW MILLENNIALS DEAL WITH FITNESS
Did a bit of research on my own to get a better understand of the fitness world and how it applies to Millennials. This research really helped me focus when making design decisions.
- Millennials prefer to be motivated because of difficulty being held accountable and maintain routines.
- They prefer the ability to not only train but to be-able to focus on certain muscle groups, time constraints and health needs.
- An increase in anxiety and depression among Millennials there’s a high demand for mental training such as meditation and yoga
COMPETITIVE RESEARCH
EVALUATING THE FITNESS APP LANDSCAPE
To evaluate leading fitness apps I conducted a competitive analysis report on FIVE direct competitors known for their popularity, guided workouts, and motivational techniques.
Aaptiv | Fiit | My Fitness Pal | Nike Training Club | Carrot Fit
Key takeaways:
- All the traditional workout apps use a very simple and clean with a similar color palette. Black and white, tones of grey and a heavy used blue accent. I found this odd.
- Visual data analytics is helpful to show progress and improvement. Making sure that these are fun and pleasing charts and graphs
- Various details in onboarding was used. The more data centric apps asked more questions in the beginning to really make workouts personal.
* * *
IDEATIONS
EXPLORATION FOR A DESIGN DIRECTION
WORD CLOUD
TRYING A NEW WAY TO BE CREATIVE
Looking back at all the research and the user persona I considered what characteristics I feel should be associated with the product. I tried a new word cloud process technique to get a sense of a theme to help clarify a direction and pick a few that stand out. For this particular case I focused on the words RETRO, FUN, and STYLISH.
MOODBOARDS
My goal was to attract the Millennial user by offering a unique aesthetic to other fitness apps by bringing in a brighter primary palette and a modern feel. Simple and classical shapes inspired by Dieter Rams designs is intended to incorporate a fun and unique look to drive engagement and motivation. This approach also provides a technical look to highlight the data centric capabilities of the app.
I want you to feel fun, colorful, technically minded, interactive and accountable.
BRANDING
Concept Statement: A stylish fitness app that’s committed to embracing and driving positive change thru personalized health goals, expert support, and holistic fitness. We are dedicated to providing a rewarding balance of motivation, accountability and serenity.
LOGO IDEAS: Sketching plays an important role in my storytelling yet I struggled trying to find a design that was strong enough to carry the brand I was looking for. I ended up focusing on Fit, Next and added a third name MuV which I ended up moving forward with.
FINAL LOGO: Mov captures the fun and inspiring feel I wanted this brand to have. The broken up lettering provides that unique look to pull away from competitors. The play on the word MOVE gives a youthful take that I feel connects with our target user. The bright accent colors are upbeat and keep the retro look I love. Plus its not blue.
STYLE TILES
My style tile comprises different aspects of the interface design like colors, shapes, layout and typefaces. Once again, the brighter primary palette and modern feel and lines create the stylish look to help motivate and drive a user. The colors and stylized graphs emphasize the data analytics technical aspect of the app proven to motivate workouts. My concept incorporates a fun and unique look to pull away from the intimidating world of competitive athleticism and provide a gender neutral setting to achieve their goals.
My style tile incorporates a fun and unique look to pull away from the intimidating world of competitive athleticism.
* * *
THE SOLUTIONS
DESIGNING TO SOLVE FITNESS CHALLENGES AND PROBLEMS
USER INTERFACE DESIGN
Even at this stage I continued to make changes to the design. I decided I needed to remove the bold outlines as it was distracting once I started to put the components together and build the pages. Looking back at our challenges and problems, I want to highlight a few of the features that help solve our main objective and user goals.
DEALING WITH TIME CONSTRAINTS
On the workouts page, I added a slide tab filter which includes a filter option for DURATION and a QUICK START section for short workouts with clear time indicators.
ADJUST TO HEALTH CONDITIONS
In addition to HEALTH CONDITION being a filter option, there's also a HEALTH CONDITIONS category with adjusted workouts that focuses on specific health needs like Diabetes and Crohn's Disease.
HEALTH CHAT
The ability to work with a health professional was a big one. This was addressed early on by the provided wireframes so I just needed to apply my design aesthetics to the page. I also added a feed section to further engage in social interaction and provide the sense of community.
PERSONALIZING THE APP
Part of the onboarding process includes being able to select various HEALTH CONDITIONS to receive personalized workouts. I researched the top health conditions common with Millenials and picked the top 8 that can benefit from catered workouts.
INTRO ONBOARDING
While researching fitness apps I downloaded many of them. I felt the best ones started off with a great introduction to get the user quickly acquainted with what set them apart from others.
So I designed the start of the onboarding process with a similar process and added some fun and engaging microinteractions. These features include:
- Personalized Workouts
- Track your Food
- Expert Chat
Accountability
Accountability was addressed by a number of graphic components featured throughout the app but more noticicablly right away on the home page. Indicators on how many workouts you’ve completed followed by a daily task card featuring large microinteraction icons and easy to read sections. A break down of everything that needs to be accomplished and what has been completed is organized by colorful graphics and engaging icons.
REDUCING STRESS
For stress I added a Zen meditation page which can easily be accessed by the slideout navigation menu. A quick tap of the icon brings you to the Zen page for a quick and easy guided meditation.
CRAVE MORE?
I had too much fun playing with interactive screens and microinteractions. You can view the entire prototype here.
* * *
USER TESTING
User testing was conducted remotely with three potential users for around 1 hour each. They went thru a series of tasks and followed up with a series of quantitative and qualitative data.
USER RESPONSE
Felt the colors were very "on point" and in tune with current themes.
Interactions were well loved and kept users engaged.
Those with health issues really liked all the options to cater to their needs and goals.
KEY TAKEAWAYS
Provide better explanations of features and benefits.
Some pages were very long when scrolling for features.
A few pages were confusing to users as they didn't know what to do unless they were familiar with health or fitness products.
WHAT WAS LEARNED
The product would benefit from a beginner guide when you first enter the main page.
Having the cards condense when scrolling would make users feel less irritated.
I need to work on my copywriting skills or hire one to do a better job.
If you’d like to learn more about my MOV project or how I studied fitness apps without even breaking a sweat, don’t hesitate to reach out. Ideally over a donut with pancakes.