A UX Case Study for the Interaction Design Specialisation from Coursera by UC San Diego.
One day, I noticed a colleague writing down and measuring everything she eats. I asked her about it, and she said that she had started a new diet. She’s always wanted to lose weight and be healthier, so she has been trying many diets, only to fail every single time.
She’s not the only one with that struggle. Most of us want to live healthier lifestyles, but only few actually succeed — especially when it comes to eating. That sparked my curiosity about why some people succeed and most of us fail. Is there a way to make it easier for people to maintain healthy eating habits? It was a a great place for me to start looking for insights and design opportunities.
I selected people to interview who are in varying degrees of success in their diet choice. I classified the degrees as diet-failed, diet-in-progress and diet-success. These interviews led me to uncover some interesting behaviour patterns, insights, and common pain points:
- In general, most people decide to go on a diet to be healthier
- They find it is actually easy to start a new diet, and even sustain it for weeks or a few months
- However, people stray from their diets when they are outside of their regular environments (for instance, when they go for a holiday or when they move to a different country)
The last point struck me most. I thought it was interesting, so I asked them why they think that is, and they said that it’s because they don’t know where to go or how to communicate their dietary requirements when they’re travelling. So they end up eating whatever is available. This disruption makes it harder to get back on track with their diet. And soon after, they give up.
So I thought: how can we prevent this disruption so people can stick to their diets?
I wanted to develop an app that focuses on the user’s desired outcome and context of use. I started the ideation process by developing a persona, and supplemented it with a Job Story.
Jo is in her early 30s, working as a writer in Singapore. She works 9–6pm every day during the week and goes out with her friends and family over the weekends. She enjoys life and loves to travel. She wants to have better eating habits to be healthier.
Addressing Frustrations with Functions
Going back to my interviews, I looked at the common pain points. After narrowing it down to three, I listed potential solutions for each. From this list, I shortlisted the three crucial ones that can be turned it into an app function that would help the users achieve their goals:
- Search/find places to eat or food options: The app should be able to search for places to eat nearby.
- Suggest alternatives if there are no other choices nearby: The app should contain a database with suggestions on how to customise the food available in the menu to fit a specific diet.
- Communicate dietary restrictions: The app should have a translator to help users communicate their dietary preferences when traveling.
Prototype and User Testing
I created storyboards to plot the idea of the basic user flow and how the app will function.
After developing a user flow and wireframes, the next step is to build a lo-fi prototype and start user testing. This was my first time conducting user testing, and I’ve come to realise that this is a very useful and insightful exercise. Watching people interact with the prototype helped me address some gaps in my initial design and information hierarchy.
Learnings from User Testing
Prototyping and user testing is one of the most exciting parts of the design process. You learn from the interactions and rectify errors or make changes quickly with each iteration cycle. For example, the three main issues that came up during this stage were:
- The home screen is too simple and bare. Users were expecting to see more information on it. As a food finder, respondents pointed out that one would expect a map on the home screen.
Solution: Overlay the basic search function on top of a map so that users have a clearer direction on where to start and what they can do next.
- Nobody understood the “Food Alternatives” function. People were clearly confused by this function, even after explaining that it would give them suggestions on how to customise the food options to fit their diets. This is a crucial function of the app, so I had to find a better way to introduce the users to it.
Solution: The crux of the problem is that this function is really fulfilling two different roles: (1) allowing the user to search by food type instead of location, and (2) offer suggestions on food options that will fit the user’s specific diet. The first role is better implemented as a search filter. The second can be incorporated into the information/detail page where people expected it to appear.
- There should be a way to abort mid-search and start a new search or switch diets. People are fickle creatures. They can change their mind at anytime, and the app should be able to accommodate to this behavior.
Solution: I placed a navigation bar that includes a link back to the home screen and to other important screens in the app.
I gathered valuable feedback after a series of prototyping and user testing. I incorporated the data collected into the user flow and navigation. But before I can proceed with the final stages, I need to settle one more thing.
The iterative prototyping and user testing provided valuable feedback. I used the data collected to improve the user flow and navigation. But, before proceeding to the final stage, I needed to settle one more thing. The food detail screen featured a nice full-screen image of the item, which most testers liked. However, they didn’t notice the tabs that would take them to more information or actionables on the item. I could just make the photo smaller to accommodate more content into the screen, but it would have cluttered the screen and probably turn people off.
I decided to do 2 versions of this screen and conduct an A/B test between them via usertesting.com to see which approach will work best.
A/B Testing Results
So far, all tests on the app had been conducted by me in person. This next round of tests were more challenging because they were done remotely. This means that, before proceeding, you have to make sure that the test instructions are clear. Without you present to guide the tester, these instructions are crucial for them to be able to provide a proper evaluation.
The majority of testers picked version B over version A. The main reason was that they preferred the bigger photo, as it makes the screen more appealing. One tester added that having the tabs at the top feels more intuitive when looking for the information section.
I had codenamed the app “Food Finder” during the prototyping and testing phase, but the time came to finally settle down on a name. I listed some options for the app: FoodFinder, DietMate, Foodie, FindGoodFood, etc., but nothing stood out. After much serious deliberation, I thought that it was time to just have fun with the branding and call it the Toad app. Toad is an acronym for Traveling On A Diet.
The app should be as simple as possible, especially the look and feel. I was aiming for a visual design that was flexible enough to allow for changes in the future, so I chose a classic font and paired it with a neutral colour palette. Each diet was given a corresponding colour accent, to serve as a visual cue in case the user switches diets.
Home screen and search
I wanted the app to be as fuss-free as possible and for it to be usable straight away, without needing to go through an onboarding process.
After downloading the app, a guest user can choose to search right away without registering nor going through any onboarding. They are taken to the search screen (map view is set as default) and are asked to input their diet. The results appear right away.
If a user chooses to sign up, they will go through the onboarding process. The app will save their selected diets and, the next time they log-in, they will see restaurant options already filtered according to their preferences.
Food Detail Screen
This screen is the raison d’être of the app. In it, the user can see if a particular offering fits their selected diet and, if it does not, how to customise it to make it diet-compatible. A translator function will assist the user in asking for the said customisation at the restaurant.
Final Prototype and Video
It’s challenging for people to maintain their desired eating habits to keep a healthy lifestyle. While there are many reasons why people eventually fail, a recurring theme is that something disrupts their routine and they have a hard time getting back to it. I think a service like TOAD can go a long way. It will help people stick to their diets even when they are travelling to unfamiliar places by helping them find food options and communicating their dietary requirements.
So far the feedback has been definitely positive, and testers seem to find it useful and fun to use. But for now, the design process is still ongoing. The more data I gather through research, prototyping and user testing, the more avenues I see for potential improvements. I am excited to work on the next iteration, which will involve:
- Researching on features
- Improving visual design consistency and user flow
- Designing an onboarding flow
- Designing interaction animations, and
- Conducting usability tests of the app.
It has been an amazing learning experience designing my first app and preparing this case study.