Map Bg04.jpg

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.

ae-01.png
ai-01.png
ps-01.png
map-vertical.jpg

DEFINING THE PROBLEMS

Screen Shot 2020-07-17 at 10.08.12 AM.pn

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.jpg

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.

googlemaps.png

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. 

map-vertical.jpg

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

Z-persona_Kayla.jpg
Z-persona_Arjun.jpg
Z-persona_Jeff.jpg

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

02-User-Flow-Diagram.jpg
map-vertical.jpg

LOW-FIDELITY

SKETCHING

001_edited.jpg
002_edited.jpg
003_edited.jpg
004_edited.jpg
005_edited_edited.jpg
006_edited.jpg
007_edited.jpg
008_edited.jpg
009_edited.jpg
010_edited.jpg
011_edited.jpg
012_edited.jpg
014_edited.jpg
013_edited.jpg

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

001.jpg

Option 2

002.jpg

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.

map-vertical.jpg

HIGH-FIDELITY 

WIREFRAMES

Starting Location.png
Starting-Time.png
Ending Location.png
Ending-type.png
Calculate-Route_–_2.png
Food-Search – 1.png
Restaurant-PHOTOS-Tab.png
Restaurant-All-PHOTOS.png
Restaurant-All-PHOTOS_–_1.png
Restaurant-INFO-Tab.png
Navigate-via-photos.png
OnTrip-to-restaurant.png
OnTrip-Arrival.png
Along Route.png

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?”.

map-vertical.jpg

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

Z02-many-side-bysidejpg.jpg

IN USE MOCKUPS

Z01a.jpg
Z02a.jpg
Z03a.jpg

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.

map-vertical.jpg

Style Guide