A UX/UI CASE STUDY
LOCATION
RECOMMENDATIONS
FOR DIETERS
I hypothesis that dieters need more available help in situations that cause them to fall off track.
DEFINING THE PROBLEMS
Problem #1
DINING OUT
Forty-five million adults, in the United States, go on a diet each year. Experts say that as few as five percent keep the weight off long-term. Eating out causes most people to fall off track, so people need to learn of healthy options when dining out.
American Heart Association stresses this problem.
Problem #2
PRESSED FOR TIME
The average American has seen a 12 percent increase in time spent in their car weekly from October '18 to March '19. With this decrease in our extra time, we are now more often led to believe there is no other choice but to fall off track.
EXPLORING
THE SOLUTION
Step #1
LOCATION
RECOMMENDATION
INTERVIEWS
To gain a deeper understanding of the use of location recommendation apps, I have conducted interviews accordingly.
To save time, people choose a place to eat near the route they must travel. All users interviewed used Yelp’s “Redo Search In This Area” map filter. But this design pattern does not efficiently narrow down the results for time efficiency.
Step #2
DIET INTERVIEWS
Questions asked in the interviews were geared towards uncovering the struggles faced while dieting.
Social settings, especially when they did not pick the restaurant, are a significant cause of diet failure. Making modifications to stay on track can be embarrassing, time-consuming, and stressful.
HealthyOut App
The Healthyout app requires a massive commitment to eating out. Their plan averages 25 meals per month with a costing median of $500 to the user. They are only featured in select cities across the US and partnered with select restaurants.
Step #3
COMPETITOR
ANALYSIS
I performed a Competitor Overview, Market Analysis, SWOT Analysis, and UX Analysis of the apps Healthy Out, Google Maps, Roadtrippers, and Foursquare.
Google Maps
Google Maps can search for locations along a route, but the design pattern is somewhat hidden. When using this design pattern, there is not much information or pictures provided per location.
CHALLENGES TO SUCCESS
ONE
SEARCH RESULTS
Search results should only include restaurants with options that are friendly to the user's specific diet.
TWO
FLEXIBILITY
The app has to be customizable to fit all possible situations and time schedules for efficiency.
THREE
LOCATION INFORMATION
All locations should have a restaurant page for in-depth information and images. They should include the ability to view diet-friendly options.
FOUR
TIME MANAGEMENT
Create efficient time management features to ensure recommended locations fit in with their current schedule.
USER PERSONAS
These personas are based on research and were used to guide the ideation process. They helped to understand the user's needs, experiences, behaviors, and goals.
USER FLOW
DIAGRAM
LOW-FIDELITY
SKETCHING
USER TESTING
RAPID PROTOTYPING
This test aims to assess the learnability for users interacting with the "Diet Out" app for the first time on mobile. I observed and measured if new users understand the project's design and how to complete essential functions.
Following the test, I synthesized my observations into concrete issues, ranking the issues using Jakob Nielsen’s error severity rating system, and then I proposed solutions for the design based on test results.
MOODBOARDS
Option 1
Option 2
PREFERENCE TEST
I performed an in-person A/B test on three users and then repeated the test 2 days later on the same users to gain more qualitative feedback. Repeated testing proved that some users switch their preferences on different days. In this case, qualitative data was more valuable than quantitative data.
The most significant findings from the test was that option #1 is more artistic and conceptual. Option #2 effectively tells the full story of the app. This is why I have chosen to move forward with option #2.
HIGH-FIDELITY
WIREFRAMES
FEEDBACK
A/B TEST
PREFERENCE TEST QUESTION
"When comparing the two screens, You will see a difference in the top section. The top section has the restaurant name, restaurant info, 'like' button, and “'add to route' button. Which Layout do you prefer?"
A
48%
B
52%
Twenty-five participants took part In the preference test. Since the quantitative data was close to 50/50, the final decision was based on qualitative data gained by the follow-up question, “Why do you prefer the option you chose?”.
CRITIQUE
PEER ANALYSIS
The participants in the critique both have a background in UX/UI Design. This made them a valued asset to acquire detailed feedback.
The critique resulted in implementing Important meticulous changes to improve the app. However, I realized that some features were fully not understood because the screens were not animated prototypes yet.
EXECTUTION:
ANIMATING PROTOTYPES
Challenge
Search results should only include restaurants with options that are friendly to the user's specific diet.
Solution
Immediately after signing up, the user chooses their diet.
Challenge
The app has to be customizable to fit all possible situations and time schedules for efficiency.
Solution
The user first enters to find locations near them or along their route. If they are on a tight schedule, they can enter the logistics of that time frame. They can calculate a route by car, walking, or biking.
Search Results
Each search result is assigned a red or green indicator, which is generated to fit their schedule. Colored indicators inform the user if they have time for a sit-down or take out at that location.
Challenge
All locations should have a restaurant page for in-depth information and images. They should include the ability to view diet-friendly options.
Solution
Restaurant pages include all the necessary information on the restaurant. Each picture submitted by a user consists of a rating and details on the contents of the image. Users can share how they have chosen to stay on their diet at each location.
Challenge
Create efficient time management features to ensure recommended locations fit in with their current schedule.
Solution
After the user selects to add a restaurant to their route, they are given a schedule and a suggested method of a dining experience. Once they arrive at the restaurant, a timer starts counting down to the latest time they should leave the restaurant.
Creating an Account
When creating an account, each question is individually separated on its own page to prevent the user from being overwhelmed by all the information they need to enter at once.
Animating Backward Navigation
The transitions moving forward in the user flow should always seamlessly match the backward navigational transitions.
Asking for Permissions
Users are increasingly hesitant to permit apps to access their personal information. Simply asking for permission isn't sufficient on its own. What matters is the way the app asks for permission. It's essential to educate the user on why the request is being made and what benefits the user will receive.
RESPONSIVE DESIGN
IN USE MOCKUPS
RETROSPECTIVE
PIVOTAL POINTS
-
I initially preferred mood board #1 over #2. But after an in-depth analysis, It was clear that #2 was the better option.
WHAT WAS UNEXPECTED?
-
I did not expect there to be a search along route feature on google maps.
-
I thought quantitative data would have been more reliable than the qualitative data in the A/B test.
AREAS FOR IMPROVEMENT
WHAT COULD I HAVE DONE BETTER?
-
After creating mood boards, on top of my in-person A/B tests, I should have also conducted an A/B test online to gain quantitative and qualitative data from a larger sample.
SELF-INSIGHT
WHAT I LEARNED ABOUT MYSELF
-
I design with animation in mind as early as the creation of low fidelity wireframes. I have noticed how this is one of my biggest strengths as a designer. The ability to intertwine wireframes together, through seamless transitions, allows the user to feel as if they don't have to navigate through many different screens to achieve a complex task. The ultimate goal is to make tasks easier for the user. The better I become at this, the simpler my designs will appear.
ITERATION
-
Build out more aspects of the social community and forms of support to the user.
TAKING IT FORWARD
-
Create another version of the “Create an Account” Screens that includes all input fields on one page. Then conduct an A/B test comparing the two.
-
Develop a questionnaire to pair users with compatible diets. This is important to set users up for success early.
-
Implement videos for users to access basic knowledge on their diet.
