top of page
UX Design | App
Project Overview
Bona Casa Mobile App
CLIENT: Bona Casa Italian Restaurant
GOOGLE UX DESIGN PROFESSIONAL CERTIFICATE PROJECT:
Design a mobile ordering app for a restaurant in your hometown using Figma.
PROCESS:
Empathize, Define, Ideate, Build Wireframes and Low-Fidelity Prototypes. Conduct UX Research and Test early concepts. Create High-Fidelity designs and prototypes.
ROLE
Lead UX Researcher & Lead UX Designer
TEAM
Solo project
DESIGN TOOL
DURATION
Figma
8 weeks, April + May 2023
THE TARGET AUDIENCE
Local residents of Cumberland, WI who regularly (at least once per month) order from Bona Casa. Study includes male & female customers, ages 16-75 (as the City has an aging population), who are comfortable using smartphones. Also includes users with special dietary needs (allergies, intolerances, etc.).
THE BACKGROUND
After a thorough competitive audit, I discovered that only 1 other locally-owned business (a cafe) in the small town of Cumberland, WI has a digital ordering experience; all other establishments require ordering in person or via phone. Cafe customers may order pick-up via Google Ordering only; the cafe does not have a dedicated mobile app. Pick-up orders can be placed for ASAP or scheduled for a future time.
Bona Casa is an Italian family restaurant founded by Anna & Tom Ricci in 1957, and owned and operated by a different family for the past 40 years. Anna & Tom's great-granddaughter and her husband recently purchased the restaurant back into the Ricci family. They want to be the first small business in town to modernize the ordering experience with a dedicated mobile app that supports scheduled ordering for customers on-the-go.
Local tech-savvy residents expressed their desire for the convenience of ordering without having to pick up the phone, while also having transparency on their pick-up time.
THE CHALLENGE
Design a dedicated mobile ordering app that meets all the needs of both the business and its customers.
Initial Pain Points & the
Digital Wireframes That Solve Them
1
Password - Fingerprint
User does not want to have to remember a password every time they want to place an order.
2
Food Allergen Visibility
User wants to easily and quickly be able to tell which menu items are safe for them to eat based on their food allergies/intolerances.
3
Pick-up Time Transparency
User needs to know what time the order will be ready in order to maximize time away from the office / family. Digital ordering doesn’t always offer this transparency.
4
Payment - ApplePay
User wants to be able to use a secure digital payment method like ApplePay or Paypal. Does not want to type in a full Credit Card number.
Design System
Brand Palette:
Select Components:
Typography:
Design Evolutions
Customers cannot find food allergen information quickly enough, which slows down the ordering process.
OBSERVATIONS
* I observed a retiree-aged customer tap on the "GF" symbol in the bottom 'key'. Despite him not voicing his frustration, I could sense that he wanted his action to filter all items on the menu to show him gluten-free menu items only.
* Customers also did not notice the "Jump to Category" dropdown functionality, designed to save them time by jumping straight to their desired food category, rather than scrolling through the entire menu to reach their desired menu section.
SOLUTIONS
→ I converted dietary restriction tags into a clickable filter that allows customers to control menu items shown based upon their specific dietary restriction needs. I also moved the filter to the top of the app screen, which is a more intuitive location for a top-down filter.
→ Rather than labeling the dropdown menu outside the box, I reduced screen clutter by adding a concise label on the box itself.
SOLUTIONS
→ Based on the fact American customers read "left to right", I relocated the "Jump to Category" dropdown to the left side of the screen. This encourages users to click the feature since it is immediately visible.
→ I significantly lightened the color scheme of the "Filter by" checkbox feature, and added Bona Casa's signature red font to make the functionality immediately stand out.
OBSERVATIONS
* 100% of customers did not immediately notice the "Filter by" functionality or "Jump to Category" dropdown; they were more drawn to the food photos. Since both of these features are designed to aid customers in finding relevant menu items more quickly, it is a high priority that they see them right away.
* Once customers realized the existence of the "Filter by" checkbox menu, they were happy with its location, as they do not want to scroll all the way to the bottom of the food menu to find the filter. However, it was concluded they did not notice it mostly because of its dark appearance that blends into the header bar.
No tipping transparency.
OBSERVATIONS
* Customers love the tip reminder during the checkout process, but it's also very important to them that the actual dollar amount of each tip percentage is also displayed. This allows them to more easily decide which Tip choice is best for their budget.
SOLUTIONS
→ Transparent tip totals were added for every tip percentage to improve tip transparency.
Customers unable to add multiples of same item to cart.
OBSERVATIONS
* Customers were disappointed they did not have the ability to add multiples of the same item with just one click. Instead, they were forced to add each item to their cart manually, one at a time. This significantly slowed their ordering process, which is never beneficial to the business.
SOLUTIONS
→ I added a +/- Quantity Picker to both the Item pop-up card (above) and the customer's Cart (below). The decision to add this feature in both places allows customers to add multiple items to their orders upfront, as well as allowing last-minute additions to their orders just before finalizing their orders in case they decide they need more food.
Final Designs
CONSIDERATIONS & RECOMMENDATIONS
1
MEMORY
For users who may have issues with remembering passwords, the app offers biometric login, for a safe and secure login and checkout process.
2
FOOD ALLERGENS
For users with food allergens or dietary restrictions, the app NOW offers an easy menu-filtration system that allows the user to check all the boxes matching their dietary restrictions, and the menu will show them only items that are safe to eat.
3
VISUAL IMPAIRMENT
For users with visual impairment, app color palette has been verified via accessibility standards. I also increased the smallest font sizes, and enlarged all action buttons so users have the best chance of accomplishing their task without assistance.
ACCESSIBILITY CONSIDERATIONS
RECOMMENDATIONS FOR ADDITIONAL RESEARCH & IMPROVEMENTS
Confirm the updates made in Phase 3 resolved all pain points. Keep in mind, inexperienced app users (like the retiree generation) may still find more problems with the new designs that will need to be dialed in further.. Include a participant that specifically uses assistive technology.
1
Test Phase 3 fixes & Address more Accessibility Options
Biometric Fingerprint Technology is already implemented in the App, but our 2 retiree participants had difficulty understanding Fingerprint technology since they have never used it on their smartphones. They both, however, use Facial Recognition Technology and would prefer the App let them login with their face instead.
2
Consider Facial Recognition Technology
Some customers may not want to create an account with the restaurant, in order to keep their email address and credit card information more private. A “checkout as a guest” feature may be considered if the business approves.
3
Consider a "check out as guest" feature
Some users assumed only the most popular desserts appeared in the “Would you like to add a dessert?” page of the checkout user-flow. Whereas they would want to know they are looking at the full dessert menu and not missing out on any possibilities.
4
Possibly Reimagine Dessert Add-ons Screen
CONCLUSIONS & TAKEAWAYS
Unanimous, enthusiastic, & positive user feedback on food allergen filter!
SUS Results:
A 10-question System Usability Study was administered after each phase of studies. Users were asked to rate their answers on a 5-point scale. SUS Results show clear increase in user satisfaction with the Bona Casa App (+0.275 point average).
Impact:
Not only do Bona Casa customers now have an easy way to place a Pick-up order on-the-go for a specific Date & Time, Bona Casa as a restaurant now has the benefit of reaching more on-the-go customers and the potential to increase their revenue by making ordering from their new app friendly to busy community members.
What I learned
I received my most powerful insights from the retiree generation. Being more tech-savvy professional myself, it’s sometimes hard to imagine some people not knowing what [I would consider] common icons / actions / user-flows do. It was refreshing to hear insights from retirees that I would have never considered on my own.
This is a prime example of why User Studies with a diverse group of users is so vital to the design of a product that is human-centered and usable for everyone!
Additional supporting links:
bottom of page