Giant Eagle is an American supermarket chain with stores in Pennsylvania, Ohio, West Virginia, Indiana, and Maryland. GetGo is a convenience store chain owned and operated by Giant Eagle.During my work at Giant Eagle, as a UX Designer, I was assigned a pivotal task: to design an intuitive food finding process for GetGo's mobile food ordering app, which serves over 250 GetGo 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 outdate, users need take 5 to 7 steps to reach out the product detail page and add to order button, which challenge the users memories, leading to a cumbersome ordering process.
Problem 1
78% users drop off in the middle of flow, Which is heavily harmful to our order volume.
Problem 2
Usability Issue: User need to recall what they selected previously. For example, the add to order page did not includes 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 McDonald’s achieves the 'Add to Order' page within 2 clicks, and Taco Bell achieves the 'Add to Order' within 1 click, reaching the product details page within 2 clicks.
Menu Page: Designing for Everyone?
At very beginning, I thought nearly everyone could be a potential customer for a convenience store. This broad assumption, however, did not help me prioritizing my design. To address this, I took 3 steps to understand who are our target users?
Talk with Product Manager
Method 1
Interview Users
Method 2
Learn From Previous Report
Method 3
Common Challenge 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 may feel anxious if they can't quickly locatethe food they want at a gas station.
Design Goal
Create an intuitive menu, helping customers find what they’re looking for and cutting down on ordering hassles.
Users Goal
Quickly find desired food
Business Goal
Improve the Add to Order rate
Design Decision
Explore by Category
After analyzed 9 direct competitors and understand a clear categorization and labeling of food selecting is core, I came up with two ways that allow users to browse a broad food selection of food offering 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 desire category within minimum steps is much important than flipping around the different categories.
Locating Item
Option A, we showed the sub categories as sections, such as Crispy Chicken and Grilled Chicken. • Users browse related items horizontally. • The biggest problem might be users easily ignore there are more items available if they scroll horizontally because the low contrast between product tile and the background.
Option A
(Sub Category as Section)
Option B, We displayed the subcategories as a tab bar. • User jump to the desired sub Category directly. it reduces the time of locating items. • Easy to navigate and browse.
Option B (Sub Category Anchor Navigation) (Recommend)
Order Again Section
Option A, we added the order again sections in the top of the menu page. so user could see order again section at first glance. • Order again section occupies too much space of the regular menu. • Only 2 order again item can be seen at a time
Option A (Sub Category as Section)
Option B, introduced tab navigation to display the order again sectionclear and • • clean information in each page, and increase the readability of screen. • 4 more order again items can be seen at a time
Option B (Sub Category Anchor Navigation) (Recommend)
Usability Testing
Unmoderated research on usertesting.com
Invited 60 participates. We presented two prototypes to two groups of participants and asked them to interact with the prototypes in order to complete a task.
Correct Rate:
It showed a higher correct rate for nearly all items compared to the original menu, with 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.
