Project Overview
The product
little Lemon is a family-owned restaurant that offers the best healthy options in town. little Lemon offers dine-in, take-out, and delivery options through their website. This feature is important for busy professionals who don't have much time to cook and prefer a healthy option.
Project duration: Feb 2023 - March 2023
The problem
There is a mix of information on the current little Lemon website with inconsistent labels, actions, and designs. For example, there is no add button on the individual dish information page. As a result, the users feel confused about the steps in placing orders.
The reservation table function is not intuitive in allowing users to reserve a table for dine-in. The user can't choose the date and time properly and filling the form feels like taking forever to complete.
The reservation table function is not intuitive in allowing users to reserve a table for dine-in. The user can't choose the date and time properly and filling the form feels like taking forever to complete.
The goal
Redesign the little Lemon website to address mixed information with inconsistent labels, actions, and designs. Improve user flow and interaction with the little Lemon website in desktop and mobile versions.
My role:
UX Designer leads design from ideation to final product (desktop and mobile).
Responsibilities:
Conduct user research to create a user persona and journey map. Use crazy 8s to sketch user interface design and features to embed in the low- and high-fidelity design. Determine information architecture and responsive design.
------------------------------------------------------------------------
Understanding the user
User persona and journey map - Tilly
The problem statement:
Tilly is having a hard in placing online orders through little Lemon website. She finds mixed information, confusing labels, buttons, and user flow.
Tilly - Persona
Tilly - Journey Map
User persona and journey map - Zero
The problem statement:
Zero is excited about online reservations but learns that there is no such feature on the little Lemon website. The book a reservation button doesn't lead to anything or a new page.
Zero - persona for table reservation
Zero - journey map in reserving a table
------------------------------------------------------------------------
Starting the design
Ideation
I sketched the existing online reservations from different platforms or restaurants to understand the user flow and interaction. I marked features or elements that would go well with the little Lemon branding.
little Lemon website UI sketches - mobile
little Lemon website low-fidelity - mobile
Homepage layout
Navigation bar
Navigation elements
Cart items
Homepage
Item page
little Lemon website high-fidelity - mobile
Homepage
Item 1
Item 2
Order summary
Table reservation sketches
Table reservation low-fidelity UI - mobile
Homepage
Date selection
Info page
Filled info page
Confirmation
Table reservation high-fidelity UI - mobile
Homepage
Select a date
Enter time
Enter parties
Result
User info
Filled user info
Confirmation
little Lemon sitemap
I created a site map of the desktop version for the little Lemon with Miro. It gave me the idea of elements and pages needed to include in the little Lemon website.
little Lemon User Flow
I created the user flow for the Order Online using Miro to visualize the user's step to complete the Online Order and Table Reservation.
Order Online
little Lemon User Flow - Order Online
Table Reservation
little Lemon User Flow - Table Reservation
UX Writing
UX writing is the practice of writing considered information that addresses people's contexts, needs, and behaviors. The messages must reflect and address the persona's pain points.
The challenges are screen size and space limit. My approach was to use limited characters/words to convey the message. I kept it simple. I highlighted all the necessary information in bold.
Confirmation page - before
Confirmation page - after
2nd Design Iteration - Prototype
While iterating on high-fidelity, I discovered issues with user flows and prototypes. I then worked on those issues to ensure they reflected the user personas.
Placing an online order on the little Lemon Website
Mobile version
Click here for the mobile prototype.
Desktop version
Click here for the desktop prototype
Table reservation - Prototype
Mobile version
Click here for the table reservation prototype
Desktop version
Click here for the table reservation prototype
------------------------------------------------------------------------
UX Research Study Plan
Title:
A UX Research Study on High-Fidelity Prototype of "Order Online", and "Table Reservation" for the little Lemon.
Goal:
little Lemon's customers learned the website doesn't offer the "Order Online" and the "Table Reservation" options. This research will help us address and refine the user flow in both functions.
Research
Questions:
Questions:
- How do users learn about menu items for "Order Online"?
- What do users think about the customization for their meals?
- How easy or difficult is it for users to view and add items?
- What do you think about the checkout process?
- How do users make a table reservation on the little Lemon website?
- How does the design address accessibility?
- Does the overall design appeal to the users?
- What do users think about the customization for their meals?
- How easy or difficult is it for users to view and add items?
- What do you think about the checkout process?
- How do users make a table reservation on the little Lemon website?
- How does the design address accessibility?
- Does the overall design appeal to the users?
KPIs:
- Time on task: how much does the user spend placing an order?
- Use of navigation: how easy is it for users to navigate to complete the task?
- System usability scale: a questionnaire to evaluate user feedback.
- Use of navigation: how easy is it for users to navigate to complete the task?
- System usability scale: a questionnaire to evaluate user feedback.
Methodology:
- Unmoderated Usability study with five participants
- Location: US remote
- Each session will last 20 minutes with a test case study using Useberry, follow-up questions, and a system usability scale.
- Location: US remote
- Each session will last 20 minutes with a test case study using Useberry, follow-up questions, and a system usability scale.
Participants:
- Participants are anyone who prefers healthy meals.
- Participants are anyone who orders online and/or books a table.
- Participants are anyone residing in the city and suburbs aged between 21 and 65.
- Participants should be well distributed in the following: 1 user with assistive technologies, a user with a visual impairment, a user whose English is their second language, and a user who hesitates about the online transaction.
- Participants are anyone who orders online and/or books a table.
- Participants are anyone residing in the city and suburbs aged between 21 and 65.
- Participants should be well distributed in the following: 1 user with assistive technologies, a user with a visual impairment, a user whose English is their second language, and a user who hesitates about the online transaction.
Test study:
A link to the interactive test, follow-up questions and SUS.
------------------------------------------------------------------------
Going forward
Takeaway
It is crucial to perform a site evaluation based on the design principles for the following reasons. First, it allows me to learn what works and does not work. Secondly, it gives me an idea of the problem. Then I pair those two points to lay out the user's pain points and solutions to address those problems.
Next steps
1. Recruit participants for the usability study to get feedback on the high-fidelity prototype.
2. Work on the interaction design that can aid and improve the user experience with the website.
3. Check the Web Accessibility Guideline to ensure that design is inclusive for all users.
2. Work on the interaction design that can aid and improve the user experience with the website.
3. Check the Web Accessibility Guideline to ensure that design is inclusive for all users.
------------------------------------------------------------------------
Thank you!