A web app for restaurant owners to create branded digital menus for customers to view and order items right from their table.
CASE STUDY
Overview
PROBLEM
Restaurant owners don’t have the right tools to provide a touchless menu for their customers. The customer experience of touchless menus are often unintuitive and add little to the overall experience of the restaurant.
BUSINESS GOAL
Allow restaurants seamlessly transition to mobile ordering.
PRODUCT GOAL
Make the experience of viewing and ordering from a touchless menu enjoyable and intuitive.
SOLUTION
A web app for restaurant owners to create branded digital menus for customers to view and order items right from their table.
Want to make menus with offerings that vary throughout the week or throughout different seasons
Busy running their business, typically short on time
Some may have business partners or chefs that collaborate on their menus
Main priority is customer satisfaction
PAIN POINTS
Complicated tools when creating a menu
Overwhelming options when managing special tasks such as seasonal menus, sales, and changing items
Limited ways to customize menus to match a restaurant’s unique personality
Owners typically do not have a designated designer to create and edit menus whenever there are updates
Customers
user snapshot
Spending ranges from being cost conscious to occasionally splurging
Tech savviness ranges from novice to proficient
Type of eater ranges from picky eaters to ordering for picky kids to ordering for dietary restrictions
Ordering in groups, couples, and individuals
PAIN POINTS
While ordering in a group, they have to memorize multiple items they want to order, which could lead to flipping back and forth
Want to be confident that they’ll like their order and don’t always know what the dish looks like
Long wait times between getting seated, ordering, and eating
Competitive Analysis
Typical solutions for restaurant owners are to design their own PDF menus or to build their own webpage for users to scan to open.
Solution
My Menu Maker is a web app for restaurant owners to create branded digital menus for customers to view and order items right from their table.
OVERVIEW
Restaurant owners need it to be customizable to their brand while still being simple to edit.
Customers need it to be accessible and intuitive to navigate.
LIMITATIONS
Must be a mobile solution
Must be systematic to ensure scalability and flexibility for broad restaurant owner audience
Accessibility standards are top of mind for a wide customer audience
Primary Features
RESTAURANT OWNER NEEDS
Ability to create and publish menus
Highly customizable brand styles
Display items with photos and descriptions
Add a variety of menus and sections
customer needs
QR code scan for easy accessibility
View photos and descriptions of items
Easily add items to their order while browsing
Easily view order while browsing
Ability to split order for groups
Add notes for the kitchen to an order
User Flow
ADDING ITEMS + MAKING AN ORDER
OVERVIEW
Restaurant owners need it to be customizable to their brand while still being simple to edit. Customers need it to be accessible and intuitive to navigate.
From landing page to submenus, owners can give their customers a personalized experience that feels exclusive to their restaurant. MMM focuses on using simple building elements to allow owners to easily customize to their brand.
By scanning the QR code provided by the restaurant, customers open straight to the web app.
Placing an Order
Customers can click to see image previews of items and add the desired amount to their order.
Checkout
My Menu Maker caters to every unique dining experience. From landing page to submenus, owners can give their customers a personalized experience that feels exclusive to their restaurant.
Design Library
BUILT IN FIGMA
Designed on a 4pt grid system, the design library consisted of separate styles for each restaurant brand. This allows the owners to use a custom font, color palette, logo, and button styles.
One item component was used for showing all menu items. By utilizing Figma's component and variant settings, we were able to easily change thumbnail layouts, item names, descriptions, and prices.
Conclusion
KEY TAKEAWAY
The key to designing a template that needs to work for a variety of brands is starting with simple elements and building off of them.
Learning Point: Designing a Flexible Template
One challenge I faced throughout the project was designing a layout that would easily adapt to different styles without feeling like a template. Restaurant owners needed to customize the look and feel to fit their brands but the settings needed to be simple and easy to edit. By testing configurations within Figma components and working with responsive layouts, I was able to design elements as simple as possible while keeping in mind how they would be customized.
Learning Point: Creating an Efficient Figma Component Library
By creating a comprehensive library of components in Figma, I was able to easily reuse and edit elements as I was building the design. This was critical for managing buttons, icons, and cards that fit each restaurant’s style guide.
