top of page

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.


Primary UX designer, RBS, Ahold Delhaize


2 Designers, 2 Product Managers and 12+ Engineers & QA Team


Q4 2020 & Q1 2021


Figma,, Teams, Zoom

Project Overview

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


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.

How might we?

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.

Screen Shot 2020-12-02 at 2.51.22 PM.png

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
for their menu

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
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.

Nice Nurse

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


Spend more time with her family


To order and pick up meals quickly without any hassle


Enjoy meals


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.


Loyalty card


Shopping Cart









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.

Final user flow.png
Hisso Sushi user flow.png
Hisso Sushi IA.png
User Flows
Lo-Fi Wireframes
Screen Shot 2021-01-20 at 2.19.57 PM.png

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. 

Screen Shot 2020-12-09 at 1.37.59 AM.png
Screen Shot 2020-12-01 at 4.36.38 PM.png

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.

Screen Shot 2020-11-23 at 8.30.58 PM.png

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.







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


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 -



boost in customer engagement because of constant iteration and usability tests 



number of clicks reduced while placing order to build your own salad from



of people were able to add another item from Hissho sushi with the new notification deisgn



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

1 (1).jpg
2 (1).jpg
3 (1).jpg
Hi-Fi Prototype

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

Welcome Screen

main menu (1).jpg

Giant Kitchen at the Riverwalk Main Menu

Saladworks Drinks.jpg
Signature bread 13.jpg

Individual item in the sub menu

Customize and build your own screens

main menu2.jpg

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.

bottom of page