Giant Eagle is an American supermarket chain with stores in Pennsylvania and several surrounding states. GetGo is a convenience store chain owned by Giant Eagle. During my work at Giant Eagle as a UX Designer, I was assigned a pivotal task: designing an intuitive food-finding flow for GetGo's mobile food ordering app, which serves over 250 stores.
IMPACT
Highlights
27%
Accuracy Improved
43%
Reduction of time locating a food
57%
Reduce steps to add to order
Problem Outdated Old Design
The old design looks complex and outdated. Users need to take 5 to 7 steps to reach the product detail pages and "add to order" button, which challenges the users memories, leading to a cumbersome ordering process.
Problem 1
78% of users drop off in the middle of the flow, which significantly impacts our order volume.
Problem 2
Usability Issue: Users need to recall what they selected previously. For example, the "add to order" page did not include the product name. The pages did not inherit the information from previous pages.
LEARN FROM MARKETING LEAD COMPETITOR Competitor Benchmark
We selected McDonald’s and Taco Bell as competitor benchmarks and noticed that McDonald's achieves the 'Add to Order' page within 2 clicks, and Taco Bell achieves the 'Add to Order' within 1 click.
Menu Page: Designing for Everyone?
When I was assigned this task, I initially assumed that nearly everyone could be a potential customer for a convenience store. However, this broad assumption did not help me to prioritize my design. To pinpoint our target users, I used three essential methods:
Talk with Product Manager
Method 1
Interview Users
Method 2
Learn From Previous Report
Method 3
Common Challenges for Our Users:
Addressing Their Hunger Within a Tight Timeframe
Busy Professionals
The inability to promptly find the desired food could create unnecessary pressure.
Fatigue Drivers
After hours on the road, drivers might be anxious if they can not quickly locatethe food they want at a gas station.
Design Goals
Create an intuitive menu that helps customers find what they are looking for and reduces ordering hassles.
Users Goal
Quickly find desired food
Business Goal
Improve the add to order rate
Design Decision
Explore by Categories
After analyzing 9 direct competitors, I realized that clear menu categorization and labeling are important for users to navigate the menu effectively. Therefore, I came up with two methods to help users to browse a broad selection of food by categories.
Option A
(Browser Categories Vertically) (Recommend)
Pros:
Vertical scrolling is natural and intuitive action for mobile app users
Showcasing 6 categories per page enhance users quickly overview and access their options with minimal scrolling
Prominent text and imagery improve the visual clarity
Cons:
Redundant Navigation Steps: User has to backtrack to main category page every time they want to explore a new category after making a selection
Option B
(Categories Tab, Scroll Horizontally)
Pros:
Easy flip between different categories: using the tap bar for category navigation unlike back and forth navigation, Tap bar provides immediate feed back, as users swipe, they instantly see the next or previous category.
Direct access to items: by showing items within each category on the same page, users can directly select their desired items, reduce the navigation.
Cons:
Information overload: Display two level information, both categories and items, on a single page may overwhelm users, leading to potential decision fatigue and confusion.
Limited category visibility: The horizontal layout displays fewer categories at once, requiring more user interactions to explore all options.
Design Decision
🏆
85% of our customer purchase only one product at a time
Helping them quickly overview and access their desired category with minimal steps is more important than switching between different categories.
Locating Item
Option A: We displayed the subcategories as sections, such as Crispy Chicken and Grilled Chicken. • Users can browse related items horizontally. • The biggest issue might be that users could easily overlook additional items if they scroll horizontally, due to the low contrast between the product tiles and the background.
Option A
(Subcategory as Section)
Option B: We displayed the subcategories as an achor navigation bar. • Users can jump to the desired subcategory directly, which reduces the time needed to locate items. • It also makes the entire menu easier to navigate and browse.
Option B (Subcategory Anchor Navigation) (Recommend)
Order Again Section
Option A: We displayed the "Order Again" sections at the top of the menu page so that users can see them at first glance. • This section occupies too much space on the regular menu. • Only two "Order Again" items are visible at a time.
Option A (Sub Category as Section)
Option B: We introduced tab navigation to display the order again section as an individual page. • It provides clean information in both "Menu" page and "Order Again" page , which increase the screen readability. • Four more "Order Again" items can be seen at a time.
Option B (Sub Category Anchor Navigation) (Recommend)
Usability Testing
Unmoderated research on userTesting.com
60 participants were invited. We presented two prototypes to two groups of participants and asked them to interact with the prototypes to complete a task.
Correct Rate:
It showed a higher correct rate for nearly all items compared to the original menu, with the overall average correct rate increasing from 66% to 89%.
Time:
The average time taken to locate an item was reduced by approximately 17 seconds, from 38 seconds in the original menu to 21 seconds in the test menu.
