Responsive Web Design for a Local Restaurant

Role: end-to-end UI/UX designer

Platform: Web, Mobile

Duration: 80 hours

Encouraging online sales and signing up for rewards for customers of a beloved local restaurant, Kiin Imm Thai

Research

Competitive Research

I first started off comparing four other Thai restaurants in the area: Thai Cuisine, Bangkok Garden, Thai Chef, and Sabai Sabai. Some elements of each website I focused on were the header, footer, and flow of making an online order. I also noted the way the restaurant described themselves and what unique qualities they believed set them apart from their competitors.

User Research

I then interviewed five users that have previously dined in person at Kiin Imm (KI) or placed an order from them online. Each user described their expectations when visiting a restaurant’s website, their process for placing an order online, and then viewed Kiin Imm’s current website. The findings were placed in an affinity map.

Key Findings

  • Users range from ordering online once a month to six times a week

  • Users range from will not sign up for rewards to will sign up for rewards always

    • Everyone enjoys discounts and coupons, birthday deals

    • Will sign up if they go often and it is convenient to sign up

  • Users have similar expectations of what information is to be found on a website

    • Seeing realistic pictures of the food is helpful

  • Describing Kiin Imm: everyone says it is authentic, consistent

  • Pictures on the current website are very busy. The website needs to be streamlined.

  • The website has everything you would expect, but it does not reflect the quality of food from KI

Define

Based on what information the users expect when visiting a restaurant’s website, the new design could then be organized into a site map.

In a website, Users consistently sought out a way to place an online order, an updated menu, and the restaurant’s location and hours. I decided to keep KI’s current third party product, Toast, as the way Users can place an online order and sign up for rewards. Users agreed with the current websites placement of address, hours, and contact information in the footer. Having separate pages for the menu, about, and private events is a known pattern for restaurant website.

Develop

Moodboard

From the User Interviews, KI was described as consistent, authentic, and cute. I was inspired from the interior of the restaurant as well as a Washington Post article covering the restaurant.

Hand Sketches

Wireframes

Low fidelity screens for desktop

Low fidelity screens for mobile

High fidelity screens for desktop before testing

High fidelity screens for mobile

UI Kit

Test

Five users were tested as explained below.

All of their feedback was organized into a chart.

All users were able to complete all three tasks, but there were still some improvements to be made. These improvements were prioritized based on the severity of the change and the frequency of mentions.

Revisions

The itemized list of edits made are:

Home Page

  • increased font size of buttons in header

  • changed “About” to “Our Story”

  • increased font size of ‘order online’ button, pushed the location upward on the page

  • included captions in the photo gallery of dishes

Globally

  • increased top and bottom padding of buttons

  • increased margin in all pages

Users are able to view the main menu and catering menu from the site.

Conclusion

Menu Page

  • added lines in between sections in menu

Private Events Page

  • shifted the Inquiry Form to be above the images of the interior

Prototype

You can access the full prototype for the redesigned Kiin Imm website here.

The call to action to order online is highlighted on the landing page of the website. It is integrated with the third party product, Toast.

Kiin Imm is a beloved local restaurant and it is unfortunate that its website can deter potential customers from giving it a fair chance.

I learned how to translate a brand through design; I tried hard to showcase the small business feel of KI while selling their delicious food.

In terms of next steps, I would love to explore how to incorporate images to the menu so that customers can visually tell what a dish is about, and I would also like to develop a way to present allergens on the online menu. The images presented of the dishes and the interior of the restaurant can also be updated.

Next
Next

Adding a Reminders Feature to Netflix