Recent UI + illustrations/other design
Recent UI + illustrations/other design
Introducing smash
The revolutionary new meal prepping app that busy professionals are using to reach their fitness goals.
Features
-
Customized meal plans designed to align with your specific fitness goals
-
Accountability though easier-than-ever nutrition tracking
-
Grocery delivery in one click
-
Recipes that utilize your current pantry
THE BRIEF
OBJECTIVE
Despite the vast availability of personal metrics and health apps, people continue to struggle to maintain a healthy lifestyle. I conducted user research to understand people's mental, physical, and emotional well-being and sought to develop a tool to drive them to action.
SCOPE
2 weeks design sprint
OUTCOME
A mobile application that allows user to track their diet, but also eat healthier through customized meal plans that align to their specific fitness goals.
PROCESS
Research
-
surveys
-
interviews
insights
-
Market Research
-
Competitor Analysis
CONCEPT
-
Brand Identity
-
User Flow
-
Mood Board
-
Style Tile
prototype
-
Lo-Fi
-
Mid-Fi
-
Hi-Fi
TOOLS USED
User Research Affinity Mapping Market Research
Competitor Analysis User Flow Mapping Lo-Fi Mid-Fi Hi-Fi
Animation Brand Identity MoodBoard Style Tile
USER Research
Initial research took place over two days and was conducted to better learn the challenges people face in the areas of fitness, mental health, eating habits, time management, and stress management. I created an internet survey which received 93 responses and conducted 10 interviews.
17%
26%
38%
Report struggling with eating habbits
Report struggling with fitness goals
Exercise every 3-5 days
From our interviews, we learned that 8 out of the 10 ranked their physical health as most important and reported that they both enjoyed working out as well as cooking healthy meals for themselves. Their challenges were getting out of the routine of cooking the same things, avoiding temptation to eat out in restaurant dense areas, and making meal prep a focal part of their week.
Interview Result Mapping and Grouping
Survey results yielded specific challenges in every category, but the two that affected the greatest numbers of people were fitness combined with eating habits.
User Survey
"I want an app that allows weight tracking, meal tracking, and projected guides to accomplish my weight or fitness goals."
MARKET ANALYSIS
From here, I began an extensive brand comparison of diet, meal prep, fitness and fitness tracking/goal setting mobile apps by recording their key features, color schemes, and the pros and cons reported by actual users.
Collection of screens from existing apps in the market.
Competitor CONS
-
Doesn’t teach you how to meal prep
-
Cannot see ingredients from all recipes in one view
-
Recipes are not based on a fitness goal
-
Logging homemade meals is challenging
-
Complicated design
-
Suggested meal plans
-
Cannot customize
Products already created helped tackle user challenges with meal prepping solutions or nutrition and fitness tracking, but the brand comparison analysis did not reveal any one product that solved all the problems together.
It was evident from my research how intertwined diet and exercise were for a users fitness goals, but surprisingly in the world of apps, key features in these two areas remained mostly separate.
Competitor pros
-
Recipe databases
-
Custom meal plans
-
Auto-populated meal plans
-
Calorie tracker
-
Fitness goal input
-
Progress charts
Affinity Map to document the comparisons between competitor's features, brand identity, and user reviews
Minimum VIABLE product
From here I determined a minimum viable product for what my app must have, should have, could have, and would not have.
must have
- calorie count
- profile set-up
- custom meal plan
- adjustable goals
- calories per meal/serving
- diet options
- shop for you
- nutrition tracker
- connect with friends
could have
- goal tracker
- grocery list
- education
- tips
- auto-populate new meals
should have
won't
have
- too much text
- complicated set-up
- limited recipes
This allowed me to create my happy path user flow that I would go on to develop for the lo-wi wireframes. I determined I wanted my user to add their basic stats such as height, weight, and age and enter their fitness goal, in order to receive a customized daily caloric intake recommendation.
Once in the app they could set their meal preferences and the app would auto create a meal plan suited to these goals and allow for the user to track their fitness journey.
Initial User Flow Sketch
With user research and brand analysis complete, I began to ideate for possible solutions for the newly discovered issues.
I created an affinity map and empathy map canvas and started adding post-it notes from my user interviews, the pros/cons from app reviews, and any other related notes to find the clearest path to a “How Might We” goal statement. Ultimately, I wanted to find a way for users to receive a customized meal plan tailored to their fitness goals and allow them to track their progress along the way all in the same app, and as effortless as possible. This led to...
Emapthy Mapping
... How might we help busy professionals reach their fitness goals by making meal-prepping easier than ever.
Kenny
Kennedy sits at a desk all day and goes to a Crossfit Gym 5 days a week. He is determined to add 5lbs of muscle before summer and knows he needs to begin planning meals in advance and stop eating out at lunch every day.
Age: 38
Lives in: Chicago
Occupation: Finance
Cassandra
User personaS
Age: 29
Lives in: Boston
Occupation: Teacher
Cassandra is a 10th grade English teacher who is getting married in 6 months and wants to lose 25 lbs before here wedding! She wants to start cooking healthy and tracking her meals.
Prototyping
Lo-Fidelity
In my first lo-fi sketches, I tested on five users, and quickly learned that creating a fitness profile and adding meal prep preferences was a long and complicated flow that tricked users. I needed to simplify. I eliminated some screens that did not align with the MVP. I tested again on 5 more users and redrew the lo-fi.
MID-FIDELITY
_edited.jpg)
I transferred the second round of lo-fi onto Figma and continued my user testing. Feedback in this stage allowed me to realize I needed to change the shape of icons and buttons on my design. In my head, large nearly full screen buttons would be a clean look, but in reality it was cleaner to have more empty space surrounding buttons. I shrank many items in this stage of the process.
HIGH-FIDELITY
I tested various color combinations with users and made several changes that allowed pages to appear much cleaner and simpler. I decreased the contrast on all of my ‘next buttons’ with the button color and letter color if the button was not ready to be clicked on. I also added a thicker stroke to some areas that should have been higher up on the information hierarchy and vise versa.
#CEA94B
#38DCC8
