/ menuResto

April - June 2024

Tablet app

Designing solutions to improve usability and accessibility in digital ordering.

I was the UX designer on a small, agile team alongside a stakeholder and developer. Using a design thinking approach and working in sprints, I led the creations of a seamless digital ordering experience for MenuResto from scratch. My focus was on solving key usability challenges by refining the ordering flow, improving menu clarity, and enhacing accesibility.

Skills:

Figma

Design thinking

Prototyping

menuResto

In this case

In this case

🤓 Curious to see how it all came together?

Diving Into the Project’s Purpose

I was contacted by Leo, who told me about her vision: “Well, we aim to make a difference, especially by enhancing our service through the integration of technology.” Immediately, I felt very motivated to be part of her idea because it perfectly aligned with my vision as a designer: technology should support and enhance our everyday experiences.

The system we aimed to implement targeted a broad range of users with varying levels of technological proficiency. For this reason, I began by identifying user behaviors and attitudes toward an ordering system through interviews. Participants demonstrated diverse approaches and reactions, which allowed me to recognize patterns, pinpoint issues to resolve, and anticipate potential challenges in the system.

Image of a card sorting exercise displaying user feedback on online ordering systems, including preferences for clear menu pictures, streamlined processes, and listed ingredients, alongside criticisms about inefficiency, frustration for new users, and lack of assistance.
Image of a card sorting exercise displaying user feedback on online ordering systems, including preferences for clear menu pictures, streamlined processes, and listed ingredients, alongside criticisms about inefficiency, frustration for new users, and lack of assistance.

💬 These were the issues and comments that I noticed repeatedly throughout the entire interview.

From the comfort of their table, they will be able to place an order quickly, with the option to track the time, assign a payment method, and, if necessary, call a waiter who will be automatically assigned to the table. The validation of the UX flow, through a Mid-fi prototype, will allow me to optimize the order creation process, improving both satisfaction and the operational efficiency.

UX flow diagram showing four steps for a food ordering process: 1) Choose your meal (image of a burger with a plus symbol), 2) Confirm order (screenshot of a cart with items), 3) Pay method (illustration of cash and coins), and 4) Track your order (image of a cooking pan with a timer displaying 0:00).
UX flow diagram showing four steps for a food ordering process: 1) Choose your meal (image of a burger with a plus symbol), 2) Confirm order (screenshot of a cart with items), 3) Pay method (illustration of cash and coins), and 4) Track your order (image of a cooking pan with a timer displaying 0:00).

👉 The UX flow. In this more visual way, I was able to better explain to the stakeholder the main idea of each point and the path to follow.

So, let's do it!

My design decision was based on creating a concept that provides a positive and smooth experience so that the user can truly enjoy their experience and adopt it as another tool for their day-to-day life.

I prioritized three key areas :

  • Menu Clarity: I crafted clear and concise product descriptions to empower users with informed choices.

  • Accessible Support: I implemented visible and easily accessible help options for immediate assistance whenever needed.

  • Real-time Order Tracking: I enabled users to track their order status from confirmation to delivery, fostering a sense of control and satisfaction.

Sample of a branding and design system showcasing a palette of circular color swatches in shades of purple, teal, black, and white. Includes interactive UI elements such as a search bar with placeholder text 'I wanna eat...', a numeric counter with '+' and '-' buttons set at '99', a notepad icon indicating '0' items, a cash payment option with an image of bills and coins, and buttons styled with gradient effects labeled 'Primary text'
Sample of a branding and design system showcasing a palette of circular color swatches in shades of purple, teal, black, and white. Includes interactive UI elements such as a search bar with placeholder text 'I wanna eat...', a numeric counter with '+' and '-' buttons set at '99', a notepad icon indicating '0' items, a cash payment option with an image of bills and coins, and buttons styled with gradient effects labeled 'Primary text'

📌Overview of the design system: Colors, button designs, and some of their states.

Iterate, Learn, Improve: The Essential Cycle

Testing during early design stages helps identify areas for iteration early on. For this reason, in the product roadmap, I scheduled two phases of testing:

  • Early testing: to avoid accumulating major usability problems that would be expensive to fix in the later stages of the product.

  • MVP testing: once the product was built, I revisited the users to ensure the solution met both their needs and the business objectives.

Wireframe design of a three-panel layout. Left panel: Product grid with filters and greeting. Center panel: Vertical list of products with images and details. Right panel: Three-column product grid with pricing
Wireframe design of a three-panel layout. Left panel: Product grid with filters and greeting. Center panel: Vertical list of products with images and details. Right panel: Three-column product grid with pricing

📝 Starting the most exciting part! The first wireframes.

Early testing and iterations

To avoid accumulating major usability problems that would be expensive to fix in the later stages of the product, it is crucial to address potential issues early in the design process.

1- Target Size and Hierarchy

This iteration based on Fitts's Law resulted in a significant improvement in the usability. Users were able to locate and interact with cards more quickly and accurately, leading to a more efficient and satisfying user experience.

Impact: This iteration based on Fitts's Law resulted in a significant improvement in the usability.

2- Microinteractions

Touchscreens demand precise finger movements, and microinteractions can guide users' interactions while also offering immediate feedback, instilling trust and confidence in all the different users.

Before

After! ✅

Impact: Error Rate decreased from 13% to 1%!!

MVP testing and results

In this second testing stage, I agreed with Leo to test the MVP directly with the restaurant customers to try the app in exchange for a small benefit, such as a discount or free item.

A sample of 30 people with diverse backgrounds, all frequent customers of the restaurant, were selected to conduct this test, yielding the following results:

1- User satisfaction

Out of a sample of 30 users:

· 22 users gave a 5-star rating – reflecting high satisfaction with the overall experience.

· 4 users gave a 4-star rating – showing a generally positive response, but with some room for improvement.

· 4 users gave ratings between 1 and 2 stars – indicating a small percentage of users were dissatisfied.

The majority rated the experience with 5 stars. However, a small percentage of users were dissatisfied. After studying the results in detail, an interesting insight emerged: among those who were dissatisfied were less tech-savvy older adults.

Through interviews, I learned that their primary concern was a lack of clarity in the ordering process, leading to fears of making unintended confirmations or payments.

📊 Metrics: Average satisfaction of tested users.

Solution
To make the system more accessible and user-friendly I implemented an onboarding solution: video that guided users through the ordering process step by step. The video reassured them that no order would be placed or charged until they explicitly confirmed it. This step significantly reduced their anxiety and gave them the confidence to complete their orders.

2- Task completion rate

After analyzing initial results, I identified issues that were preventing users from completing the process efficiently.

Hand-drawn schematic in black and white with handwritten notes in Spanish about the usability of an interface. The diagram includes questions like 'Why?' ('¿Por qué?'), 'Where and why?' ('¿Dónde y por qué?'), and terms such as 'clarity' ('claridad'), 'accessibility' ('accesibilidad'), and 'iterations' ('iteraciones'). It also mentions user testing with 'Test with MAZE!' and a reduction from 70% to 30% in some process. The diagram appears to analyze user experience problems before making improvements.
Hand-drawn schematic in black and white with handwritten notes in Spanish about the usability of an interface. The diagram includes questions like 'Why?' ('¿Por qué?'), 'Where and why?' ('¿Dónde y por qué?'), and terms such as 'clarity' ('claridad'), 'accessibility' ('accesibilidad'), and 'iterations' ('iteraciones'). It also mentions user testing with 'Test with MAZE!' and a reduction from 70% to 30% in some process. The diagram appears to analyze user experience problems before making improvements.

📝 Sketching out diagrams like this helps me break down user experience problems before making improvements. It’s a great way to spot pain points, understand where users get stuck, and fine-tune the design for a smoother experience!

By implementing iterative improvements—such as simplifying the interface, optimizing user flows, and addressing pain points through user feedback—the product's usability significantly improved, as explained in more detail in the 'early testing' section above.

Before

70%

After ✅

98%

Impact: A remarkable 98% of users successfully completed the order placement process, indicating a clear and intuitive interface.

3- Time to complete

Previously, users took an average of 4 minutes and 53 seconds to complete the process, which indicated that the user journey could be inefficient and to contain unnecessary steps.

A diagram comparing the time average of an early stage and a second stage of a process. The early stage has a time average of 4 minutes and 53 seconds, while the second stage has a time average of 2 minutes and 30 seconds. The diagram also highlights a "pain point" in the early stage and "less steps" in the second stage
A diagram comparing the time average of an early stage and a second stage of a process. The early stage has a time average of 4 minutes and 53 seconds, while the second stage has a time average of 2 minutes and 30 seconds. The diagram also highlights a "pain point" in the early stage and "less steps" in the second stage

📝 The first stage has a "pain point" that indicates where time was being lost. But in the second stage, everything flows smoothly! I managed to reduce the necessary steps and goodbye to the pain point!

The time reduction was achieved by simplifying the user flow, eliminating unnecessary steps, and making key adjustments based on user feedback. Through iterative testing, I identified pain points where users were spending excessive time and worked to resolve those issues.

Impact: The average time was an impressive 2 minutes and 30 seconds, demonstrating a user-friendly design that minimizes unnecessary steps.

4- Order tracking usage

80%

Users average ✅

Impact: Over 80% of users actively utilized the order tracking feature, highlighting its value in enhancing the UX.

Design-to-development hand-off

This project has been a journey of discovery, iteration, and improvement. From understanding the diverse needs of users to creating an intuitive and accessible solution, every step was guided by the goal of enhancing the user experience.

By focusing on clarity, accessibility, and efficiency, the final design not only met but exceeded expectations, as evidenced by a remarkable 98% task completion rate and a significant reduction in order placement time.

User feedback, especially from less tech-savvy individuals, highlighted the importance of empathy-driven design, leading to solutions like onboarding videos that empowered all users to navigate the system confidently. The results demonstrate that listening to users and embracing an iterative approach can transform challenges into opportunities, creating a product that is both functional and delightful.

Try it!

You've just had a long, exhausting but productive day at work. You rush home, eager to grab a bite to eat at your favorite restaurant before it closes. Upon arrival, you settle into a table and realize they're about to close. You start to flag down a waitress the traditional way, but then you notice something new on the table – an ordering system! I recommend trying it in full screen.

Thanks for reading!

This project reflects my passion for designing solutions that truly enhance people's daily lives and is yet another example of how accessibility must be the foundation of any design!

Let's connect

© 2025 Katherine Martínez - All rights reserved

Made with Framer by me <3