Jakub Kraus | Product Designer

Resevo

The Future of Effortless Booking

Jakub Kraus

08/2024

Agenda

Project overview

Part 1

Introduction

User research

Problem statement

App features

Goals and project scoping

Part 2

Targeted impact

My role

Design process

Part 3

User Flows

Rejected concepts

UI design and Design system

Project overview

Part 1

Introduction

User research

Problem statement

App features

Goals and project scoping

Part 2

Targeted impact

My role

Design process

Part 3

User Flows

Rejected concepts

UI design and Design system

Project overview

Resevo is a concept app I designed to revolutionize the user experience behind booking dining, activities, and rentals.

It offers a seamless, personalized, and reliable experience through intuitive features like 360° tours of the place, direct table selection, and easy booking management.

Explore how Resevo transforms the reservation process into a delightfully simple and easy experience.

Introduction

I conducted research with 26 users and several business owners on Booking.com, The Fork, and OpenTable to understand their experiences and challenges with these platforms.

I analyzed the responses and identified key pain points

From there, I created user flows to solve these issues.

User research

Want more user friendly UI in booking app

25%

Of business owners want improved booking management

75%

*Don’t know where to book certain places or activities

75%

Of respondents stated that they have a problem with booking’s complexity

83%

Are confused in selecting the right places to visit

50%

*The problem is that each platform offers bookings either for restaurants OR activities. Also not all of the businesses are on every platform and it makes a confusion for users.

Resevo aims for unifying under just one app

I conducted research with 26 users and several business owners on Booking.com, The Fork, and OpenTable to understand their experiences and challenges with these platforms.

I analyzed the responses and identified key pain points

From there, I created user flows to solve these issues.

User research

Want more user friendly UI in booking app

25%

Of business owners want improved booking management

75%

*Don’t know where to book certain places or activities

75%

Of respondents stated that they have a problem with booking’s complexity

83%

Are confused in selecting the right places to visit

50%

*The problem is that each platform offers bookings either for restaurants OR activities. Also not all of the businesses are on every platform and it makes a confusion for users.

Resevo aims for unifying under just one app

Problem 2

Business owners usually struggle to manage their bookings and listings

With Resevo, they can easily handle reservations, optimize availability or update current menu — all in one place

Problem 3

Complicated and long booking flows which reduce conversions

Resevo offers really simple and easy way to book with additional features like direct table selection

Problem 1

Users often juggle multiple apps and websites

Resevo aims to unify this process into a single, user-friendly app

Problem statement

Where would you like to sit?

360° Tours, fully integrated in Resevo, allows you to explore the place and make a reservation for a specific table

Filling out long forms? Of course not!

Once you set up your account, you no longer have to worry about filling out your personal informations in order to make reservations

Just choose a time, and you’re ready to go

Ran out of places to visit?

Resevo’s homepage is always filled up with amazing places to visit or you can easily explore places near you with built in map

Goals and project scoping

Goal 2

Unified experience through an all-in-one platform concept

Goal 3

Higher customer flow for businesses

Goal 1

Boost user engagement and simplify booking flow

Targeted impact

Planning out user flows

To make the user flow as much time effective and effortless

Sketching wireframes

Designing basic app structure to optimize funcitionality

UX Research

User + market research, defining problems and opportunities

High-fidelity UI app design

Creating visually appealing and user friendly components

User testing and revisions

Collecting feedback and refining the app based on it

Design system development

Uniting design language across the whole app

My role

Design process

I would like to introduce you to my design process, which begins with planning the user experience.

This involves creating a diagrams that illustrate the various paths users take when attempting to complete tasks within the app, such as making a booking.

My goal is to create an intuitive and efficient experience, allowing users to complete tasks quickly. By mapping user paths, I aim to reduce friction and improve usability, which can lead to higher conversion rates

User flows

Onboarding flow

First touches with the app

Home screen

Introducuction of the user

Feature showcase

Welcome screen

START

“Hey, could we get to know eachother?”

Asking for the user's name creates a welcoming atmosphere, making them feel as if they are meeting the app.

This personal touch sets the stage for the app to also introduce itself by showcasing its features.

Doesn’t require making an account

This decision eliminates friction as users familiarize themselves with the app. With that approach, they can explore the app freely, until they are ready to make a booking.

Discovery flow

Exploring places to go to

Home screen

START

Do you know what

you’re lookin for?

yes

Open search

Scroll down

Searched

Search result

For you page

Homepage tailored just for you

Resevo seamlessly customizes your homepage, making your experience more relevant and personalized.

Community based rankings

Users can provide rankings and reviews making it easier for others to find the best places.

Looking for something specific?

Resevo’s filtering system enables users to refine searches by cuisine type, price range and more, displaying results in both list and map views for optimal navigation.

Booking flow

The easiest booking solution

START

Restaurant page

Are you signed in?

yes

Choose date and time

of your reservation

Booking setup

Choosing table (optional)

Booking details

Signing-in error

Signed in

Simple and private

Resevo remembers your personal details so you won’t ever need to fill them out again, which simplifies booking process, as only the time needs to be selected.

Want that perfect table with the view?

It's as easy as selecting your spot in the 360° Tour of the restaurant.

Accessible booking’s QR code

View all your bookings with QR codes for confirmation or add them to your device’s wallet app for even easier access.

Rejected design

Final design

After basic internal testing, I identified several issues with the initial design. The layout lacked clear hierarchy, overwhelmed users with unnecessary information, and the text within the cards looked like buttons, misleading users to think they were interactive.

In the new design, I removed the unnecessary button and adopted a familiar interaction pattern like Instagram Stories, where users tap to navigate. This creates a cleaner environment, free of distractions, allowing focus on the content.

Rejected concepts

Rejected design

Final design

The first design wasn’t bad, but with a few adjustments, I made it more accessible and convenient for users.

I prioritized two frequently used options and made them separate buttons for faster access, redesigned the menu as a sliding card for easier and more intuitive navigation, and simplified the profile section by removing redundant elements and improving readability.

Rejected concepts

Rejected design

Final design

The original design made the search experience confusing and inefficient. I redesigned it by improving the hierarchy, adding image previews, and including key details directly in the results. This reduced friction, provided more context, and created a clearer, more user-friendly experience.

Rejected concepts

The UI design of Resevo focuses on creating a clear and structured experience for users, emphasizing ease of navigation and accessibility. Key elements include a modular design system with consistent typography, spacing, and components, ensuring uniformity across the app. Interactive features, such as virtual tours and table selection, are seamlessly integrated to enhance usability without overwhelming the interface. The design system prioritizes scalability, enabling future updates or additions while maintaining a cohesive look.

The design is characterized by its clean and minimalistic aesthetic, where every detail is intentional and contributes to the overall usability.

UI design and Design system

Modularity and cohesion