Little Lemon app

2024
UX/UI design

This concept project was completed as part of the "Principles of UX/UI Design" course by Meta, offered through Coursera. The task was to redesign the “Reserve a Table” feature of the Little Lemon restaurant app. The existing flow suffered from usability issues, including unclear navigation, ambiguous button labels, and inconsistent UI elements. The goal was to enhance the reservation experience by creating a smoother, more intuitive interface that reduces user frustration and aligns with best practices in UX and UI design.

User Research

01

User Persona

To inform the redesign process, I created a hypothetical user persona based on the scenario and guidance provided in the course. While not based on real user research, this persona helped establish a clearer picture of a typical user’s goals, frustrations, and needs when booking a table. It served as a foundation for making user-centered design decisions throughout the project.

02

User Journey

As part of the design process, I developed a hypothetical user journey map reflecting a typical experience with the current reservation feature. Based on the course materials, this journey highlights common usability issues and emotional touchpoints. It was a valuable tool for identifying pain points and opportunities for improving the flow into a more seamless and satisfying user experience.

03

Key Improvement areas

By analyzing the hypothetical user persona and journey map, I identified several pain points in the current reservation flow. These insights shaped the redesign, focusing on making the experience more intuitive, efficient, and user-friendly. Below are the key areas I aimed to improve.

Clear navigation and indicators

  • Improve the time selection interface to make available slots obvious.
  • Ensure tappable elements like the number of guests are visually distinct and intuitive.

Simplify and clarify the form

  • Highlight mandatory fields and provide clear instructions.
  • Include fields for special requests, like dietary restrictions.

Error feedback and recovery

  • Provide meaningful error messages with suggestions to fix the issue.
  • Allow users to go back and edit without losing previous inputs.

Post-confirmation feedback

  • Display a success screen with reservation details and send an email confirmation.
  • Provide an option to modify or cancel the reservation after confirmation.

Wireframes

Based on the improvement areas identified during the user journey analysis, I sketched low-fidelity wireframes to explore layout options and structure the new reservation flow. This step allowed me to focus on usability and hierarchy before moving on to visual design.

UI design

01

Design System

I created a small design system to define the colors, error styles, and core components used in the UI.

02

Final Design

Finally, I put everything together in the high-fidelity screens, showcasing the improved reservation flow with the updated visuals and components.

Prototype

After finalizing the high-fidelity screens in Figma, I created an interactive prototype to simulate the new reservation flow. This prototype showcases the key interactions and helps visualize the user experience in a realistic, clickable format.