A first impression, backed by research.
I was approached by the head chef/owner of an upcoming Japanese restaurant in Ireland to design a web app for guests to peruse the menu and book tables. With little established brand, I started from scratch, and since the site would be many customers' first impression, it had to showcase the restaurant's story, image and ambience alongside practical details.
Starting from scratch
The restaurant was in its early stages with little established brand, so the site had to do two jobs at once: create a strong first impression and make the practical details — story, ambience, menu, contact and access — effortless to find.
Because it would be many guests' very first encounter with the restaurant, the experience needed to feel considered and calm, and it had to earn trust before anyone set foot in the door.
What the client needed
The head chef and owner approached me to design a web app where guests could browse the menu and book a table. Working solo over two weeks and to a set budget, I framed the work around three core tasks a guest should be able to complete without friction:
- Reserve a table — and know, immediately, that the booking went through.
- Find a specific dish and its price without downloading a PDF.
- Find opening hours, location and contact details at a glance.
Competitive benchmarking
The first step involved a competitive benchmark analysis to understand conventions adopted by competitor restaurants and to gain insight into what they do well.
I looked at a mix of direct competitors (serving Japanese cuisine) and indirect ones, chosen based on what the owner envisions for his own restaurant. Researching what these restaurants do well let me identify strengths to emulate and common issues to address.
- A large range of images gives users an idea of the restaurant and the food it serves.
- Contact details, an address and operating hours should be provided upfront, without searching through several pages.
- A button for reservations should be given importance.
- Buttons and text need enough contrast against the background.
52 respondents, concrete friction
A SurveyMonkey survey, a mix of open- and closed-ended and multiple-choice questions built to take under three minutes, grounded the benchmarking in real behaviour:
27%
Experienced difficulty finding specific content, including a reservation page, operating hours or location.
17%
Thought they had booked a table through an email form, when in fact they had to wait for restaurant management to reply.
6%
Booked the wrong branch of a restaurant with numerous locations, due to lack of proper separation.
6%
Misunderstood menu pricing due to poor menu placement.
Watching the friction happen
To gain deeper contextual insight into how competitor restaurants solved the same problems, I carried out an interview and remote usability tests. Each user completed real tasks across three restaurant websites: finding operating hours, reserving a table for two, and finding the price of a particular dish.
- Users generally choose restaurants with a pre-established good reputation.
- Strong dislike for scrolling through long menus or downloading a separate PDF to view the menu.
- Users often arrive via review sites such as Tripadvisor, then go through to the restaurant's website.
- With allergies or dietary requirements, users dislike having to call the restaurant to check dishes.
No confirmation, no confidence
“I had to call the restaurant right after making a reservation because I didn't get any confirmation.”
Key info doesn't stand out
“It took me forever to find the restaurant's phone number. Finally found it on the homepage but I couldn't see it because it didn't stand out enough.”
Lost between pages
“Wait… what page am I on? Is this a contact page or a booking form?”
Design implications
- Feedback should be given immediately upon submitting reservation details.
- Key details, such as contact details, should be provided clearly and upfront.
- Menus should not be separate downloadable files, should be easy to read to reduce misunderstandings, and should contain allergen information as required by the Food Safety Authority of Ireland.
From data to user needs
With the assistance of a collaborator, all research data was reviewed and written onto Post-It notes, capturing user goals, behaviours, pain points, mental models and contextual information. The notes were clustered into common ideas and categorised into themes in Miro, and I interpreted the groupings with the most consensus into user needs.
Insights
- A clear, easy-to-read horizontal navigation bar is preferred over other forms (e.g. a burger menu).
- A strong liking for images that showcase dishes and the restaurant's interior.
- Users liked a distinct, easy-to-access booking option or button.
- Users have had poor experiences booking tables online.
- Key restaurant information (contact details, address, opening hours) is wanted upfront.
- Menus that are difficult to read or need downloading as a PDF are disliked.
User needs
- Navigate through the website with ease.
- Get an idea of the food served and the ambience of the restaurant.
- Reserve a table efficiently.
- Get confirmation as soon as booking details are submitted.
- Find key restaurant information easily.
- A clear and easy-to-understand menu.
Flows for the three priority tasks
Using the findings, I defined high-level flows for three tasks: reserve a table for two for any date and time; find a particular food item on the menu and its price; and find the opening hours. Mapping these flows required recognising the user's perspective, and helped flesh out the elements they'd interact with and the paths they could take.
Sketching the main screen states
With the flow diagrams complete, I sketched the main screen states in low fidelity with markers and paper, defining how each element responds to interaction, completing ideas quickly and exploring solutions to the issues highlighted in research.
An interactive prototype in Adobe XD
Using the sketches as reference, I created an interactive medium-fidelity prototype in Adobe XD. Mid-fidelity was deliberately the right level: the design doesn't incorporate many detailed areas that require high fidelity, and the reduced palette kept attention on the architecture of each screen, letting me assess usability issues before deciding specific details.
The prototype covers the homepage, reservation, menu and opening times/contact pages.
Wireframes ready for development
The final step made the design ready to build: a detailed set of annotated wireframes describing every unique interaction, removing ambiguity for the development team and protecting the research-backed decisions through implementation.
From the client: "Sakura has been working remotely with me on my company's website and it has been an absolute pleasure… highly organised and very intuitive in her design work. I couldn't recommend working with her enough!"
Research refines decisions
As my first project after completing my Diploma in UX Design, this deepened my understanding of how research refines decision-making to create genuinely valuable designs.
It also gave me real-world practice balancing solutions against a set budget, a tight timeline and specific client requests — and reinforced that a confident first impression is built on evidence, not guesswork.
Like the way I think? Let's talk about your product.