The Strand Restaurant App

Background

Defining the problem

The idea for this project came from my direct experience as a restaurant customer, and then later developed with the help of a few informal interviews, and competitive analysis.
‍
The inspiration for this app stems from a time when I was booking a table to celebrate my mother's birthday. She was really excited to see a jazz performance in one of London's restaurants, and while booking a table online, I left a note asking for a table closer to the stage. Once we got to the restaurant, that request was simply ignored. I understood that in a busy restaurant, a side note like that can easily be lost, or impossible to accommodate. As a result of this experience, I realised that none of the establishments I visited had a truly flexible, comprehensive online booking system that was geared towards the customer. Reflecting on this, I envisioned an app with an interactive map that would allow the customer to choose a table themselves.

Building on that experience, having talked to a few fellow restaurant goers, and researching online, I realised there were a few more gaps in the booking experience that an app could potentially address.
‍
I looked at the biggest competitors apps on the market, main ones being OpenTable, Resy, and TheFork. None of these apps had the flexibility I was looking for, although Resy would allow to choose a section of the restaurant, for example, a terrace or a bar area.

Pain points

User pain points and solutions

In an effort to define the design problem better, and to clarify the vision for the solution, I went into creating a comprehensive list of user pain points, and solutions that the app could provide. To compile them, I used online research, my reflections, interview insights and ChatGPT. Full disclosure - the Interaction Design Foundation says it's cool to use AI tools in user research, so I thought, why not give it a go? Here is the result:

Pain points

Pain point 1: Not being able to reserve a specific table for a special event, a quiet meeting, a night of live music, or just the preferred table that the customer would like.

Solutions

Solution: Create a table reservation system where the user can see the plan of the restaurant, and choose a table independently.

Pain point 2: Lack of personalisation of the reservation, for example adding a special request, including information about allergies, etc.

Solution: Add the option to include a request on the reservation, and have the confirmation that the request has been taken into account.

Pain point 3: Effective communication and transparency for the customers: difficulty checking today's menu, hard to find the concert schedule, no information on dress code, service charges, time constraints (e.g., vacating a table in 2 hours) or other restaurant information.

Solution: To have all this information in the app, and making it very easy to find. The menu will be a separate page, the schedule of concerts and the dress code, too, additional fees (per concert or service fee) will be specified in the booking process, the time limit will also be specified in the booking process. Other information includes promotions, offers, and loyalty program.

Pain point 4: Confusing booking process, especially on a mobile device.

Solution: Make the booking process flow very easy and clear, where the form will be divided into steps, and at each step it will be as simple and clear as possible what the user has to do. There will also be information about where the user is in the process, and how many more steps there are to go. There will also be additional explanatory information at each step.

Pain point 5: Not being able to call the restaurant for any reason (e.g. can’t make or take phone calls at work), but needing to talk to a person if there is a problem or question about the restaurant.

Solution: Have an easy-to-find button that leads to a chatbot, and also have a phone support line for people who prefer calling.

Pain point 6: Lack of booking confirmation, especially for over-the-phone reservations; or it is not clear where to find it.

Solution: Always send a detailed booking confirmation in the app, and send a copy to the customer’s email.

Pain point 7: The only option to book a table is to call, or come to the restaurant in person to choose a table and make special requests.

Solution: Have a handy app where you can book the table you want, hassle-free!

Information Architecture

Creating structure

After the initial research results, and with user pain points established, I created information architecture for the future app. I aimed for not overburdening the app, but including all the necessary information that a restaurant visitor might find useful, as well as would benefit the business. I included the titles of the sections and initial flow of content, as well as writing out functionality for each section. The functionality will not stay exactly the same in the end, but the main structure stood firm throughout the process.

Wireframes + User flow

Iterating on the solution

During the work on this project, I used the method called wireflows - a mix of wireframing and creating a user flow. This approach really helped to save time on iterating, because it makes you think of the user journey and the information on the screen in tandem, sort of envisioning the product in your head as you work. In this case, it took me three iterations to get to the final version of the key flow of the app - booking a table.

Initial flow

The first version of the flow functioned like a mobile form, where the user fills in their information and preferences, and then moves onto the next page. After the initial review, the problem with this flow was the lack of feedback for the user in the middle of completing this form.

How does the user go back and check what they submitted?
How does the user know what to expect in this form?
If the user wants to redo something, do they have to swipe back over and over again?

The upgrade

Based on the feedback, I realised that I have to re-do the flow completely in order to make it more flexible for the user.
The most significant changes that were made:

I've added a filter at the beginning, so that the form adapts to the needs of the user
I have added a list of all the steps, where the user will see what's been completed, and how many steps are left to go
After completing each step, the user can go back to any of the sections and make corrections

Final tweaks

This version of the flow ended up being way more successful, and the final iteration had only a few tweaks:

Making unavailable dates/times disabled by default to remove unnecessary clicks and save time for the user
Adding suggestions before the interactive map, in case the customer doesn't want to select their table, or is overwhelmed with the choices
Excluding the final step of guaranteeing the booking with the credit card from the list of sections. Seeing that step from the get-go can potentially discourage users to complete the form, and could also overloading the list.

Creating the brand

Visual design

As I was thinking about the branding for the app, it was obvious that its visual identity had to stem from the restaurant brand. I started by envisioning what type of restaurant could benefit from this app, and could afford to develop it. It became clear that it had to be a high-end establishment with a demanding clientele, with live music and changing menu. I started by doing research to get inspired, and I focused on New York and London restaurants that fit my vision. Instead of choosing an existing restaurant, I decided to invent one for this project.

Moodboards and inspiration

I looked at a variety of restaurant brands online, and at luxury brands' apps to get the idea for the aesthetic I was going to create. I compiled my findings into a moodboard that helped to guide me in the design process. The key points that I wanted this brand to communicate:

Luxury feel, which is usually communicated by subdued colours, a lot of dark greens and browns, minimal design and high-quality photography
Inviting and exciting, focus on showing interiors, drinks and dishes, live music performances
Naming had to reflect exclusivity and high standard of service

Logo and colour scheme

After some experimenting, I settled on the name The Strand. It's a famous street in Central London, and mimics popular high-end establishments' naming, e.g. The Savoy, The Connaught, The Ritz etc. The logo is a simple wordmark, mainly using the font style to express the luxury feel.
As for the colours, I found that the combination of darker green and gold successfully communicates the feel I was looking for. After tinkering with a few options, and ensuring that the colour combination passes accessibility requirements, I settled on the versions of green and gold below.

Typography

I have chosen two fonts to work with. The logo font, Trirong, would be reserved for very limited use in titles within the app. The main font is Geist, a simple and very readable sans-serif, inspired by Swiss design, but adapted for screen use.
Typescale was adapted to the 8-point grid system to ensure flexibility and scaling.

Full palette

Initial designs

Some of the first UI designs after the development of the visual identity.

Prototyping

Bringing the design to life

I had a lot of fun building the prototype, and I'm really proud of how it turned out. Not all the sections of it are live, but it gives a good overview of the look and feel of the app.

Testing

Finishing touches

The prototype was tested within our peer group as part of the course, and with a few people in my network. I didn't have the capacity to do a formal usability test, but even with the limited capabilities, the results were really illuminating. One of the respondents gave me really valuable feedback about the interactive map details - why not include the location of the restrooms, the bar, the kitchen entrance? For that person, these were really important factors while choosing a table. I thought it was a fantastic point, and I included all these elements on my map.

App Store

Marketing the app

While thinking about how to present the app in the App Store, I decided to focus on the main features that made the app stand out from the rest - the adaptive, tailored form, the interactive map; and also the potential gains for the user - the rewards, and latest news and specials. As I was basing my design on the iOS guidelines and native patterns, creating the App Store slides was a natural fit.

Conclusions

What I learned

This was an absolutely delightful and illuminating project to work on. While developing the app, I have learned an incredible amount of practical interface design skills that I'm eager to apply and expand further.
‍
My biggest takeaways were:

The real understanding of the UX design process, specifically for mobile apps, and how to always keep in mind the potential expansion of the design system.
The incredible value of research, user interviews, user testing and iterating on the solution. Making assumptions can prove very costly, so every decision should be verified with the real users.
The biggest shoutout goes to my course curator Lilia - your invaluable expertise and guidance made this project what it is, and I learned more from you in 2 months than I could ever imagine.