Project: Case Study
Project: Case Study
Role: UX/UI Designer, Researcher
Role: UX/UI Designer, Researcher
Tool: Figma, TypeForm
Tool: Figma, TypeForm
Time: ~80 hours/1 month
Time: ~80 hours/1 month
About Angeli’s Pizzeria
Angeli’s Pizzeria is a popular local restaurant franchise with 3 stores in Baltimore, MD known for its award-winning pizza.
With a strong online presence, the Angeli’s Pizzeria app plays a crucial role in capturing takeout orders and creating a mobile storefront for it’s new and loyal customers to conveniently order their favorite meals.
Angeli’s Pizzeria is a popular local restaurant franchise with 3 stores in Baltimore, MD known for its award-winning pizza.
With a strong online presence, the Angeli’s Pizzeria app plays a crucial role in capturing takeout orders and creating a mobile storefront for it’s new and loyal customers to conveniently order their favorite meals.
Angeli’s Pizzeria is a popular local restaurant franchise with 3 stores in Baltimore, MD known for its award-winning pizza.
With a strong online presence, the Angeli’s Pizzeria app plays a crucial role in capturing takeout orders and creating a mobile storefront for it’s new and loyal customers to conveniently order their favorite meals.
Problem Statement
Angeli’s currently manages takeout orders via third-party apps and and over the phone. Introducing its very own mobile app for both existing and future locations promises several benefits:
Angeli’s currently manages takeout orders via third-party apps and and over the phone. Introducing its very own mobile app for both existing and future locations promises several benefits:
Angeli’s currently manages takeout orders via third-party apps and and over the phone. Introducing its very own mobile app for both existing and future locations promises several benefits:
Reducing phone orders
Allowing staff to focus on front-house activities
Minimizing order errors
Creating a cohesive platform for customer engagement, promotions, loyalty programs, and gift cards
Enhancing the brand’s appeal to potential investors and franchisees by establishing a presence on app stores
Reducing phone orders
Allowing staff to focus on front-house activities
Minimizing order errors
Creating a cohesive platform for customer engagement, promotions, loyalty programs, and gift cards
Enhancing the brand’s appeal to potential investors and franchisees by establishing a presence on app stores
Reducing phone orders
Allowing staff to focus on front-house activities
Minimizing order errors
Creating a cohesive platform for customer engagement, promotions, loyalty programs, and gift cards
Enhancing the brand’s appeal to potential investors and franchisees by establishing a presence on app stores
Objectives
✦
Customized branding. Angeli's becomes a stand alone store instead of a stall inside a busy mall
Customized branding. Angeli's becomes a stand alone store instead of a stall inside a busy mall
Customized branding. Angeli's becomes a stand alone store instead of a stall inside a busy mall
✦
Cut down phone orders to free up staff
Cut down phone orders to free up staff
Cut down phone orders to free up staff
✦
Increase brand maturity to attract franchise investors
Increase brand maturity to attract franchise investors
Increase brand maturity to attract franchise investors
✦
Customized loyalty/rewards programs
Customized loyalty/rewards programs
Customized loyalty/rewards programs
Process
Discover
User Research
Competitive Analysis
User Interview
Define
Problem Statement
Persona
Ideate
User Flow
Brainstorming
Sketching
Design
Wireframe
Hi-Fi
Prototype
Research
Why is building a custom app worth it when most restaurants rely on aggregators such as Toast or UberEats?
✦
Deal and discount offers to drive awareness and sales on specific items. New product announcements. Seasonal specials
✦
Customized menu layout to better fit our items and categories
✦
Robust loyalty program and gift card management
✦
Angeli’s is aggressively expanding and it’s own app brings brand appeal for franchise investor meetings
Observations
89%
of interview participants use stand-alone restaurant apps
(i.e. Domino’s, Chic Fil A, Starbucks)
Most liked features in popular restaurant apps:
Skipping a phone call
Skipping a phone call
More customization of orders
More customization of orders
Gift cards
Gift cards
Order Tracking
Order Tracking
Deals
Deals
Points
Points
How often customers utilize deals on restaurant apps:
How often customers utilize deals on restaurant apps:
50%
Once every few months
25%
Weekly
25%
Monthly
Design Evolution
Deal Banner from a food delivery app that inspired the Deals section on the Angeli's app.
Order Status screen iteration shows the journey to a matured screen, showing crucial information and functionality users need.
Persona
View Full Persona
Irene Simpson
Irene represents the type of user who is loyal to local restaurants and wants to be rewarded for her regular patronage. She wants to be able to order take out easily and conveniently. Irene motivated by accruing loyalty points and receiving deals/discounts. She will spread the word to her circle upon finding good deals on even better food.
Irene represents the type of user who is loyal to local restaurants and wants to be rewarded for her regular patronage. She wants to be able to order take out easily and conveniently. Irene motivated by accruing loyalty points and receiving deals/discounts. She will spread the word to her circle upon finding good deals on even better food.
Goals
Have a go-to pizza shop/restaurant
Have a go-to pizza shop/restaurant
Earn deals/discounts for frequent visits
Earn deals/discounts for frequent visits
Being able to place and exactly customize orders how she wants it from the comfort of her couch
Being able to place and exactly customize orders how she wants it from the comfort of her couch
Painpoints
Tends not to be adventurous with different items due to unintuitive menus
Doesn’t like higher fees from delivery apps
Not knowing how and when to find deal/discounts
User Flow
Placing an Order
Placing an Order
From start to finish, placing an order of any complexity in the simplest manner is the most critical flow for a takeout app. Angeli’s Pizzeria aims to offer this simplicity while welcoming users to join, collect points, and earn generous deals as they build the perfect pizza to their liking.
From start to finish, placing an order of any complexity in the simplest manner is the most critical flow for a takeout app. Angeli’s Pizzeria aims to offer this simplicity while welcoming users to join, collect points, and earn generous deals as they build the perfect pizza to their liking.
Home Screen
Upon launching the app, users are faced with 3 methods of ordering.
Order Takeout - The meat and bones. From granular customization to applying points at checkout, the most common path of building and placing an order users will take. Since this app only offers takeout, the delivery notice banner directs users to the popular third-party delivery apps Angeli’s partners with for placing deliveries.
Last Order - If users recently ordered from the app, their last order is easily available to repeat. All items from past orders are grouped together by each order for easily duplicating, or users can pick and chose individual items they’ve built.
Deals/Discounts - From research, we know saving value is a high priority for our users. This is one of the key differentiators of Angeli’s from the competition. Through generous deals, customers can be influenced to try newer or undiscovered items, and enticed to order more as the discounts stack up as well as their loyalty points.
Upon launching the app, users are faced with 3 methods of ordering.
Order Takeout - The meat and bones. From granular customization to applying points at checkout, the most common path of building and placing an order users will take. Since this app only offers takeout, the delivery notice banner directs users to the popular third-party delivery apps Angeli’s partners with for placing deliveries.
Last Order - If users recently ordered from the app, their last order is easily available to repeat. All items from past orders are grouped together by each order for easily duplicating, or users can pick and chose individual items they’ve built.
Deals/Discounts - From research, we know saving value is a high priority for our users. This is one of the key differentiators of Angeli’s from the competition. Through generous deals, customers can be influenced to try newer or undiscovered items, and enticed to order more as the discounts stack up as well as their loyalty points.
Set Location & Start Ordering
Either by allowing device location access or picking a desired store, users can begin viewing the interactive menu, customize items and add items, then process to checkout. Works exactly as you’d expect!
Location Menu - Menus slightly differ per each store. This also allows displaying out of stock or exclusive items set by store managers instead of presenting the same static menu which would cause great constraints.
Checkout - After all items are added, users can tap on the takeout bag icon on the top right side of the screen. For ease of finding, the takeout bag notates the number of items in the bag within a red circle, making it nearly impossible to miss.
Either by allowing device location access or picking a desired store, users can begin viewing the interactive menu, customize items and add items, then process to checkout. Works exactly as you’d expect!
Location Menu - Menus slightly differ per each store. This also allows displaying out of stock or exclusive items set by store managers instead of presenting the same static menu which would cause great constraints.
Checkout - After all items are added, users can tap on the takeout bag icon on the top right side of the screen. For ease of finding, the takeout bag notates the number of items in the bag within a red circle, making it nearly impossible to miss.
Checkout
My Takeout Bag is the shopping cart. Users can make any last minute adjustments to their order, change the pickup time (default is ASAP), set tip amount, and add a gift card.
This checkout flow allows guest users to proceed easily without punishing or forcing them for not being logged in. Since the mandatory information to checkout as guest is all that’s needed to sign up, an easy Create Account checkbox gently reminds users to join right before placing orders.
Live Track Order Status - The useful order status screen customers always wanted. It only displays the important and bare minimum information needed to know; when to start heading out based on user location and store address, where to head out with easy map view and link to user’s preferred navigation app, and order receipt should users need it.
Should users Continue As Guest and check the Create Account box, a gentle notification appears on top of the screen stating an email verification has been sent to their email address to complete signing up.
My Takeout Bag is the shopping cart. Users can make any last minute adjustments to their order, change the pickup time (default is ASAP), set tip amount, and add a gift card.
This checkout flow allows guest users to proceed easily without punishing or forcing them for not being logged in. Since the mandatory information to checkout as guest is all that’s needed to sign up, an easy Create Account checkbox gently reminds users to join right before placing orders.
Live Track Order Status - The useful order status screen customers always wanted. It only displays the important and bare minimum information needed to know; when to start heading out based on user location and store address, where to head out with easy map view and link to user’s preferred navigation app, and order receipt should users need it.
Should users Continue As Guest and check the Create Account box, a gentle notification appears on top of the screen stating an email verification has been sent to their email address to complete signing up.
View Full User Flow
Design and Main Features
The Angeli’s Pizzeria mobile app has been designed with two priorities in mind: intuitive familiarity to other apps in the space, and the unique mom & pop feel the restaurant is cherished for, in that order. In the competitive, discount-heavy industry of food delivery/takeout, success is dependent upon bringing back carefully acquired users to the app, encouraging repeat transactions through effective user engagement and retention strategies.
The Angeli’s Pizzeria mobile app has been designed with two priorities in mind: intuitive familiarity to other apps in the space, and the unique mom & pop feel the restaurant is cherished for, in that order. In the competitive, discount-heavy industry of food delivery/takeout, success is dependent upon bringing back carefully acquired users to the app, encouraging repeat transactions through effective user engagement and retention strategies.
Home Screen
First thing to welcome users is a hero section that elegantly captures the brand logo, business slogan, a captivating pizza photograph, and the Call To Action (CTA).
First thing to welcome users is a hero section that elegantly captures the brand logo, business slogan, a captivating pizza photograph, and the Call To Action (CTA).
1
Order Takeout
The principal task users are expected to perform on the app. Dressed in the primary color of sharp red, this button is the CTA of this screen leading users to the interactive menu to begin ordering
Order Takeout
The principal task users are expected to perform on the app. Dressed in the primary color of sharp red, this button is the CTA of this screen leading users to the interactive menu to begin ordering
2
Last Order
Easily repeat previous orders. Tapping an order card brings up a bottom-sheet (shown below) to give users a chance to customize or drop individual items before adding to the takeout bag
Last Order
Easily repeat previous orders. Tapping an order card brings up a bottom-sheet (shown below) to give users a chance to customize or drop individual items before adding to the takeout bag
3
Deals
To make it standout more in the visual hierarchy, a dark near-black tone is used for the deal cards. The card layout was carefully crafted to present key information while eliciting the excitement of a great deal. This is one fo the core features to encourage customers to try new, different, or fan-favorite items
Deals
To make it standout more in the visual hierarchy, a dark near-black tone is used for the deal cards. The card layout was carefully crafted to present key information while eliciting the excitement of a great deal. This is one fo the core features to encourage customers to try new, different, or fan-favorite items
Last Order
Simple and quick. Users can customize, drop, or add all items to cart to repeat a previous order. Habitual users will love to efficiency of duplicating their favorite meals.
Simple and quick. Users can customize, drop, or add all items to cart to repeat a previous order. Habitual users will love to efficiency of duplicating their favorite meals.
1
Modify Item
Add, remove, or customize an item easily with intuitive buttons. The edit button will bring thee customization bottom-sheet for the specific item. To maximize space usage, topping layout is condensed compared to the checkout screen
Modify Item
Add, remove, or customize an item easily with intuitive buttons. The edit button will bring thee customization bottom-sheet for the specific item. To maximize space usage, topping layout is condensed compared to the checkout screen
Deal Overlay
Tapping on any deal card on the home screen brings the deal overlay. After usability testing, a UX decision to also navigate to the Order Takeout screen was made as participants stated the ordering flow felt broken when they still had to scroll up and tap Order Takeout after already starting to add items to their bags.
Tapping on any deal card on the home screen brings the deal overlay. After usability testing, a UX decision to also navigate to the Order Takeout screen was made as participants stated the ordering flow felt broken when they still had to scroll up and tap Order Takeout after already starting to add items to their bags.
1
Item & Deal Information
All key information laid out in a hierarchical way for users to quickly decide on the deal they’re interested
Item & Deal Information
All key information laid out in a hierarchical way for users to quickly decide on the deal they’re interested
2
Actions
These buttons bring the item to life. Set item count, customize further, and add to bag
Actions
These buttons bring the item to life. Set item count, customize further, and add to bag
Order Takeout - Menu
Full menu featuring some of the best Italian food in Baltimore. Laid out to effortlessly let customers order and discover what Angeli’s Pizzeria has to offer.
Full menu featuring some of the best Italian food in Baltimore. Laid out to effortlessly let customers order and discover what Angeli’s Pizzeria has to offer.
1
Pickup Time
Set to ASAP by default, tapping here allows users to schedule future orders. Once set, users can still change this in the Checkout screen
Pickup Time
Set to ASAP by default, tapping here allows users to schedule future orders. Once set, users can still change this in the Checkout screen
2
Store Hours
Shows today’s hours for set location. Tapping reveals hours for the rest of the week
Store Hours
Shows today’s hours for set location. Tapping reveals hours for the rest of the week
3
Menu Segment Control and Categories
Angeli’s Pizzeria has a wide selection, user research revealed that at the top level, customers prefer looking at the menu by food items first, then drinks. Tapping Drinks on the toggle switches the Menu categories and items under it to the beverages. The category items underneath is a horizontally scrollable list, grouping items for navigation
Menu Segment Control and Categories
Angeli’s Pizzeria has a wide selection, user research revealed that at the top level, customers prefer looking at the menu by food items first, then drinks. Tapping Drinks on the toggle switches the Menu categories and items under it to the beverages. The category items underneath is a horizontally scrollable list, grouping items for navigation
My Order
Time to review make final tweaks. This screen example is for a user not logged.
Time to review make final tweaks. This screen example is for a user not logged.
1
Items
Price and toppings breakdown for each time to inform users the exact cost of customized toppings, etc. Buttons to make last second adjustments
Items
Price and toppings breakdown for each time to inform users the exact cost of customized toppings, etc. Buttons to make last second adjustments
2
Gift Card
Angeli’s has lots of events and incentives that generously and successfully distributes an above average volume of gift cards. Therefore this field is highly visible for easily finding and utilizing
Gift Card
Angeli’s has lots of events and incentives that generously and successfully distributes an above average volume of gift cards. Therefore this field is highly visible for easily finding and utilizing
3
Tip
Standard tip options. The option amounts start at lower percentages due to takeout tips being less than delivery and dine-ins.
Tip
Standard tip options. The option amounts start at lower percentages due to takeout tips being less than delivery and dine-ins.
4
Finalize Order
This button group swiftly allows guest user (not logged in) to continue placing their order. Although final screen where payment and personal information is collected, users can check the Create Account box to join since all the necessary account information is already entered
Finalize Order
This button group swiftly allows guest user (not logged in) to continue placing their order. Although final screen where payment and personal information is collected, users can check the Create Account box to join since all the necessary account information is already entered
View Prototype
Design and Main Features
The Angeli’s Pizzeria mobile app has been designed with two priorities in mind: intuitive familiarity to other apps in the space, and the unique mom & pop feel the restaurant is cherished for, in that order. In the competitive, discount-heavy industry of food delivery/takeout, success is dependent upon bringing back carefully acquired users to the app, encouraging repeat transactions through effective user engagement and retention strategies.
Home Screen
First thing to welcome users is a hero section that elegantly captures the brand logo, business slogan, a captivating pizza photograph, and the Call To Action (CTA).
1
Order Takeout
The principal task users are expected to perform on the app. Dressed in the primary color of sharp red, this button is the CTA of this screen leading users to the interactive menu to begin ordering
2
Last Order
Easily repeat previous orders. Tapping an order card brings up a bottom-sheet (shown below) to give users a chance to customize or drop individual items before adding to the takeout bag
3
Deals
To make it standout more in the visual hierarchy, a dark near-black tone is used for the deal cards. The card layout was carefully crafted to present key information while eliciting the excitement of a great deal. This is one fo the core features to encourage customers to try new, different, or fan-favorite items
Last Order
Simple and quick. Users can customize, drop, or add all items to cart to repeat a previous order. Habitual users will love to efficiency of duplicating their favorite meals.
1
Modify Item
Add, remove, or customize an item easily with intuitive buttons. The edit button will bring thee customization bottom-sheet for the specific item. To maximize space usage, topping layout is condensed compared to the checkout screen
Deal Overlay
Tapping on any deal card on the home screen brings the deal overlay. After usability testing, a UX decision to also navigate to the Order Takeout screen was made as participants stated the ordering flow felt broken when they still had to scroll up and tap Order Takeout after already starting to add items to their bags.
1
Item & Deal Information
All key information laid out in a hierarchical way for users to quickly decide on the deal they’re interested
2
Actions
These buttons bring the item to life. Set item count, customize further, and add to bag
Order Takeout - Menu
Full menu featuring some of the best Italian food in Baltimore. Laid out to effortlessly let customers order and discover what Angeli’s Pizzeria has to offer.
1
Pickup Time
Set to ASAP by default, tapping here allows users to schedule future orders. Once set, users can still change this in the Checkout screen
2
Store Hours
Shows today’s hours for set location. Tapping reveals hours for the rest of the week
3
Menu Segment Control and Categories
Angeli’s Pizzeria has a wide selection, user research revealed that at the top level, customers prefer looking at the menu by food items first, then drinks. Tapping Drinks on the toggle switches the Menu categories and items under it to the beverages. The category items underneath is a horizontally scrollable list, grouping items for navigation
My Order
Time to review make final tweaks. This screen example is for a user not logged.
1
Items
Price and toppings breakdown for each time to inform users the exact cost of customized toppings, etc. Buttons to make last second adjustments
2
Gift Card
Angeli’s has lots of events and incentives that generously and successfully distributes an above average volume of gift cards. Therefore this field is highly visible for easily finding and utilizing
3
Tip
Standard tip options. The option amounts start at lower percentages due to takeout tips being less than delivery and dine-ins.
4
Finalize Order
This button group swiftly allows guest user (not logged in) to continue placing their order. Although final screen where payment and personal information is collected, users can check the Create Account box to join since all the necessary account information is already entered
View Prototype
Usability Testing
After a moderated usability test and iterations, the Angeli’s Pizzeria app crossed the MVP line. Below are some key lessons learned throughout the lifecycle of this case study.
After a moderated usability test and iterations, the Angeli’s Pizzeria app crossed the MVP line. Below are some key lessons learned throughout the lifecycle of this case study.
Business
Most customers are only willing change how they order takeout and download a new app if there’s a financial incentive such as deals and discounts
The ROI on a custom app makes more sense for an expanding franchise with a growing number of regulars, as is the case with Angeli’s
Most customers are only willing change how they order takeout and download a new app if there’s a financial incentive such as deals and discounts
The ROI on a custom app makes more sense for an expanding franchise with a growing number of regulars, as is the case with Angeli’s
UI
Animations for favoriting an item, the welcome deal confetti, and order confirmation were praised
The takeout bag used instead of the traditional shopping cart was received well without any confusions
New (latest) half/half topping design for each topping performed better than the previous method of navigating to a new page for customizing each half of a pie
Animations for favoriting an item, the welcome deal confetti, and order confirmation were praised
The takeout bag used instead of the traditional shopping cart was received well without any confusions
New (latest) half/half topping design for each topping performed better than the previous method of navigating to a new page for customizing each half of a pie
UX
Users prefer a continuous ordering experience by automatically getting to the Order Takeout screen after adding a Deal item to cart, instead of scrolling back up and getting there on the Home screen
Grouping all items together on a Last Order performed better over individually laying previously ordered items. This allowed habitual users to quickly add entire last order to cart
New (latest) half/half topping design for each topping performed better than the previous method of navigating to a new page for customizing each half of a pie
Users enjoyed Angeli’s familiarity to other food/restaurant apps they’ve used, and stated it made testing the prototype a breeze
Users prefer a continuous ordering experience by automatically getting to the Order Takeout screen after adding a Deal item to cart, instead of scrolling back up and getting there on the Home screen
Grouping all items together on a Last Order performed better over individually laying previously ordered items. This allowed habitual users to quickly add entire last order to cart
New (latest) half/half topping design for each topping performed better than the previous method of navigating to a new page for customizing each half of a pie
Users enjoyed Angeli’s familiarity to other food/restaurant apps they’ve used, and stated it made testing the prototype a breeze
Conclusion
The Angeli’s Pizzeria app has been presented to all 3 location owners and received positively. The opportunity to offer branch specific deals, limited offers, and a loyalty program to broaden and retain their customers brings great appeal to the owners.
As the franchise grows, bringing this proof-of-concept to life will be revisited when the time is right.
The Angeli’s Pizzeria app has been presented to all 3 location owners and received positively. The opportunity to offer branch specific deals, limited offers, and a loyalty program to broaden and retain their customers brings great appeal to the owners.
As the franchise grows, bringing this proof-of-concept to life will be revisited when the time is right.