Introduction:

The primary goal of the heuristic evaluation is to explore the major user experience
issues and complexities for the Grubhub website and to build more convenient user
experience for the target audience. The research and findings will offer guidance for
future interface design and usability tests.

We focused on the following topics: Situational Awareness, Support Mental Models, and
Support User Goals.
- The ideal criteria that Situation Awareness should meet is a clear cognitive
indication to assist users to complete tasks within the site.
- The evaluation of Support Mental Models is to determine the descriptions of texts
and contents that are clear for users to interact and follow.
- Support User Goals is to determine the interface designs are easy for the target
persona to follow and take action.

Target Persona:
Name: Colleen
Age: 20
Income: >$1,000
Location: Seattle, Washington

Colleen is currently a Sophomore student at the University of Washington, majoring in

Engineering. She takes more than 15 credits every quarter, but still works part-time in
the housing department. Therefore, though she has a certain amount of income, she
has to pay for student loans, and she is still cautious with the money she spent.

Besides academic workload, Colleen also plays in intramural football and tennis teams,
which broaden her social networks and relieve her pressure from lab work and
research. Additionally, since she’s in intramural sports teams, she is strict about calorie
and nutrition intake. Colleen likes to plan everything ahead, and she follows her
schedule very seriously.
Since Colleen is very busy with coursework, she has no time to read news or novels in
her free time, so she checks social media frequently to follow news and events. She
also doesn’t cook herself and doesn’t want to spend time in choosing what to eat either.

User Pain Points:

1. Colleen is busy with coursework and extracurricular life, therefore she has no
time to cook herself, and she doesn’t want to spend time choosing what to eat
either.
2. Eating outside can be expensive, and Colleen has a very limited budget.
3. Colleen is strict about food quality and nutrition intake, which could influence her
performance in intramural sports teams.
4. Colleen is strict in making schedules, and she doesn’t want life to be out of order.
5. It is hard for Colleen to decide what to eat for a large group of people after
training with her sports teams.

User Goals:
1. Order food online and explore food delivery service.
2. Receive the latest discount information.
3. Know the calories and nutrition ingredients of every meal.
4. Expect on-time food delivery, which could fit in with the daily schedule.
5. Have a personalized meal plan designed beforehand.
6. Order food for the sports team after training.
HEURISTICS SUMMARY
▪​ T
​ he evaluation of ​Situational Awareness​ is to determine the cognitive ease of a user to

naturally understand where to find things and how to do site tasks.

▪​ ​Supporting Mental Models​ is evaluating whether actions and labels accurately describe what
users would expect them to do or mean.
▪​ ​The evaluation of ​Supporting User Goals ​determines the ability for the primary tasks of the
main personas to be able to achieve that user type’s designated use case actions.

The evaluation key used is a simple 4-point scale outlined below. The scale is based on how
often a flagged issue occurs throughout the site. The more common the occurrence, the lower the
evaluation rating received.

details description
4 3 2 1 n/a

✅
​ Excellent Fully meets or exceeds UX
standard

✅ Good Adequately meets UX standard

✅ Marginal Minimally meets UX standard

✅ Unsatisfactory Does not meet UX Standard or

altogether absent

Not Applicable to Product

2. Situational Awareness

4 3 2 1 n/a Situational Awareness Principles

✅
Navigation titles and its associated pages correlate
2.1

✅
Pages begin with a title or header that describes screen
2.2
contents

✅
A clear indication is given to the user at all times
2.3
regarding their location within the site

✅
2.4 Cues are present to guide users through their workflow

2.5 ✅ If multiple steps are required of the user, they are kept
informed of where they are in the process

✅
2.6 Interface action consequences are clear (buttons,
menus, links, downloads, redirection, etc)

Overall Score 2.3 ​(average score across all subcategories)

2.​ ​Grubhub for Situational Awareness

2.1. ​The navigation title is unclear and offers incomprehensive choices.
2.1.1. On the homepage, users are required to enter their delivery address before
browsing. This feature provides our target consumers an overall idea about what
restaurants are available near their address. However, since there’s no navigation title,
our target users cannot get a comprehensive offering choice from the website.
 [​Fig 2.1.1.​ The homepage of Grubhub.]

2.1.2. After entering the address, users will see a navigation title on top. However, the
category is unclear and inconsistent. For instance, some labels are characterized by time,
like “lunch” and “breakfast”, whereas some labels are about style, like “American”. If our
target users want to browse all cuisines, they have to click the little blue “all cuisines” tab
on the top right, which is relatively hard for users to see. To this extent, our target
audience will spend a lot of time to find the right cuisines.

[​Fig 2.1.2.​ The following page after entering the delivery address.]

2.2.​ ​The titles are clear in most pages, while some are confusing.
2.2.1. When users click collection tabs on the homepage, they will be guided to different
collections selected by Grubhub, and those pages have clear titles correlated with the
content. However, no matter which page was chosen, it will always have “offers near you”
in the middle of the page. This feature provides target users the fastest and nearest
options, which can save their time. However, it can also cause confusion about the
following content, since users will automatically think the following content belongs to
“Offers near you” category.
 [​Fig 2.2.1.a. ​The results of choosing “60 min or less” delivery time.]

[​Fig 2.2.1.b​ The “Offers near you” category embedded in a random category.]

2.3.​ ​Indications are not very clear and sometimes create confusion for users.
2.3.1. For individual restaurant information, it is hard to understand the term “$0 min” or
“$25 min”, which causes confusion for our target users about the delivery services.

[​Fig 2.3.1.a.​ The categories and restaurant information on the homepage.]

 [​Fig 2.3.1.b​ information about individual restaurant]

2.4.​ ​Cues are not clear enough for users to follow.

2.4.1. Although Grubhub can help users prepare meals for the next following weeks, the
tab is located in drop-down bars on the top right, which is hard for users to find. after
choosing food for a certain day, users will be directed to the checkout page but not the
calendar page.

[​Fig 2.4.1.a.​ Upcoming order plans are located in the drop-down bars on the top right]

[​Fig 2.4.1.b.​ The checkout page after users choosing meals for upcoming plans.]

2.5.​ ​Instructions are detailed for users to take multiple steps, however, users have not
enough control over the purchases.
 2.5.1. Users can easily follow the instructions when order meals from Grubhub, since
when users didn’t follow instructions, the website will notify the user of the rules.

[​Fig 2.5.1.a.​ When order tacos, there will be notifications of the maximum number of options]

2.5.2. If users want to modify orders at the “Review and place order” page, the emergency
exit button is not clear enough for users to follow, therefore, it will cost a lot of time for
users to find that button, and users don’t have enough control over their orders.

[​Fig 2.5.2.a.​ The checkout page]

 [​Fig 2.5.2.b.​ “Modify your order” button is at the bottom right corner.]

[​Fig 2.5.2.c.​ The meal has already been in preparation stage only minutes after the user completing the
order.]

[​Fig 2.5.2.d.​ Users cannot cancel the order.]

2.6.​ ​Some Call to Action buttons fails to provide easy and clear instructions for users to
interact with the website.
2.6.1. Most CTAs are easy to see since it follows the theme color of blue and green.
However, When it comes to the “review and place order” page, some clickable tabs are
whether not obvious or not following neuroesthetics rules, which increase the difficulty of
completing tasks.
 [​Fig 2.5.1.a.​ The delivery time seems not clickable]

[​Fig 2.5.1.a.​ Grubhub uses horizontal order for entering payment information, instead of vertical order
like most website do ]
3. Support Mental Models
4 3 2 1 n/a Support Mental Models Principles

3.1 ✅ Appropriate user experience metaphor has been used

3.2 ✅ Menu choices are ordered in the most likely way to be

logical and coherent to the user

3.3 ✅ Application aesthetics are appropriate and in context for

the user

3.4 ✅ Tasks are described in terms familiar to the user

3.5 ✅ Interactions are consistent & expected with targeted

users

Overall Score 2.0 ​(average score across all subcategories)

3.​ ​Grubhub for Supporting Mental Models

3.1.​ ​Some user experience metaphors are used in Grubhub, but not all of them are
appropriate to trigger emotions or familiarity with users.

3.1.1. ​The “Diamond” icon for “Get Perks” fails to deliver information about
discounts and coupons.​ In the conventional metaphors, “Diamond” means something
expensive and luxurious, while “Discounts” means something cost-effective. The
metaphor of “Diamond” is the opposite of discounts. Although special icons might attract
users’ attention, the icon related to discount coupons could be more appropriate.

[​Fig 3.1.1​ The “Diamond” icon and image for “Get Perks” in Grubhub.]

3.1.2. ​The delivery time sliding bar in the Filters only provides users three choices,
which breaches the user’s expectations of a sliding bar.​ Users expect to select any
numerical value on the interval of the sliding bar, though on the Grubhub’s delivery time
sliding bar, they can only choose “45 min or less”, “60 min or less”, and “Any”.
Additionally, the filtered results of applying the delivery time sliding bar do not always
accurate. For example, in Fig 3.1.2.b, the filtered results of “60 min or less” contain the
restaurant whose delivery time is 60-70 mins.
 [​Fig 3.1.2.a.​ The sliding bar of choosing delivery time. ]

[​Fig 3.1.2.b​ The results of choosing “60 min or less” delivery time.]

3.2.​ ​Many menus of Grubhub are not arranged logically and coherently.
3.2.1. ​Some important links are hidden in the foot and are easily overlooked by
users.​ Take “Grubhub for Alexa” and “Student Discounts” as examples, these two useful
links cannot be found in other places of the site except the foot. Yet the link of “Student
Discounts” is very important information for student users who have limited budgets and
should be arranged more obviously and more coherently.

[​Fig 3.2.1​ The foot of the homepage of Grubhub.]

3.2.2. ​Lack of the side navigation bar for “Menu” in each restaurant page to help
users quickly locate the food they want.​ Users would waste a long time scrolling
through the whole menu and selecting food. In addition, there is no CTAs in the “Menu”,
like “Add to bag”, which makes users confused about how to order food through the
“Menu”.
 [​Fig 3.2.2​ The “Menu” section of a restaurant page in Grubhub.]

3.2.3 ​It is hard for users to find their “Active Orders” because active orders are
arranged in the “Help” page, which does not match user logic.​ Although users can
find all of their orders in the “Past orders” page, there is no distinguishment between
active orders and past orders, which makes users confused about the state of their
orders. Grubhub would have a more logical user experience if they design an “Active
orders” section and a “Past orders” section in the “Orders” page.

[​Fig 3.2.3.a.​ Active orders are arranged in the “Help” page.]

[​Fig 3.2.3.b.​ Active orders are also classified in the “Past Orders” section in the “Orders” page.]

3.3.​ ​The aesthetics of Grubhub is appropriate in most pages while the color palette is
not suitable.
Although the color palette of Grubhub is simple, the combination of the standard blue, red,
and white is not suitable for a food delivery website. The standard blue has been always
associated with calmness and effectiveness rather than appetizing, which would slow
down human metabolism and impair users’ desire to buy food. It would be better if
Grubhub chooses colors like yellow, green, and orange that are more appetizing to
replace the standard blue. Besides, it is somewhat chaotic to put blue text on the colorful
images of food as the Fig 3.3.b shows.

[​Fig 3.3.a.​ Standard blue is used in many places on Grubhub.]

[​Fig 3.3.b.​ Blue text on the colorful food images.]

3.4.​ ​The ordering process of Grubhub is described in plain language which is easy for
users to understand.
Grubhub uses the plainest language to describe the task, such as “Add $8.55 to proceed”
and “Proceed to Checkout” which are familiar to users and easy to understand what is the
next step. Additionally, neither jargon nor abbreviation is used in naming navigations. The
navigation of personalization is named in simple terms as the Fig 3.4.b shows, which will
not cause ambiguity or misunderstanding.
 [​Fig.3.4.a​ Notification of added food and its price.]

[​Fig.3.4.b​ The navigation of personalization.]

3.5.​ ​Most interactions are consistent in the Grubhub, but still, some are confusing or
opposite to user expectations.
3.5.1.​Inconsistent interactions in the sub-navigation of the restaurant page.​ The
navigation of “About” and “Reviews” would turn to black with a blue underline when users
scroll to the corresponding place while the navigation of “Menu” is still gray when users
are browsing the menu section. This could be a technical bug but this kind of inconsistent
interaction still hurts user’s trust in the website. Users would feel confused about their
positions on the website when they are browsing the menu.
[​Fig 3.5.1​ Inconsistent interactions in the sub-navigation of the restaurant page.]

3.5.2. ​Some interactions are opposite to user expectations.​ For example, on the
upper left corner of the top picture of the restaurant page, a “less than” sign, which is
expected to scroll the pictures in convention, is actually used to return to the former page.

[Fig 3.5.2 ​The top picture of the restaurant page.​]

4. Support User Goals
4 3 2 1 n/a Support User Goals Principles

✅
The navigation scheme and layout actively supports the
4.1
user's goals

✅
Interactions support user's goals - there are no
4.2
unnecessary or missing steps

✅
4.3 An adequate explanation is given for tasks that require
it

✅
4.4 All information a user needs is available at each stage
of a given workflow

✅
4.5 There is a clear hierarchy in the primary calls to action

Overall Score 2.6 ​(average score across all subcategories)

4.​ ​Grubhub for Supporting User Goals

4.1.​ ​The navigation scheme and layout is not user-friendly.
4.1.1. ​The main issue for most users is the volume of options a user faces on any
given page. There is a significant amount of redundancy, which confuses a user
from knowing what to click. This makes it difficult to differentiate between sections
to find relevant information.

[​Fig 4.1.1.a.​ Homepage layout.]

 [​Fig 4.1.1.b​ Homepage layout.]

4.2.​ ​The system interacts with the user’s goals

4.2.1. The users could easily start a new order when at a new restaurant page without
going to the ‘bag’ and remove the chosen items. This feature saves the users’ time when
browsing for the desired food and place an order.

[​Fig 4.2.1.a.​ Pop-up window reminding user with the current order.]

[​Fig 4.2.1.b​ Pop-up window reminding user with the current order.]

4.2.2. The ‘Express reorder’ also saves the users’ time when they want to place the same
exact food as the last time. ‘Add to bag’ feature allows the users to build a new order
based on the last one. There is no unnecessary step when the users request a
time-saving function from Grubhub ordering.
 [​Fig 4.2.2.a.​ Order detail after submission.]

4.3.​ ​There is a lack of a clear explanation about promotion, while the order instructions
are provided
4.3.1. The information about promotions and exclusive perks are displayed on the page
without providing plain language to let the users understand.

[​Fig 4.3.1.a.​ Taco bell free delivery promotions.]

[​Fig 4.3.1.b​ Taco Bell free delivery promotions but with an expiration date.]
 [​Fig 4.2.1.b​ Taco Bell free delivery promotion.]

[​Fig 4.2.1.b​ Promotion details.]

4.3.2. The order process shows up when a user clicks on the ‘track an order”. It shows up with ‘Estimated
delivery time’ and the updates it in time. More importantly, the driver’s location shows on the map on the
right side in real-time. The users are able to contact the driver by calls or texts if in need. At this waiting
step, the unnecessary anxiety and worries are eliminated at the best effort.

[​Fig 4.2.1.b​ Process information.]

 [​Fig 4.3.2.a.​ The delivery status of active orders ]

[​Fig 4.3.2.b.​ Information of the driver.]

4.3.3. ​The users are able to access the solutions when having common issues. Grubhub Care is
also available for the users when further assistance is required.

[​Fig 4.3.3.a.​ Active orders showed in the “Help” page.]

 [​Fig 4.3.3.b.​ Detailed information offered by the “Help” page.]

[​Fig 4.3.3.c.​ Live chat window.]

4.4.​ ​User’s goals failed to realize is the lack of information

4.4.1. The lack of information was found based on the persona’s goal of acknowledging
the food information. Especially, there are food images missing on the menu. It could be
not compelling enough for users to place orders without visual stimulations. Besides, the
nutrition facts and diet-friendly tips should be displayed on the food description page to
save users’ time to choose their desired food.
 [​Fig 4.4.1.a.​ Ordering interface.]

[​Fig 4.4.1.b.​ The “Menu” of a restaurant.]

4.5.​ ​Clear hierarchy to take inquiring actions.

4.5.1. Overall, there is a clear hierarchy laying out to call for users’ action which to place
an order with efficient information. The users are not able to add an item to the bag
without filling in the required information. Also, the ‘proceed to checkout’ function is
conspicuous on the page to lead the users to the final payment.
[​Fig 4.5.1.a.​ Specific choices made for meals.]

[​Fig 4.5.1.b.​ Proceed to check out page.]

 [​Fig 4.5.1.c​ The checkout page.]

5. Additional Notes

Recommendations for improvement:

1. Users can submit payment after ordering food from different restaurants with
different meals. ​Our target user Colleen and her sports teams often order food after
training, and since it is hard to order food from only one restaurant, it would be better if
individuals can submit orders after browsing different restaurants.

[​Fig.1.​ Individuals have to finish the payment for one order first before adding other
meals into bags]

2. Split payment with friends.​ Colleen often eats with her sports team friends, and it
would be inconvenient for them to switch to another app (i.e. Venmo, Paypal) to split
 payment. Therefore, it would be easier for group ordering if Grubhub could do the
payment split on the website.
3. Show calorie and nutrition information for meal plans and certain meals such as
sushi and salad. ​Since Colleen participates in two intramural sports teams, she cares
about nutrition and calorie intakes, so it would be better if Grubhub provides that
information for consumers like Colleen.