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
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
1
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.
2
CUSTOMIZATION
Many theme park mobile food ordering competitors do not offer much item customization.
3
NAVIGATION
Many users get lost when trying to find the restaurant they ordered from to pick up their food.
4
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