Adonia Mobile UI

UX Research // UI Design // UX + UI


Project Overview

Role: UX Researcher, UI Designer

This is both a UX research and UI design project made for Adonia Tea House, a high tea salon in Vancouver, BC. This was made as a student project and is not affiliated with the company. In this project, I use a variety of UX research tools to make a prototype of a possible mobile design. This is intended to be a mapping of the reservation process for the customer.

Reasons for UI Design

I was previously an employee at Adonia Tea House in Kerrisdale, Vancouver. While Adonia has a beautiful desktop website, there was no mobile version. Because of this, I decided to create a prototype of the reservation process in a mobile interface.

Making a reservation is one of the most important things that a restaurant and as I was working at Adonia, I noticed a lot of customers calling in with questions regarding the menu, reservation process, dietary restrictions, and so on. Often these questions were repetitive, so I wondered if I could somehow make this process easier. As well, many customers did not know when the afternoon tea service was available, the hours, and other information which should have been readily available. I could only imagine the number of customers who wouldn’t have bothered calling to inquire further – whether it was about reserving or just to get some questions answered.

Nowadays, most customers prefer booking online to make their reservations. Adonia’s reservation system is still paper, and requires customers to call in. While I wanted to implement an OpenTable system, the owners of Adonia wanted to keep their existing methods.

Persona Creation

Through my personal experience with working at Adonia, and my discussions with the owner, I have drawn on this description of Adonia’s primary audience: aged 20 – 70, primarily female, middle to upper middle class level income, interested in socialization in the tea salon with friends. With this information, I then built a persona.

User Journey Map

This is a user journey map I made with UXpressia. It details the path that the user takes through the website to make a reservation, as well as their thoughts, emotion processes, tasks, etc.

Paper Wireframes

As Adonia doesn’t have a mobile website to build off of, everything had to be made from scratch. I used the user journey to design an optimal interface for the reservation process. The UI had to be clear, readable, and based off the aesthetic of the restaurant, as well as the existing desktop website.

Furthermore, I had the difficulty of streamlining the calling process- something which was almost universally disliked. The biggest challenge was: how do I use the UX/UI in such a way to make this more accessible for the users?

My answer was twofold: the first was to make reservations available all over the website, where it seemed logical instead of just leaving it as a separate page. This would encourage users to make a reservation, even if their original intent was only to browse through the menu.

Secondly, I made the button on “Reserve Now” lead directly to a dial screen. The intent was to “skip” the decision process where the user may decide against calling, as well as the troublesome “dialing” phase.

With this, hopefully the calling seems less of a hassle. With the numbers right on the screen, the user has little barriers in the way to prevent them from making that reservation.

Furthermore, I also wanted to place emphasis on Adonia’s unique aesthetic and its menu specialties. This was done through large image headers, allowing the user to “feel Adonia’s vibe” as they browse the site.

Low Fidelity Wireframes

Using these paper prototypes I made lo-fi wireframes on Mockflow.

High Fidelity Prototypes

Here are my high fidelity prototypes. I will outline each step in the reservation process below.

The user will come to the home page immediately upon entering the website (skiping over the redundant “enter” page in the desktop version). From the survey, the two main reasons why people use the website are browsing the menu and booking reservations – hence the two options.

Upon clicking the Menu button or via the hamburger benu, the user will be led to the menu page. Icons were added for people with allergies or dietary restrictions.

There is an option that instantly navigates the user to the Reservation page in the middle of the menu page, for their ease (in case casually browsing lead to an interest in the restaurant).

Alternatively, one could also navigate to the Reservations page through the side menu after gaining interest in the restaurant while browsing the menu. Large images of Adonia’s signature afternoon tea were used in order to wow audiences.

Here, the user navigates to the reservation page (for this screen, via the hamburger menu).

This screen gives details on hours of operation, the phone number, etc. The user can then hit the “Reserve Now” button, which will bring them to the next window.

In lieu of OpenTable, the phone app with Adonia’s phone number will pop up, prompting the user to call. This skips the troublesome dialing step, and motivates the user to simply hit the green phone button.

Finally, a reservation notification will be sent to the user, reminding them of the upcoming reservation once it has been confirmed with the store!

Project Finished!