Qarta Online
Custom and accessible digital menus that streamline the restaurant ordering experience and deliveries through WhatsApp.
Timeframe
June - August 2020
Skills
User Research
UI/UX Design
Team
Iñigo Zepeda
Diego Zepeda
How can we offer an outstanding digital menu experience?
During the pandemic, my brother and I observed that restaurants faced a challenge where they had to offer alternative menu options for customers, in order to prevent contagions of customers by using physical menus. We wanted to help solve this problem and our goal was to design a digital menu that offered a smooth and accesible UX to the customers.
Sentiment Analysis
To better understand the pain points, I conducted interviews to customers and owners, ranging from ages between 18-60. I gathered data into how people use current digital menus. Some comments are the following:
User Personas
Based on the information obtained from the interviews, I created user personas. These represent two groups of users, the customers (primary users) and the restaurant owners (stakeholders).
Enrique, 63
Lawyer, lives in Mexico City
About Enrique
Henry is a lawyer who enjoys music and considers himself quite technological. He has had struggles with his eyesight because of his age. He likes going out on weekends with his wife to eat and sometimes ordering food online.
Goals & Needs
- Easily read and navigate menus taking into consideration his eyesight problems.
- Straightforward and easy way to order food on restaurant and online..
Frustrations
- Small texts, PDFs and contrast issues that make the menus hard to read.
- Complicated ordering process with many options.
Marisol, 42
Chef, lives in Mexico City
About Marisol
Marisol owns a Mexican restaurant. Her passion is cooking and it makes her excited when she knows people enjoy her food. She doesn't know much about tech, but she she's always looking for ways to improve her service.
Goals & Needs
- Keep her customers happy with a great service.
- Keep menus updates simple and without technical knowledge.
- Follow governmental rules to keep operating the restaurant.
- The pandemic made online ordering more common, so consider offering it.
Frustrations
- Loosing customers due to poor digital menu experiences.
- High costs of maintaining a digital menu.
- Spending too much time managing the menu modifications.
Key Insights
From this research, I defined the features and requirements that must be accounted for when designing the digital menu.
For users
- Menu must be accesible to all customers.
- Menu must be easily browsable with a clear layout and hierarchy.
- Menu must be informative and useful for customers.
- Menu must be be accesible at all moments from a smartphone device.
For business
- Menu must be an economic alternative for the owners.
- Menu must be easy to update.
- Explore including important information so it can be used on social media.
- Explore including features so the menu works for delivery as well.
Deliverables
The two deliverables are the Custom Menu and the Online Ordering Menu, designed to serve both in-restaurant customers and the growing number of customers ordering online.
Online Ordering Menu
- Focus on creating a menu that is effective for online ordering.
- Intuituive and efficient navigation when browsing dishes.
- Important information of the restaurant such as social media, location, schedule.
Custom Menu
- Focus on keeping the branding of the restaurant.
- Intuituive and efficient navigation when browsing dishes.
- Important information of the restaurant such as social media, location, schedule.
User Flow
This user flow shows the Online Ordering Menu flow, from entering the menu and adding a dish to the cart to placing the order through WhatsApp.
Online Ordering Menu User Flow
Wireframes
Wireframe of the main pages of the Online Ordering Menu for mobile and desktop.
Main Page - Desktop
Main Page Overview
Upon entering the website, the user can view the important details and menu of the restaurant so they can start their order right away, on mobile or desktop.
Main Page
On Scroll
Main Page - Desktop
Dishes Menu
Restaurant Details
Search - No Results
Adding an Address
This flow shows how the user can add their address for delivery. The components used are inputs, input selectors and dropdowns.
Placing an Order
This flow shows how the user adds a dish to the cart, and then fills in the sections needed in order to place the order through WhatsApp.
Design System
The development of Qarta Online was greatly improved by documenting even a simple Design System. Iterations and modifications were much quicker since interfaces where made with components that could be easily modified. There are many components such as the Header, which is used on multiple pages, but has slight variations. It is these type of components in a design system that allow for an easy communication between designer-developer, with a much reduced effort and more efficient.
Branding
Name
The name draws inspiration from QR technology, and Spanish word for menu. The addition of Online reinforces its modern approach.
Icon / Logo
The logo incorporates familiar iconography like a fork and QR code to communicate the products purpose at a glance.
Color
Red conveys passion and energy, creating an engaging experience while naturally drawing attention to key interactions.
Typography
Nunito Sans strikes a balance between approachable and professional, ensuring readability with its clean, modern style.
Custom Menus
Some customers required premium handcrafted digital menus to match with their brand. These are some that I am proud of. Click on their name to view them.
Las Hamacas
Sabor del Mar
Hispano Café
Custom Posters
Some customers required premium handcrafted digital menus to match with their brand. These are some that I am proud of.
Project Impact
Qarta Online was a success, quickly growing over 80 clients across Mexico and the United States. Our solution enabled restaurants to successfully comply with government regulations during the pandemic while maintaining seamless operations.
The quality and effectiveness of our menus resonated strongly with customers, so much that colleagues of our clients' requested our service to develop their own Custom and Online Ordering menus. This growth led to getting recognition from El Financiero Bloomberg and El Economista, who interviewed us about the impact we had on helping business adapt during challenging times.
Future Work
Some of the improvements include developing an admin panel that would allow clients to manage their menu modifications independently. We handled all the menu modifications, which is was time consuming and also limited flexibility for our clients. This would work alongside migrating menus to a database, since many were originally coded in plain HTML and CSS.
A customer login system would also improve the user experience by letting users track past orders, save addresses, and have an overall smoother ordering experience. Currently, users enter their address with each order which can be time consuming at times. Online payments and delivery management were also requested, meaning that the potential for growth is enormous.
Learnings and Reflections
Qarta Online was one of the most challenging yet rewarding experiences I've had. Starting a company with my brother was an undescribable experience, knowing you have each other's back. Beyond creating the branding, landing page, and web app design, I was in charge of finding the potential clients, client relationships and Facebook ads. This role led me to improved my soft skills and learn about an area I was not familiar with.
Through usability tests and user interviews, we constantly upgraded our menus to better serve restaurants and their specific needs. Earning their trust and getting recommended to others was incredibly rewarding and showed us we were creating real value.
