Mother Phở
Online Menu and Website Design
Overview
The global COVID-19 pandemic wreaked havoc on businesses worldwide, and my restaurant was no exception. In response to the crisis, I made the bold decision to transition from traditional paper menus to an online PDF menu. To ensure a seamless customer experience, I also designed a new website that worked in tandem with the online menu to address the unique challenges of the pandemic while maintaining the restaurant's high standards.
Role
Owner / Product Designer
Tools
Adobe Illustrator, Figma, Wix
Website
www.motherphoathensga.com
Problem
As the COVID-19 pandemic rapidly spread, ensuring the health and safety of both my customers and employees became my top priority. However, traditional paper menus posed a significant risk as they could quickly become contaminated and potentially spread the virus.
Solution
A scannable QR Code that directs to the online PDF menu was designed with the customers in mind, ensuring that they can seamlessly navigate through menu items and find what they want to eat with ease, organized in logical categories. The accompanying restaurant website is thoughtfully designed, presenting all necessary information in a simple and straightforward manner.
Contactless and Organized
The PDF menu was organized by dish type and displayed a variety of different images so customers could easily identify the items.
Simple and Intuitive
Customers could easily find all pertaining information about the restaurant on the website including menu, phone number, and delivery.
Process
With the combination of conducting user research, defining menu structure, wireframes, visual elements, and testing, I created logical products for both my employees and customers.
User Research
I conducted user interviews on 3 employees and 5 customers of the restaurant to uncover valuable insights that could improve on the old menu when switching to an online menu.
User Interview Goals
-
Explore opportunities to enhance customers' dining experience
-
Identifying any missing or unnecessary information on the menu
Key Finding from User Interviews
-
Customers may not understand the menu items even with descriptions
-
High-quality photos can help customers visualize the food and order easily
Define Menu Structure
The menu structure was built by categorizing items in a logical and easy-to-understand manner while also considering factors such as popular dishes and dietary restrictions.
Create Wireframes
Using the defined menu structure, wireframes were created to show the layout and organization of the menu.
Design Visual Elements
The visual elements of the menu were designed afterward, including typography, images, and color schemes. The design had to reflect the restaurant's brand identity and enhance the overall dining experience for both customers and employees.
Testing
With the visual elements designed and wireframes used as a template, I crafted the menu on Adobe Illustrator and Figma before taking it to customers for testing and gathering vital feedback to improve it further. The website was created on Wix and was also tested.
Result
As the owner and product designer, my dual roles gave me with a unique perspective in approaching this project. The restaurant menu and website redesign was ultimately a success, resulting in the reopening of the business after being closed for almost a year. Additionally, online menus ensured the safety of both employees and customers.
With COVID becoming less of a concern, the lack of paper menus and some customers not having access to smartphones presented an accessibility issue. However, the benefits of being able to make changes to the menu quickly, saving costs on printing, and promoting sanitation outweighed the accessibility issue at the time.
