TIMELINE
August 2022 (3 weeks)
MY ROLE
Solo student project for the Google UX Design Certificate.
PROBLEM
People suffer from pain and illnesses after forgetting to eat and hydrate.
The reasons why people forget to eat or hydrate may vary, but the two main reasons include, busy routines and being too focused on what they were working on.
THE SOLUTION
A reminder app would be helpful!
Setting up meal & hydration reminders
Highly personalized
Fast and easy setup process
Receiving notifications and logging meals and water intake
Log, track, and manage intakes
Clear and concise interface
Easily reschedule
Volume guide for hydration tracker
Summarized weekly report gives users insights about their performance
Read weekly report to check performance and keeping up your efforts
More details are available in the Web App version
Order quick delivery from selected restaurants
Limited number of restaurants
Well-organized menus
Avoid spending too much time making choices
USER RESEARCH
The initial research shows that many people do not follow a regular eating and hydration schedule, and they sometimes forget to eat and hydrate especially when they are busy or depressed.
Based on the research, I surveyed 15 participants to help me better empathize with users. The key questions and results are shown below.
COMPETITIVE AUDIT
The competitors:
were too complicated to use
had limited features
were only available on mobile devices
Moreover, there are many existing meal tracking apps, but most of them were designed to help people lose weight. Those apps focus on telling people to have more proteins and balance calories by exercise. However, fewer apps care about whether the users maintain a regular eating schedule and eat on time.
USER PERSONA
USER FLOW
WIREFRAME & LO-FI PROTOTYPE
Once the user flow was established, I started sketching on paper. After initial testing by myself using the paper wireframe, I created a digital version for almost all pages as well as the prototype. The lo-fi prototype was used for usability testing.
USABILITY TESTING
There were 7 participants in the usability testing. I used an affinity map to organize and gather insights from the observation and direct feedback.
Four insights were generated in total, which includes:
MAJOR IMPROVEMENTS
Before testing, the app didn’t allow users to log meals by text, this was designed in this way because I wanted to help users save time from choosing logging methods and typing. However, some users prefer text more than images. Therefore, the ‘pencil’ icon was added to allow users to log meals by text.
Also, since some users could not recognize the quick logging button, the icon for logging was changed from a ‘plus’ symbol to a ‘plus file’ symbol. And users are allowed to choose a meal before choosing from logging text or images.
Most users are confused with measuring the volume of water, therefore, a volume guide for standard cups and bottles was added.
According to the user research and testing, many users drink coffee and tea for hydration. Therefore, a ‘drink menu’ button was added. And ideally, the app would automatically calculate hydration intake according to the index for different drinks.
Lastly, some users were confused about whether the filled section (i.e. 1.5L in Figure on the left) is an indication of hydration “to be consumed” or “already consumed”. To clarify, the glass was replaced by a schematic illustration of human body.
The whole ‘Home’ page was deleted because it is only a summary of the ‘Meal’ and ‘Water’ pages and it was not necessarily enough. Instead, the ‘Profile’ page was renamed to ‘Account’ and replaced the position.
The ‘reminders setup’ was changed to a button with a ‘schedule’ icon and placed in the top-right corner during the UI design phase.
Moreover, since users expect more details in the weekly report with better visualizations, the bars and histogram were added, and there are more details for the web app version.
THE FINAL PRODUCT
There are totally 37 pages for the mobile app version of this project.
To view the full version of this app, please visit the Hi-fi Prototype here.
Link to my full Figma work file here.
RESPONSIVE DESIGN
For this project, I used the Mobile First Design Strategy. After wireframing and prototyping on mobile, I decided to work on the tablet version and web app version. The reason for making this app responsive is that users have many types of devices now, and during working, they may not be able to see the notifications on their mobile phones. Our mission is to remind people to eat and drink on time, and it will be meaningless if they do not notice the reminders. Therefore, people who usually work on tablets or desktops are encouraged to download the app on their preferred devices.
The web app slightly differs from mobile/tablet app in the following aspects in the interest of user interaction on different device:
1. Bottom navigation bar are used in mobile app while sidebar menu are used in web app
2. The web app showcase weekly report in greater detail as well as better visualisation
CONCLUSION + LESSONS LEARNT
What I’d do differently next time
Good design can create a better world. Before making the decision about designing for improving people’s health and wellbeing, I did a lot of research on different social issues and how design can contribute to them. By reviewing plenty of similar case studies, I realized that to become a better UX designer, I should consider as many people as my users, which include those who are sometimes ignored.
Iteration as much as possible. There is no perfect design, and users are always asking for more. In reality, as a designer, I should know how to trade-off and when to stop and hand over the design file to the developer. However, while practicing, iteration is the process of developing my design thinking and mindset.
Negative feedback and different voices are more useful. Treat negative feedback as an opportunity to learn. Users have various personalities, habits, and lifestyles. Open communication and different voices help me design better products.
Thank you for reviewing my work!
Hope you enjoy the project! And I would be grateful to hear your feedback😊
