Liverpool Restaurants: Design and coding for the digital menu.
Role: Led the project as Sr Product Designer, owned design sprints on Jira and helped in product planning. Timeline: April 2020 - 2024
Introduction
The digital menu for Liverpool restaurants was a project that began during the COVID-19 pandemic. Liverpool, one of the largest retail chains in Mexico, operates over 100 restaurants nationwide as part of its retail experience, offering customers a place to rest and enjoy a wide variety of international and local cuisine, including Italian, Asian, and Mexican dishes. As part of government requirements to reopen restaurants and control the spread of the virus, each establishment — including cafes and bars — needed to implement digital menus accessible via QR codes. This initiative aimed to eliminate the risk of infection through physical menus. Time was a crucial factor, as the restaurant team needed to deliver the solution as quickly as possible. However, the company's e-commerce and development teams were unavailable to work on this project due to the unprecedented online demand caused by the closure of most physical stores.
The Digital Menu
Solution Amid a Health Crisis
During the COVID-19 pandemic, restaurants faced unprecedented challenges due to health regulations aimed at reducing physical contact. One of the critical issues was the need for a contactless menu solution that would allow customers to view and order from the menu without handling physical copies, which posed a risk for spreading the virus. Understanding this urgency, I collaborated with the restaurant team to implement a digital menu system accessible via QR codes. This allowed customers to scan the code with their mobile devices and access an easy-to-navigate, fully responsive menu, ensuring a safer dining experience while maintaining the restaurant's operations during a time of strict health protocols.
The Challenge
With traditional menus posing a health risk during the COVID-19 pandemic, restaurants were required to adopt contactless digital menus to reopen. The solution needed to be fast, safe, and user-friendly for both customers and staff. However, the IT team was tied up with other critical tasks, and there had been no prior collaboration between the "Restaurantes Liverpool" and ".COM" teams. Time was of the essence, as the menus had to be ready before reopening, and given the extensive number of menu items, a simple PDF was not a viable option for a good user experience.
More than 127 stores through the country with 70% of them with restaurants
Physical menus posed risk as a source of infection, and getting rid of them was a government regulation
We would do interviews with the stakeholders to understand the requirements that these menus had
We sent email questionnaires to frequent users of Restaurantes Liverpool to gather insights in light of the health crisis.
User Insights
María García (Mid-30s, Busy Professional, Tech-Savvy)
Age: 35
Occupation: Marketing Manager
Location: Mexico City
Income Level: Mid-class
Tech Skills: Confident using smartphones, regularly shops online and uses food delivery apps.
Goals
- ✓Avoid unnecessary contact with physical objects in public spaces.
- ✓Quickly access and navigate the digital menu via her phone without delays.
- ✓Order and pay without interacting too much with staff, preferring contactless solutions.
Pain Points
- 😞Fear of illness, especially in places that don't follow proper health protocols.
- 😞Frustrated if the digital experience is slow or if the menu is hard to navigate.
- 😞Wants to reduce face to face interaction with staff as much as possible.
- 😞Poor mobile optimization: Annoyed by menus that aren't designed for easy viewing on smartphones (e.g., small text, poor layout).
Motivations
- ★Values safety due to health concerns, especially when dining out during the pandemic.
- ★Prioritizes convenience and efficiency.
- ★Appreciates digital solutions that streamline her experience.
- ★Modern experience: Enjoys using innovative, tech-based solutions for day-to-day activities.
Carlos Gutiérrez (Mid-50s, Family-Oriented, Less Tech-Savvy)
Age: 54
Occupation: Accountant
Location: Monterrey
Income Level: Mid-class
Tech Skills: Comfortable with basic smartphone functions but doesn't regularly use digital tools for dining.
Goals
- ✓Access the digital menu with minimal steps and without feeling overwhelmed by technology.
- ✓Quickly understand how to use the QR code system without needing staff assistance.
- ✓Ensure his family can enjoy a meal safely without worrying about contamination from shared surfaces.
Pain Points
- 😞Difficulty with technology: Struggles with using QR codes or navigating the digital menu if instructions aren't clear.
- 😞Fear of technical failure: Worries that the system will crash or not work, delaying his dining experience.
- 😞Small text or unclear visuals: Dislikes menus with small fonts or images that are hard to read on a smartphone screen.
- 😞Lack of personal interaction: Misses the option of interacting with staff to ask questions or get recommendations.
Motivations
- ★Health and family safety: Wants to ensure his family stays safe by minimizing contact with shared surfaces.
- ★Reassurance: Appreciates knowing that a restaurant is taking necessary health precautions.
- ★Adaptation to new norms: Willing to try digital menus for the sake of safety, even if it's outside his usual comfort zone.
- ★Comfort: Desires a dining experience that feels smooth and hassle-free, without tech causing disruptions.
User Journey
Actions
Thoughts
Feelings
Pain points
Solutions
Implementation
After meeting with the restaurant's stakeholders and incorporating user feedback, I recognized the urgency of delivering a solution within a tight deadline to ensure a smooth reopening. I proposed a practical approach that involved reorganizing the menu into simpler categories for easier navigation. This process included creating wireframes, reviewing them with the team, and then designing the final screens before moving into front-end development. To expedite the rollout, I suggested building a simple yet effective template using HTML, CSS, and React. This allowed us to quickly deploy the digital menu without relying on the already overburdened IT team. By focusing on responsiveness and performance, we ensured fast loading times for images and content, delivering a smooth and efficient user experience. At the same time, the teams at the physical locations would be printing the required materials, giving a talk to the waiters about the new way of working, double checking prices, correct information for the dishes, etc.
User insights, and research
Reworking menu categories
Work on the wireframes
Hires screens
Creating the template (HTML, CSS, JS)
Reopening and usage of the QR digital menu
Photos of the reopening of the restaurants using the new QR digital menu. Tables were placed outside to decrease the risk of infection. Workers at each restaurant were given a rundown on how to use the QR and how to explain and help users.
Final screens
Checking the final template performance and different screen sizes. After receiving final approval on the screens from stakeholders, the last week was dedicated to ensuring proper implementation of HTML, CSS, and JavaScript for full responsiveness across devices. The solution focused on practicality, featuring a top component to highlight current promotions. The second component was the simplified menu categories, which were reorganized for easier navigation since the physical menu had too many options. Users could click on a category, and dishes would load dynamically using CSS ID tags. If they didn't find what they wanted, they could easily return to the main menu. Based on user feedback, we included as many photos as possible, as visuals were identified as a key element in enhancing the menu experience.
