.png)
Healthy & Hydrated
A conceptual, end-to-end, mobile design challenge to improve everyday habits
Role: Research & UI/UX
Timeline: July-September 2021
What's the issue?
Despite the many health apps and services available, changing our bad habits is still a difficult task to achieve, and most don’t know where to begin.
A better way...
A practical wellness app that empowers individuals seeking a more healthy lifestyle by focusing on 2 specific goals:
1. Improve one’s daily hydration intake
2. Snack better by discovering healthier alternatives
Problem Statement
Living in a pandemic has made it increasingly more difficult for people to maintain healthy habits during quarantine. A departure from our daily routines can lead to the forming of bad habits such as not consuming enough fluids (mainly water), losing sleep, or snacking all day.
Bad habits likes these can slow down our immune system and potentially lead to serious health consequences
My Role
Solo student project for Springboard UI/UX Bootcamp
Oversaw the entire Healthy & Hydrated project from idea inception to strategic planning and execution, including the creation of user flows, building wireframes, and running moderated user test sessions
Secondary Research
(Why is this important?)
Starting with white paper research, I compiled articles & published resources on the importance of hydration as well as the benefits of healthy snacking.
Once I came across the statement below, I knew my product could be used by a wide array of people:
“Losing as little as 2% of your body’s water content can significantly impair your physical performance.”
- Healthline.com
Screener Surveys
(Discover Phase)
My research plan began with creating and distributing screeners in order to identify my target market.
My aim was to find potential users who have quarantined for at least 2 weeks and to help them improve then maintain water intake and snack choices.
The surveys were distributed via Facebook, Instagram, and Snapchat.
User Interviews
(Who needs this?)
After screening 15 people, I then conducted five individual Zoom interviews lasting 30 minute each.
The goal of the sessions was to learn and better understand my users’ current snacking and hydration routines.
Participants were asked to answer a variety of scripted questions pertaining to those habits, aiding to discover what can be improved.
Research Questions
(Finding Trends & Similarities)
1. How often do you snack or eat junk food? (chocolate, chips, candy, etc)
2. How likely are you to have a late night snack? (past 10pm)
3. During which meals would you normally drink water?
4. Do you generally bring a reusable water bottle outside of your home?
5. How do you monitor your hydration level?
Affinity Mapping
(Empathize)
After gaining a better understanding of my users’ habits, I created an affinity map which was a useful exercise that allowed me to cluster my user responses and interviews into related groups- with the intention of finding trends and similarities.
For example, most users had the same relationship towards water (i.e. water is good for us and we should drink it regularly), but they varied when speaking about eating routines. Some ate 3-5x per day while others just 2-3x per day.
Top User Insights
(What I learned)
-
Users generally eat the same foods, especially during the work week
-
Users like the idea of healthy snacks but usually don’t know what to choose
-
Users are more open to trying new snacks when suggested by friends
-
Most users enjoy drinking water, but admit they could be better about hydrating
User Quotes:
-
“I rarely buy new snacks at the store”
-
“Since the pandemic, I basically eat the same foods during the week”
-
“I would probably hydrate more if I was reminded or motivated”
Empathy Mapping
Empathy mapping was a useful tool which allowed me to organize the observations and quotes collected from the interviews.
This exercise was insightful as it provided me a window into my users’ mindset which helped guide my design thinking.
Target Market
My ideal users are foodies, young professionals, and active people striving to maintain a healthy lifestyle.
The typical users being tech savvy, adventurous with their tastes in food but lack consistency or motivation to improve.
Persona
Once my empathy map was finalized, I explored even deeper to better understand my users’ pain-points, goals, feelings, and behaviors; imagining how they would interact with the H&H app and in what scenarios that would occur.
With my empathy map, I was able to create a persona for my ideal user which provided a real-world feel to my design thinking. I empathized more with the users as I envisioned their background, goals, motivations, and brands they’re currently accustomed to.
User Story
After speaking with my users and synthesizing my findings, I devised my user stories which helped me identify the functional needs of my product before designing the product interfaces.
It was determined that my users wanted 2 core features:
1. A way to discover new and healthier snack options based on tastes.
2. A way to feel motivated to hydrate regularly or at least feel accountable when they don’t hydrate.
Name Rationale
(Brand Platform)
The terms “healthy” & “hydrated” are synonymous with prosperity and positive well-being. Healthy & Hydrated has a larger purpose that goes beyond simply drinking water and snacking healthier. It’s promoting a better way to live.
Mission
People of all ages wish to instill healthy habits but don’t always know where to start. Our goal is to help build the foundation for people to form better habits in life, beginning with proper hydration and healthy snacking.
Style Guide
(Aesthetics)
Created to set the standards in design and to ensure the project remains consistent on all levels.
Moodboard
Crafted to provide direction and inspiration.
User Flows
(Design Evolution)
A vital aspect of my design process involved conducting a heuristic analysis with similar digital products, focusing on user needs and efficiencies which led to the creation of user flows.
These user flows serve as a visual blueprint mapping out each step the user takes through the designated red-routes.
Sketches/Low-Fidelity
(Ideate)
For the first round of sketches, my focus was on collecting user information and directing users in the most transparent way possible through effective CTA buttons.
Once all the essential screens were sketched out as outlined in my user flows, I converted them into a clickable prototype via Invision which I quickly distributed to my participants, with the intention of conducting guerrilla usability tests.
Hydration Sketches
Snacking Sketches
Low-Fidelity Screens
High Fidelity
(Validate)
After validating the user flows through the creation of low-fidelity wireframes, it was time to take in that feedback and implement the changes into high fidelity mockups.
A few examples of user feedback included:
-
Creating an avatar to serve as hydration motivator
-
Adding more options for the gender role(s) screen
-
Adding a “Find a quick snack” or “surprise me” like feature
Here I begin to add the necessary brand personality into the mix such as color and font style.
Snacking Feature
Empathy maps, user persona, wireframes, and the H&H style guide were all present during the making of each high-fidelity screen.
Prototyping
(Test)
Now that I have a batch of high-fidelity screens, I was able to prototype my design in order to begin testing . User interactions were explored and carefully reviewed during the 2 rounds of testing with my 10 participants.
The use of site maps and user flows guided my design decisions during the first iteration of my high-fidelity prototype.
Moderated Usability Testing
With my final prototype, I conducted a series of usability tests by creating a script and had each user answer a short list of questions based on different sections of the app.
High-Fidelity V1
(Iterate)
Iteration on High Fidelity Screens
After running two rounds of usability testing, I used the results to begin the iterative process of making my designs more user-centric. A few changes include:
-
Updating the daily stats view to appear more organized and readable
-
Adding a toggle button to allow users to easily receive in-app notifications during the on-boarding process.
-
Increasing the font sizes on bullet points and speech bubble texts
-
Re-designing the hydration UI from static to fluid in order to simulate the experience of recording water in-take in real time.
High-Fidelity V2
.png)
Reflection & Future Direction
After taking some time to review, I believe the discover section could have been re-designed to be a little more user-centric. Currently users are asked to select generic snacks. If given more time, I would have users input their favorite brands and specific snack foods (Lay’s, Doritos, Cheetos). With that information, the app could truly pinpoint the closest and healthiest alternative that best mimics those same brands and snack flavors.
For example, if a user inputs “Lay’s Classic Potato Chips”, the app would find and suggest healthier sea-salt based chips such as “Good Fish” crispy salmon skins.
People naturally gravitate towards snacks and flavors they know and love. Once the app receives that information, the algorithm could then suggest the healthiest alternative with useful information so the user can actually find and purchase the snack.
Exmples include:
-
Link to the company website
-
Locations of stores that carry the snack
Goals met
Overall the users understood the primary goal of the app and its main features. The feedback from the usability tests was crucial in identifying areas of both strengths and weaknesses, as well as fine tuning certain elements.
Usable product
As a result, the user responses confirmed my prototype was a usable product and its core values were recognized.
Further Testing
I would not say this round of design was conclusive enough as I’ve yet to test my concept for the discover re-design. If given more time, I would ‘ve done A/B testing with the snacking screens with more participants to get a true gauge on what’s best for the user.
Thank you!
