Little Lemon Restaurant site redesign
Adrian, one of the co-owners and manager of product of the Little Lemon Restaurant, is having issues with the website. He asked me to carry out the redesign of the Little Lemon website following a UX/UI process.
Valuable information into my customer experience was collected from users who order food and make reservations online. I then identified how I could use the results from user interviews and observations in my design.
First, all participants found if difficult trying to find specific dishes. The menu button was not clearly identifiable and once discovered, the drop down provided was not categorized into food groups such as lunch and dinner.
Second, it was discovered that the basket icon was not visible. Without the basket icon, one participant did not know whether they had added items successfully or not. This forced the user to try to go back to the start again, only to find there was no back button or a way of navigating to the home screen, so they abandoned the task.
Third, another participant eventually was successful in placing an order, however they could not edit or update that order. While observing the participant, trying to order some food, it was noticed they wanted to add an additional ingredient to the dish. There was no ability to do this on the website.
Finally, in another observation, the participants could not complete their order to checkout because of an error. They tried numerous times and kept getting a validation error. This was displayed only after they had entered in their information. They abandoned the task.
I started my work based on data gathered from customers when they used the website.
I completed research looking at similar products and compared three companies against Little Lemon Restaurant. See entire report here.
To get a deeper understanding of user behavior and decisions, I used empathy mapping.
I combined the information gathered from all users interviewed which led me to develop personas that guided my decisions and the UX design process - beginning with the empathize stage. The persona traits are based on user interviews and observations.
I was able to uncover moments of frustration and delight in a series of interactions to provide a detailed view of the customers experience. It revealed opportunities to address customer pain points, reduce fragmentation and improve the user experience.
After creating the persona's I then began evaluating the current Little Lemon online ordering functionality and making a reservation functionality. I used good design principles, heuristic evaluation, and interface guidelines to identify UI flaws. The issues found violate important design principles. The goal is for this information to help me create a better design that will make customers much happier.
Ideate phase
I then considered my content and structure with usability in mind. The website information architecture can be ordered into four five sections. The navigation bar will be at the top of the Little Lemon website page, giving it room to breathe without distraction from other information or graphics. The colors will be contrasting so the links stand out. The logo will act as a link to the homepage. For the mobile version, due to lack of space, we will use the hamburger menu. This is all in an effort to make sure the content is organized so that they users can easily adjust to the functionality of the product and find everything they need without a lot of effort.
Ideate phase
The user flow takes them from their site entry through a set up steps towards a successful outcome, and final action such as purchasing take out or completing a table reservation.
Design phase
paper wireframes
Once I organized my insights from the ideation phase, I began the redesign. To begin the process, I started to sketch several screens using the user flow as a compass. Using this approach, I was able to explore different concepts.
I followed the redesign process of the online ordering elements and the online table reservation elements with the customers in the forefront of all decision making. I explored a solution and tested it to make sure that customers find the elements intuitive and enjoyable to use.
Prototype
Here is the prototype. Click this link to test.
Testing phase
Feedback
I used the prototype to conduct a test with users of our target demographic. Users were observed being able to use the app with ease and pleased with the design. There was negative and positive feedback that helped uncover opportunities to improve the overall user experience.
Lessons Learned & Key Takeaways
Acquired knowledge on identifying common empathy methodologies and tools
Mastered the art of posing questions to gather high-quality feedback from participants in a comfortable manner
Developed the ability to present designs that clearly demonstrate real-world functionality to users
Enhanced empathy skills by understanding user requirements and integrating them into accessible designs
Gained experience in collaborating with businesses to execute website redesigns
Expanded insights into the restaurant industry via competitive analysis and reporting
Future Vision
Voice Assistance: Enhancing Accessibility Features
Chatbot: Introducing a Customer Support Bot for real-time assistance
Gamification: Incorporating a Points and Rewards System. Introduce discounts for future purchases and reservations.
In Conclusion
The real-life case study was accomplished through extensive user research, testing, and attentive listening to user needs. The users who actively engaged in the design process from start to finish are the true heroes behind The Little Lemon Restaurant redesign. Their contributions provided invaluable ideas and insights that shaped the design process. The testing phase yielded valuable feedback on enhancing the design. Moving forward, there will be ongoing efforts to further enhance and iterate on the design.
