Role
User Research
Product Strategy
UI Design
Interaction Design
Usability Testing
Tools
Figjam
Notion
Maze
Figma
Otter
Timeline
5 weeks
The Problem
Currently, the OpenTable app does not provide any connectivity with social networks; The primary issue is the users' need for more trust in the review section. Consequently, user retention is low, and the User Experience could be better.
The Solution
Studying the user's and business goals, we came to the conclusion that incorporating social media interactions through a simple import contact option would enable users to see what their contacts reviewed on the app previously and make their own comments visible to their network, creating interaction between them inside the app. This simple method, plus our enhancement of the app's usability, focus on progressing in the already existing layouts without making users lose familiarity with the rest of the app functionalities.
Usability Review
We performed a usability review to analyze the current app's ease of use and friction. Considering the user's needs and goals, our user statement helped us create empathy and understand our potential users.
Business & User frustrations
Busines' frustration is the impossibility of retaining and creating fidelity among users and attracting new ones because of the unavailable connectivity with social networks. The user's frustrations with the app are the confusing layout and color selection on several components.
Primary Frustration
The primary frustration is a combination of the users' and the business's pain points: the inability to create interaction and trust in the app reflects on the users' experience. It feels uninviting to use the app again, disregarding its efficiency.
Secondary Frustration
The layout, color, components, and lack of consistency created confusion about the app's usability. The overall User Interface must be improved.
Competitor Benchmarking
With the identified issues in mind, we analyzed direct and indirect competitor products focusing on reservations, restaurants, and reviews. We intended to find inspiration for improvements or additional flow elements and to reveal possible solutions or even common standard patterns for the problems in the current user flow.
Problem Space
The problem identified is a mixture of a lack of functionalities and confusing color layouts in the process, compounded by inconsistent use of navigation elements and communication, as well as unnecessary steps to fulfill a simple task. As a result, users might not understand how to navigate the app, waste time, and feel insecure about the effectiveness of the app's main functionality.
From this problem space, we formed "how might we" statements as a starting point for iterating initial solutions:
How might we provide more orientation and clarity to users on how to book a table seamlessly?
How might we enhance the review section to create trust in our users?
How might we improve the app's usability metrics?
Ideation
To uncover a broader range of ideas, we created a mind map of what we could improve or add, followed by a crazy 8s session to generate unusual ideas, to bring the written ideas to a visual level. After this, we used a priority matrix to select the most relevant ideas.
What can we add
To import contacts from either phone or social media.
The ability to send Promo-codes.
To share your reservation with your friends and invite them to the party.
What can we improve
Add pictures to the existing review section.
New filter option: to see my friend's reviews first.
The number of steps necessary to complete the app's main functionality
User Flows
After ideation, we created a user flow diagram of the current experience and built an improved version, integrating our previously outlined ideas into the flow. This gave us an overview of the wireframes we needed to create and also allowed us to identify redundant screens that had delayed the flow to complete tasks.
Rapid Prototyping
Wireframing the flow made us aware of each step of the enhanced experience and gave us a detailed overview of the required screens, elements, and components.
Styles & Components
Following the Atomic Design method allows us to create a library of interactive components. By using component properties, we sped up our workflow and easily created reusable and adjustable components. Every component we add to our interface has a state: Default, Hover, Focus, Inactive, etc. It's important that we design each state to give users feedback.
The primary palette is complemented by status colors, which are in harmony with the primary. We have also carefully chosen shades of gray that extend throughout the application. Testing the text color with the primary according to the WCAG guidelines.
We followed the app's existing text font selection.
Using a 4 column grid across mobile allows for our content to easily span and consistently remain spaced. Additionally, we follow a 4px grid system to ensure the content of our interface follows a consistent spacing rule.
High Fidelity Prototype
Unlike our low-fidelity prototypes, our goal with our hi-fidelity prototype is to set the standard for our design workflow. We should strive to be pixel-perfect with every design we create to hand over our designs to developers so they can easily convert our design into code.
Usability Testing
During our testing phase, we decided to go for unmoderated testing to collect qualitative and quantitative user data with specific feedback in a short amount of time. This allowed us to validate and measure the high-fidelity prototyping we designed with a low-cost approach.
Test outcomes
Having tested the prototype, we learned that users would like feedback about why and how we will use their social network information, which should contribute to our business goal of improving trust in the app to retain, get new users and improve their experience.
Three key learnings
1. Some users would like to have an explanation about how are we going to use their contacts information
2. Some users felt a bit confused in the review screen when filtering friends reviews
The new user-flow works very efficiently
Next steps
If we had more time to iterate, we would address this issue by creating a short information screen before giving the option to import contacts, showing the users a preview, why it could be a good idea to import contacts and a link for our privacy policy.
Also, ideating a solution for the "friends" section and the filtering options.