Adonia Mobile UI
UX Research // UI Design // UX + UI
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.
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.
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.
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).
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.