UX/UI case study- Restaurant Website
Brief: The principle aim of this case study is to demonstrate how an old fashioned and impractical website was re-conceptualized, re-designed, and developed as a completely responsive, modern web application using contemporary design practices. Nepalese Restaurants in Helsinki are popular yet most of the restaurants website were already outdated in 2015–2016. So I, along with my small team, approached many Nepalese restaurants in Helsinki. We designed their website with user-centric approach.
Note: This was part of the project in a team from one company. We later worked with more than 10 restaurants and re-designed their websites with a similar approach.
Approach
Modern design practices include user-centric design principles and design based on the end user’s resources, upon which the product will be used. In the case of website design, the resources in question are web browsers in desktop computers, laptops, tablet, PCs and mobile devices.
Problem
The old website of Everest Nepalese Restaurant was outdated and was difficult to use. After scanning the website and talking with the restaurant staff, these were the main pain points. These problems were also verified by interviewing customers who visit the restaurant regularly.
Issues in responsiveness.
2. Difficulties in finding contents.
3. Misplace of contents and mostly irrelevant contents.
4. The problem of booking a table from the website. This was one of the main issues for both of the restaurant workers as well as users. Customers appear to expect a table reservation and restaurant staff cannot find the reservation.
5. Problem on Menu placement and prices. This caused misunderstanding and often customer dissatisfaction as well as it took staffs some time to explain to them regularly about menu items.
6. Everest Restaurant has three branches in Helsinki. Due to the lack of proper separation, there were reservations to the wrong place, wrong phone call, and much other confusion.
7. Difficulty in updating due to the lack of content management system(CMS)
Goal
- To build a new website with a mobile-first principle and with a completely new design that looks modern.
- To give users easy access to what they want in a first glance without making them think.
- To help the restaurant retain trust from their customers and show that they actually care what customers want by adopting the new design.
- To help users save them time by making things quick and by requiring less input.
- To help the restaurant get more table reservations and less confusion.
- Give admin panel support so they can update contents
Our Proposal
We proposed a brand new and fully responsive website which fits almost all the screens and fulfills the goal mentioned above.
Process
Initially client meetings for eliciting the requirements for the re-design of the website were carried out. After that different levels of mockups and wireframes were produced. When the site architecture was designed, user testing was performed. The wireframes were designed after meeting the client and presenting them a sitemap. A color profile based on the brand of the customer was created. The images of probable alternative looks were created by using Adobe Photoshop based on the wireframes. After careful examination and matching with color profile, one of the images was selected as a mockup.
Usability test
Usability test
A usability test was done by four different participants for testing the usability of the Everest’s new website. The test procedure included a face-to-face meeting with users and they were provided with mobile phones and laptops to test performing the same given task on two different devices. Before the usability test, a test plan was developed and a pilot was tested. Based on the pilot test, the test plan was revised to ensure the success of the usability test. In the usability test, the usability of the website was evaluated so that the participants performed specific test tasks given to them. The participants were asked to think aloud while doing the test tasks. The think-aloud technique was used to extract information about the users’ thought processes during the tasks.
Task Time and Completion Rate.
Task times, number of problems per task, and task completion of the participant 1 in two different devices, mobile and laptop are described in Table 3 and 4. The following codes are used to describe task outcomes:
A — Task was performed successfully
B — Moderator helped in task performance
C — Task failed
D — Task was suspended
E — Task was not tested (e.g. user got to leave, or got bored.)
Interview Questionnaire.
UI:
I. Is the UI clear?Functionality:
II. Were all the functions easy to understand/follow?UX:
III. Do you have any suggestions to improve the website?Other:
IV. Would you use the site in the future for performing similar tasks?Debrief:
I. Do you have some thoughts or comments that you would like to share?II. Do you still have some questions?
Based on the test answers the strengths of the new website were:
i. The UI of the website is easy to follow.
ii. The design is simple but attractive.
iii. The functionality of the website is clear and easy to access.
iv. The website has all the essential elements that are needed on a restaurant’s website.
v. Website is responsive.
vi. Implementation of Instagram on the site is good.
Main problem areas were:
i. Language selection is not possible from other pages once it is selected in the beginning.
ii. Booking availability.
iii. The map keeps on scrolling on mobile device.
The budget was limited so some issues such as Booking availability remained unsolved as it required real-time table availability updates etc. To reduce misunderstandings about table reservations, now a clear message is sent to a customer every time a table reservation is made. This way a reservation is confirmed only when the customer gets a reply from the Restaurant.
Issues such as map scrolling were fixed.
Table 1 above shows the statistics of only one participant; 1. However, after analyzing the statistics of all the 4 participants, generally, all the tasks were completed successfully.
One problem every participant suffered from was scrolling the map with a mobile device. This issue was corrected immediately after the test was over.
CMS
One of the goals of redesigning the website was to give the restaurant an opportunity to update the website content.
Because of the limited time and budget, Admin panel theme was used to design CMS.
To make sure that the holiday notification disappears after a holiday is over, the Admin Dashboard has been adjusted so that the start date and end date can be given in advance.
Similarly, adding a food item to the menu was made easier. When adding an item, now the admin can select a category in English and the same category in Finnish will be selected automatically. This solved the issue of wrong item entry in English and Finnish.
Results
After implementing the new design we saw a growth in table reservations. We monitored the table reservations for almost a month after making the website live. Below is a screenshot of the inbox taken during the monitoring phase.
My Role
As mentioned earlier, I primarily worked as a user experience designer conducting user research, understanding users’ problems, sketching new solutions, consulting, wireframing the product with the mobile-first approach and finalizing the User Interface (UI) design. The development team was based abroad so I used to monitor the work online and communicate with them via Skype.
We did the same project for other Nepalese restaurants too. They all shared a similar problem so a similar approach was used.
Everest Restaurant
Kantipur Restaurant
I hope you enjoyed reading through my case study. I enjoyed this entire process. There are many possibilities and opportunities as always. With the limited budget and time, I did everything I could. In 2019, my knowledge and understanding of UX are better than in 2016. If you want to discuss anything related to this project, please let me know. It would be amazing to discuss more about this and get to know your opinions and suggestions. Looking forward to hearing from you. Thank you so much for your valuable time. ❤