Giant Kitchen Ordering
As the primary product designer for the Kisok app redesign at Giant Food Company's flagship store in Philadelphia, I spearheaded the entire design and collaborated with others to enhance the kiosk ordering system.
My responsibilities included reworking the IA to accommodate new food stations and their menu items. I also improved the app's visuals by incorporating the rebranded Giant colors, ensuring better usability, and conducting comprehensive testing.
My close collaboration with the product manager, client success manager, and engineering team resulted in a seamless development process, ultimately improving the app for customers.
The successful redesign emphasized the significance of prioritizing user needs, leading to increased customer satisfaction and a more enjoyable app experience.
Role
Primary UX designer, RBS, Ahold Delhaize
Team
2 Designers, 2 Product Managers and 12+ Engineers & QA Team
Timeline
Q4 2020 & Q1 2021
Tools
Figma, Usertesting.com, Teams, Zoom
Streamline meal ordering while grocery shopping to save valuable time
Design Challenge
Client Research has shown that it's easy to forget about the food we buy. We put it in different places like pantries and fridges, and then we can't find it later. As a result, we end up throwing away the food we forget about.
Experience the Giant Kitchen Kiosk app in the food court, revolutionizing your grocery buying with easy multi-station ordering
Solution
Customer spots a kiosk during rush hour in the Giant stores
To view the menu and start ordering, customer needs to scan their loyalty card or enter a phone number by touching anywhere on the screen. The phone number will be useful to contact the customer after the order has been placed. The customer has an option to skip entering the phone number as well.
Customer can view the main menu and see that the kitchen offers
After scanning their loyalty card, customers will be able to see The kitchen at the Riverwalk main menu. Customers can go to each station and browse through the sub-menu for each station. The main menu gives customers an overview of the cuisine and meal options at the Kitchen.
Customer can customize and build their own meals from the menu
Customers have an option to customize meals or build their own meals. Build your own is different for each station according to the menu. Build your own will give customers the flexibility to pick their ingredients for their meals. The flow for the BYO remains the same for every station.
Customer can review the cart, submit order, pay, and checkout
After selecting and customizing their meals, customers can add items to the cart and review the cart. The cart will allow customers to edit, remove, and build their selected meals if needed. After reviewing the cart, the customer can submit an order and pay via the SCAN IT app or pay on the counter.
02 / Market Research
What could we learn from other players?
When starting to think about Kisok app design, I remembered Jakob's law - users prefer products that are in line with what they are used to. With that, I identified a few products that were already exemplifying aspects of my design goals really well to see what I could learn from them.
Market Research Results
After doing intense research on how other players offer the service in the market, I synthesis the data to map opportunities that will help to create a unique experience for the Kiosk app in the Giant stores.
3 / 5
Offer left navigation
sidebar for their menu
view
4 / 5
Have the option to "eat in or carry out” for their users
3 / 5
Displays modal for
customization of meal
2 / 5
Have the option to customize their
meals when user selects a meal
3 / 5
Offers Breadcrumb for order tracking -
“Review order-Name-Pay”
4 / 5
Only accepts credit /
Debit card as payment method
4 / 5
Display large images of their meals on
the menu to attract attention
1 / 5
Have an option to Build your own meal
03 / Empathizing with users
Who is our customer?
After familiarizing myself with the existing application and market research, I got the clarity of the user group and needs. I identified my persona and listed their goals and frustration to make sure I understand my customer problem.
Martha lives in Philadelphia with her two kids and husband, where she works as a nurse in the hospital and her husband works at the grocery store. Both parents have a busy schedule due to the nature of the work. Despite their busy schedule, the family loves to sit down together and have their meals. The family loves cooked meals from the Giant company stores.
Martha Jones
Goals
Spend more time with her family
To order and pick up meals quickly without any hassle
Enjoy meals
Frustrations
Hectic nurse life
A lot of time is spent on preparing meals
Long line for placing orders
04 / Setting goals
MVP Features
The kiosk needs to show the kitchen menu for five stations (MTO Sandwiches, Saladworks, Hissho Sushi, Mission Taqueria & Flatbreads). Based on the new requirements for the application, I defined my MVP to keep on track and make sure I solve the problem.
Scan
Loyalty card
Manage
Shopping Cart
Browse
Menu
Submit
Order
Customize
Meals
Electronic
Payments
05 / What's the flow?
User Flows
After setting goals with MVP features, I developed user flows and use cases to understand the flow. I developed user flow for each station Giant kitchen has to offer. User flows helped to design the wireframes and screen flow for the application. Along with the user flows, I developed information architecture for the individual station. Information architecture helped the dev team to develop the backend database for the application.
06 / Trying out ideas
Design Opportunities
At this point, I started sketching a potential solution based on the designed user flows. I tried multiple versions of redesigning the application. I decided to keep the structure of the UI same and work about it.
Option 1 -
Menu Sidebar Navigation + Breadcrumbs
Most users didn't prefer this option as they felt there was a way too many options for the user to navigate.
Option 2 -
Sidebar Navigation
Most users preferred #2 because it was more focused to a particular station and category.
After having some initial ideas, I designed 3 options for the BYO flow.
07 / Rapid Iterations
Low-Fidelity Wireframes
After finalizing the navigation, I worked on the user flows for other stations and low-fi wireframes for all the stations. The idea was to develop all the wireframes and conduct user testing to make sure the navigation is working well.
08 / User Testing
Early user feedback is important
After designing the flows and low-fi wireframes, I conducted user testing. The core purpose of user testing was to ensure that the flow is working well and the application is intuitive for the customer. User feedback was important as I could identify some red flags and had time to rectify before handing off the designs for development.
I performed usability tests with 5 representative users. Each person was given 8 tasks to complete. After this, they were asked to complete a System Usability Scale (SUS) questionnaire.
TASK
USER 1
USER 2
USER 3
USER 4
USER 5
Scan Loyalty card /
Enter Phone Number
View and browse through main menu
Build your own Salad from Saladoworks
Add item to cart
and review order
Add another item from Hissho Sushi
Review your cart and submit order
Checkout and pickup your meal
Pay via SCAN IT
app / Electronic pay
Asking how to select the next category
Not clear with the flow of BYO
Looking for add to cart button
Not sure if Item added to the cart
Wants notification if item added to cart
SCAN IT?
09 / Mapping success
Testing & Iteraction Impact
The iteration of designs after the testing helped in the refinement of the user and screen flow. The user testing results helped in making the application as intuitive as possible. Some of the key improved matric are the following -
70%
boost in customer engagement because of constant iteration and usability tests
03
number of clicks reduced while placing order to build your own salad from
90%
of people were able to add another item from Hissho sushi with the new notification deisgn
90%
of users prefer the new and refined version of the app after the testing
Before creating high fidelity prototypes, I wanted to develop a visual language to keep things consistent across all the elements in the product. I used the Giant color palate and style guide to develop design elements for the Kisok application. Consistent style guide for the Giant applications.
10 / Style Guides
Creating a design language & system
.jpg)
.jpg)
.jpg)
Using the visual design system, I created a high-fidelity prototype as shown below. I designed the screen with all the micro-interactions. The clickable prototype helped the developers to understand the micro-interactions in the application during the development phase.
11 / Delivering assets
Dev Hand-Off Hi-Fidelity Prototype
Welcome Screen
.jpg)
Giant Kitchen at the Riverwalk Main Menu
Individual item in the sub menu
Customize and build your own screens
Sub Menu
Cart screen
What I learned
Convey complex ideas: The scope of this project was working with multiple different teams in different timezones. There was a lot of vagueness, strategic considerations, and possibilities for the redesign of this application. This challenged me to learn how to communicate complex ideas into easily understandable concepts and design decisions.
Projects can get messy: Lots of changes can make a project very messy. Each change should be paired with a metric we intend to improve. I learned to organize files for dev handoff and create design systems so that devs have easy access to assets and know exactly what modifications they have to make.
Be precise with your designs: Be cautious of padding and margins in the designs. Developers won't know what values to set if you don't. I learned to take the guesswork out of it and make the designs pixel perfect.