LIZZY LAND

Mobile Food Ordering App

Figma Prototype Link

LIZZY LAND MOBILE FOOD ORDERING APP

Designed and produced by Liz Nadolny.

MY ROLE:

UX Designer from conception to completion.

MY RESPONSIBILITIES:

User Research: Building personas, journey maps, conducting competitive audits and multiple usability studies

Wireframing: Both paper and digital

Prototyping: Low and high fidelity -- iterating on designs from usability study findings

PROJECT OVERVIEW

THE PRODUCT

Lizzy Land’s Thrilling Snacks is a mobile food ordering app for the fictional theme park of Lizzy Land.

PROJECT DURATION

June-September 2023

LINK TO PROTOTYPE

FIGMA PROTOTYPE LINK

THE PROBLEM

New customers often get lost during their first visit to the park which can make it hard for them to locate the restaurant they're ordering from via an app.
Customers also prefer having more food item pictures, descriptions and customization options.

THE GOAL

Design a mobile food ordering app which provides in-time navigation to pick up order.
Design an app that makes the food visually appealing and descriptive of what their food will look like with additional options to customize their order.

COMPETITIVE AUDIT

UNDERSTANDING THE USER

USER RESEARCH: PAIN POINTS

FOOD PICS

Mobile food ordering processes tend to be unflattering and unappealing. Most customers would like to see more flattering pictures and more item descriptions.

CUSTOMIZATION

Many theme park mobile food ordering competitors do not offer much item customization.

NAVIGATION

Many users get lost when trying to find the restaurant they ordered from to pick up their food.

STRAIGHTFORWARD

Many customers want a simple process for ordering straightforward beverages ahead of time.

PERSONAS

&

USER JOURNEY MAP

PERSONAS: DUKE & DAVIE

USER JOURNEY MAP: DAVIE

STARTING THE DESIGN

DIGITAL WIREFRAMES

Home Screen

The original home screen wireframe was meant to bring major park news to light and after further testing the layout was completely changed to fit more of the app’s functionality strengths.

Low Fidelity Wireframe: Map

Low Fidelity Wireframe: Party Geo-Map

Many people love going to theme parks in large groups but coordinating all of your party members can be tricky. That is why I designed the Lizzy Land map to include the ability to share your geo tagged location with other members of your party so you can easily reconvene.

Digital Wireframe: Restaurant List

I was initially going to create more than 4 restaurants but ended up creating full menu and checkout screens for 2 restaurants. I maxed out the number of variables Figma allows for in the beer garden menu prototype and therefore halted designing more restaurant menus.

Digital Wireframe: Belly Burger Restaurant Menu

The goal for this section was to make a clean and clear restaurant menu with pictures that represent the food. I added interaction design to the menu type bubbles up top so when you click on them the screen scrolls to the section you clicked on.

Digital Wireframe: Belly Burger Menu Items

The idea behind the Belly Burger restaurant menu was to incorporate more food descriptions and item customization features. Since this is more of a sit-down restaurant the ordering style is more involved than the Beer Garden menu.

Digital Wireframe: Beer Garden Menu

In response to the second user study, I wanted to create another menu that would incorporate a more immersive add-to-cart experience. I found a few resources online and incorporated a fully functional add-to cart system.

Digital Wireframe: Beer Garden Pre-Checkout Order Summary

The pre-checkout order summary screen is designed to be informative and interactive. Item bubbles appear and disappear as the user selects to have the item in their cart.

Digital Wireframe: Beer Garden Order Confirmation

The Beer Garden order confirmation screen is structured to provide as seamless order pickup as possible:

On screen walking directions to vendor
Item summary tiles to provide vendor with eye-catching info to make pickup process faster.

USABILITY STUDIES

The usability study had each participant complete the user flow of placing an order at Belly Burger. After the first usability study results were analyzed, the Beer Garden menu was introduced to improve on where the Belly Burger design fell short.

Round 1 Findings:

Users want more food customization options.
Users want add to cart feature.
Users want allergen information.

Round 2 Findings:

Users wanted more interactivity in cart functionality.
Users wanted more automation.
Users wanted a more coherent home screen.

REFINING THE DESIGN

MOCKUPS

Home Screen Mockups

The initial home screen mockup did not give the overall sense of connected-ness to the park. So I re-imagined the design to focus more on the app’s strengths in a cleaner looking way.

Before usability study

After usability study

The primary goal of this app is to help users feel connected to and interact more with Lizzy Land. Therefore, I decided to put all the main features of the app right on the home screen. There were a few iterations prior to landing on this design.

Home Screen Before Usability Study

Season pass memberships added to promote revenue and loyalty for park. Season pass later removed to promote more park interactivity.

Home Screen After Usability Study

Added small map on home screen helps users feel more aware of where attractions are.
Put food ordering front and center since it is the primary function of the app.

HIGH-FIDELITY MOCKUPS

BELLY BURGER RESTAURANT MENU

Home Screen

Resaurant List

Belly Burger Menu

Menu Item

Pre-Checkout Summary

Card Info

Order Confirmation

Walking Directions

USER FLOW

BEER GARDEN MENU

Beer Garden Menu

Pre-Checkout Order Summary

Card Info

Order Confirmation

Order confirmation page provides baristas with quick look at what was ordered for easy confirmation on their end.

ACCESSIBILITY CONSIDERATIONS

1

The animations for the movement between sections of the app are designed to represent a directional movement.

For example when you order from belly burger each page moves from left to right until you reach the end screen and go back to the home screen.

2

The map is designed to be as accessible as possible with the added geo-tagging features.

•Find your restaurant

•Find your friends

•Recognize nearby landmarks.

3

All of the major text is made larger to make text more readable for those with vision impairment.

TAKEAWAYS

Impact

I am most proud of how the Beer Garden menu turned out. I was able to tie the items ordered into the order confirmation menu which made the pickup process much easier. I have not been to a theme park that includes geo-tagging features for their navigation and I am proud of the designs I made to implement this feature that improves the app’s overall accessibility.

What I Learned

I learned how to put IDEO’s design principals into designing a full fledged app focused around enhancing user experiences. I learned how to use Figma.

NEXT STEPS

1

I would like to make a few more restaurant options but am maxed out on Figma variables thus limiting menu items.

2

I would like to add a filter system for filtering out potential food allergies.

Adding this feature would allow patrons to avoid items they are allergic to which could potentially ruin their day.

3

I would also like to add Apple Pay screens which would allow users to have faster and more convenient checkout compared to manually entering card information.

LETS CONNECT!

Liz Nadolny

(209)559-9155

elizabeth.nadolny@icloud.com

linkedin.com/in/liznadolny

Page updated

Google Sites

Report abuse