TastyBeats: Designing Palatable Representations of Physical Activity
Palatable U X Case St udy - Artemis Design Labs Case St… · Palatable U X Case St udy ... Kshitij...
Transcript of Palatable U X Case St udy - Artemis Design Labs Case St… · Palatable U X Case St udy ... Kshitij...
Palatable UX Case Study A redesign of an on-demand food delivery platform ─
Team Members Pritish Sai Kannan - UX Design, UI Design
Kshitij Sinha - UX Research, UX Design
Vaibhav Gupta - Gamification of UI
1
Introduction
It’s the end of 2019 and on-demand food delivery platforms are on
the rise. With a large number of options to choose from (including
Grubhub, Doordash, Uber Eats, and Postmates), how does a new
entrant into this market compete with these existing behemoths?
Palatable is the newest player in this market and it currently operates
only in New Jersey with plans to rapidly expand all across the United
States.
We worked with Palatable to redesign major portions of their UI so
they could compete and become a market leader in the on-demand
food delivery sector.
Note: This project is currently in progress so all the final prototypes
are not listed below
2
Problem Definition Users have access to a lot of on-demand food ordering platforms
that offer very similar services. How do they choose which one to
use at any given moment and more importantly, is possible for them
to completely switch to only one platform that has the most intuitive
user-experience.
3
Design Process Our design process is broken down into three sections.
Research + Findings
Define Objectives
Prototyping
4
Research Competition Analysis
We made a list of primary features from some of the immediate
competitors to Palatable. We also listed features that Palatable could
incorporate in their design which are not present in current apps.
5
Online Surveys
We conducted an online survey and asked users about their current
experience with on-demand food ordering platforms to gauge their
level of satisfaction with current services and if their user needs are
met.
Key Findings
● Most users often order the same food
● Most users order food during dinnertime
● Over 50% of surveyed users state that they order food for
themselves as well as others
● Most users add something to their order (like fries) before
checkout
● Most users went with item suggestions to fulfill the minimum
delivery
Usability Testing
We then tested the Palatable iOS app with several potential users at
a college campus and recorded their observations.
Key Findings
● Users often forgot which swipe is like and dislike
● Users prioritize time and distance over price
● Users had issues with font inconsistency
6
● Users were overwhelmed by the number of choices
● The modal that appears after users click ‘My’ is confusing
● Users would like the option of restaurants that offer a specific
dish appear
● Users want more information on the item’s card itself before
swiping for more details
● Users had issues with inconsistencies in font sizes
Heuristic Evaluation
Our next strategy was to do a heuristic evaluation of the service to
identify all major usability violations in line with Nielson’s usability
rules.
Onboarding
Violation Nielson’s Heuristics
Home icon at the center Consistency
My->Swipes does not show
updated list of swipes instantly
Efficiency of use, visibility of
system status
Info opens a modal, slider Consistency
Hamburger menu slides up Consistency
The icon used for ‘My’ is more
suited for access to the user’s
Consistency
7
profile
Whitespace in filter and
onboarding screens with diets,
allergies and cuisines are too
much
Whitespace, aesthetics,
minimalism
Title on search page is unlike a title
and looks like a clickable link
Consistency, visibility of system
status
Search page nearby is not
clickable, looks like you can click
and change location
Consistency, visibility of system
status
Badge for cart is on the left Consistency
Home
Problem Violation
“Liked” is shown above the image,
overlapping with the location
Flexibility and efficiency,
aesthetics, recognize and
diagnose errors
Duration for liked and disliked
different when thumbs used and
swiped
Consistency
Swiping system needs a better Match between system and the
8
hierarchy real world, Recognition rather than
recall?, Efficiency of use,
Recognize and diagnose errors
‘Order Now’ page
Problem Violation
Ingredients are truncated while
visible on the cards
Consistency, visibility of system
state, help and documentation
0.8 Mil, distance of the restaurant
is not clickable
Consistency
Restaurant data not there on cards Consistency, real world and
system match
Cuisine on page is green, looks
clickable
Consistency
Ingredients have different font
weights
Inconsistency, external and
internal
Restaurant Page
Problem Violation
Top bar keep stacking wasting UI Consistency and standards,
9
space aesthetics, efficiency of use
The menu button in the center is
redundant
Consistency
Does not allow to jump to top User freedom and control
Contact info is grey and looks
unclickable
Consistency
Bottom cart can easily be missed Aesthetics
90% of the navbar items have no
information
Aesthetics and Minimalism
My cart
Problem Violation
Order type opens a modal when
looks like a dropdown
Consistency
Select tip amount - amount looks
like a subtraction
Consistency
Proceed to pay bar is small Aesthetics
Delivery not available error is basic
alert
Consistency, aesthetics
10
Define Objectives Define User Needs
● Users don’t want to think hard about their order
● Users trust the app will give them the best choice
● Users value time and distance over pricing
● Users often order during specific times of the day or during
specific events
● Users want to have the most relevant information when it
comes dishes or restaurants Target KPIs (tentative list)
Due to limited resources, we couldn’t measure the target KPIs we
listed prior to the research. However, for future research purposes
we estimate that the following KPIs need to be targeted in order to
understand Pal atable’s current standing in the market.
Objective KPI How to measure
Customer Acquisition Downloads App store (public)
Sign-ups Analytics Tools
Engagement Swipes Usability Testing / Analytics
Favourites Usability Testing / Analytics
Likes / Unlikes Usability Testing /
11
Analytics
Order edits Usability Testing / Analytics
Searches (dishes…) Usability Testing / Analytics
Order now Usability Testing / Analytics
Add to order Usability Testing / Analytics
Preferences Usability Testing / Analytics
Retention Bounce Rate Analytics
Returning users Analytics
Session duration Analytics
Happiness / Overall Satisfaction
Happiness / Overall Satisfaction
Usability Testing / In-built tool
Happiness / Overall Satisfaction
Happiness / Overall Satisfaction
SUS score calculation
12
Target Personas
Based on all the data we uncovered from both the market research
as well as the user research and keeping the user needs in mind, we
generated three target user personas who would benefit from using
the app.
13
14
15
Maslow’s Hierarchy of Needs
Using the UX version of Maslow’s pyramid, we allocated features
that are of immediate importance (functionality) to features that
have less importance, but are still relevant to the app.
Feature Level
Checkout Screen
Easily differentiate between delivery and pickup.
USABILITY
Empty entire cart with one click or edit order RELIABILITY
Tips dynamically show up on ‘Delivery’ option USABILITY
Easily switch between current and previous orders
USABILITY
Easily reorder a previous order (all info including tip is saved)
PROFICIENCY
Swipe and Dish Screens
16
A clear and visible indicator of whether the swipe is a like or dislike while the user is in the middle of the swipe so they can revert or continue the interaction
USABILITY
More relevant information on the card itself so the user does not have to open the card for more info
USABILITY
An ‘order now’ symbol so the order gets added to the cart without obstructing the journey the user is on (swiping)
FUNCTIONALITY
More images of the dish in an image slider RELIABILITY
List of additional restaurants that serve that particular dish
FUNCTIONALITY
Liked and Unliked Items
Easily move an unliked item to a liked section or delete them entirely
FUNCTIONALITY
Add liked items to the cart easily FUNCTIONALITY
Preferences overlay
A new section called ‘Moment’ which features scenarios when users might want to order food.
RELIABILITY
A dropdown option with primary and advanced filters
RELIABILITY
Minimum delivery suggestions
The app will suggest several items that will make up the minimum based on the user’s preferences
FUNCTIONALITY
17
Design + Prototyping User Flow
After creating our LoFi wireframes we designed a user flow that
focused on the primary features outlined in Maslow’s chart.
18
High-fidelity wireframes
Checkout screen
1. Our checkout screen has the following functions
a. Easily differentiate between delivery and pickup
b. Empty entire cart with one click or edit order
c. Tips dynamically show up on ‘Delivery’ option
19
d. Easily switch between current and previous orders
e. Easily reorder a previous order (all info including tip is
saved)
20
Swipe and Dish Screens
2. Our swipe and dish screens have the following functions
a. A clear and visible indicator of whether the swipe is a like
or dislike while the user is in the middle of the swipe so
they can revert or continue the interaction
b. More relevant information on the card itself so the user
does not have to open the card for more info
c. An ‘order now’ symbol so the order gets added to the cart
without obstructing the journey the user is on (swiping)
21
d. More images of the dish in an image slider
22
e. List of additional restaurants that serve that particular
dish
23
Liked and Unliked Items
3. Users have the following options with liked and unliked items
a. Easily move a unliked item to a liked section or delete
them entirely
b. Add liked items to the cart easily
24
Preferences overlay
4. The preferences overlay has the following functions
a. A new section called ‘Moment’ which features scenarios
when users might want to order food
b. A dropdown option with primary and advanced filters
25
Minimum delivery suggestions
5. If the user’s bill is below the minimum delivery
a. The app will suggest several items that will make up the
minimum based on the user’s preferences
26
Interaction Design
Checkout screen
27
Swipe and Dish Screens
28
Liked and Unliked Items
29
Preferences overlay
30
Minimum delivery suggestions
31
32