Project overview

Problem

Many users struggle with the hassle of finding and booking a seat reservation at a restaurant, particularly when they have to commute to different locations. This can be a time-consuming and frustrating experience that detracts from the enjoyment of dining out.

The Product

Our aim is to address this problem by providing a seamless experience for users to search for and book a seat reservation at a restaurants, all in one place with Our Dinecircle app.

Project duration

September 2022 (4 weeks)

Project goal

Design Dinecircle's Mobile app to be user friendly providing clear navigation and ensure users can search for restaurants and book a reservation in-app

My role

Sole UX designer designing the app from inception to delivery.

Responsibilities

Branding
Visual design
User research
conducting interviews & usability studies
Wireframing (paper and digital )
Prototyping (low and high-fidelity)
accounting for accessibility
iterating on designs





1. kickoff: Empathize/ understand phase

At this stage, in order to build a solid foundation for this project, I focused on understanding the context for the existence of this product, where i engaged key stakeholders to understand more about the business goals and strategic value propositions focusing on some key areas like the vision for this product, goal for the business, Our Users, target market, and the Problem we are trying to solve.
understanding these business needs helped us to create a consensus around what the product will be and how to match our user and business needs.

User research summary
interviews

I conducted interviews with 10 individuals ages 18 - 55 who were either students, working professionals or enterpreneurs, and I asked questions to understand their past and current experiences with restaurants. Below are a sample of the questions that I asked during each interview:
1. How would you describe your past and current experience with restaurant reservations?
2. How do you normally get to book a reservation at restaurants?
3. Is there any way your current reservation method isn't supporting your needs currently?
4. If you had a question regarding your booking reservation, do you know who to contact?
5. If yes – how do you know?
6. If no – how would you go about contacting someone?
7. Do you or did you in the past use websites or any resources for booking a restaurant reservation?
8. Is there anything you often look for online to book a reservation that is missing or hard to find?
9. How often do you use or see yourself using a website or application to book a reservation?
10. What devices do you typically use when searching for a reservation?


The key findings were:
- Users are not able to get specific information about different restaurant and prices
- Many users search online to get phone numbers of restaurants and call them to book a reservation
- users do not have a guaranteed seat reservations from calling restaurants online.
- Users usually have to commute to different restaurants to book reservation if they find a restaurant online.
- User struggle to find time to commute to different places to know more
- Users Spend more due to only having information about popular restaurants
- Most users are not aware of any app or website to book a restaurant reservation in Nigeria

Competitor Analysis

I conducted a research online to review direct and indirect competing companies playing in the same space in the african market to identify what they're already doing and identify what user goals they were not reaching.

My key findings were:

The majority of the features between the competitiors were very similar, however the main differences that we noticed were:

(1.) Many do not have websites/ mobile apps

(2.) Many focus on phones numbers and whatsapp messages to serve their customers.

(3.) Distracting interfaces and difficult to find useful information.

(4.) Many operate with their physical stores only - no focus on digital platforms

User research: Pain points

I Focused On Drawing Insights From The Data Collated From Users During The Research Phase TO identify the user pain points users are currently experiencing And Create User Personas, User Journey Maps To Clearly Articulate the User Beliefs, Attitudes, Needs, and To Discover How To Address And Improve. Discovery

Users can’t discover new restaurants nearby or far away.

Accessibility

Users don’t have access to a multiplicity of restaurant options to select from.

Comparison

Users can’t view different restaurants according to price, distance, ratings and others to select their most preferred option or compare them.

Pricing

Users didn’t have the idea of the lowest cost per meal of restaurants before getting to the venue.

Define phase

User Personas
Persona: Mariam Nuhu

Problem statement: Mary is an intern who needs an app to discover restaurants to visit after work because she wants to explore her lifestyle and enjoy her youthful days.

Persona: Chidinma Eze

Problem statement: Chidinma is a professional event planner who needs an app to manage her reservations for her clients because he doesn’t want to commute to so many different places to book reservations.

Persona: Daniel James

Problem statement: Daniel is a software engineer who needs an app to explore restaurants and plan dates with his friends because he wants to have a better social life and have fun.

User journey map

I Developed a User Journey map to Focus On The Experience Of Users when Making a reservation

(1.) Craig launches the Dinecity app and decides on whether to input search of use automatic location.

(2.) He then sees a list of restaurants to select from.

(3.) He chooses a time, date and number of seats before submitting to make a reservation.

(4.) Craig sees a confirmation booklet and takes it to the restaurant for confirmation upon his visit

Ideate phase

Designing Story boards

I designed Big picture and closeup storyboards to ideate how the user will engage with the design across the user journey


Paper Wireframe

I Began to Sketch out the Paper Wireframes To Ideate And Brainstorm How The Design Would Look Like And To begin to Visualize The Design Solutions Before Deciding Which One To Go With.
Then I Focused On Creating Digital Wireframes And A Low Fidelity Prototype To Simulate The Actual Interaction Experience to Test With Users To Get Early Feedback.

For the home screen, I prioritized a quick and easy ordering process to help users save time.

Digital wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research

Low fidelity prototype

The low fidelity prototype connected the primary flow of searching for a restaurant and booking a reservation, so the the prototype could be used in a usability study with users

Test the Dinecircle app's low fidelity prototype on figma

Conducted a Usability study on the low-fidelity prototype

I Conducted Usability Test Sessions To Gather User Feedback On Both The Low And High Fidelity Prototypes. I focused on Identifying the Sources Of User Error And Frustration, User Pain Points, And Areas Of Delight to quickly Identify And Implement Modifications To The Prototype To Improve The overall Interaction Of The Product.

Study type:

Unmoderated usability study

Location:

Lagos, Nigeria, remote

Participants:

5 participants

Length:

20-30 minutes

Afinity diagram

I used an afinity diagram to sort my observations by similarity.

Insights

Identified Actionable insights from the Afinity diagram

findings:

Users need more information to decide which restaurant to select.

Users need a better experience when selecting the date and time for their reservation.

Users need automatic location detection at the initial search for restaurants.

Users prefer more and different search options

Users will have a better experience if the navigation menu are accessible throughout the booking journey

Sitemap

I Created a sitemap to clearly identify the layout structure of the app based on the stakeholder And user feedback

Design phase

I Iterated On The Low Fidelity Design Based On The Early Feedback From From Users And Converted All Low Fidelity Desgn Assets To Create A High Fidelity.

Based on the insights from the early usability test and improved sitemap, Some Key improvements were made:
1. Search experience: Users will have a better experience by having different search options unlike only the manual input option before the study.
2. Navigation experience: Users now have the navigation bar on each of the menus from the homescreen across the design to have an easy access to navigate across the app.






Mockups
























High-fidelity Prototype

The final high fidelity prototype presented cleaner user flows for searching for restaurants and booking a reservation.




Onboarding on the app




App navigation




Booking A reservation

Test the Dinecircle app's high fidelity prototype on figma

Accessibility considerations
(1.)

Provided sufficient contrast between foreground and background.

(2.)

Ensured that interactive elements are easy to identify.

(3.)

Provided clear and consistent navigation options.

(4.)

Used headings and spacing to group the related content together.

(5.)

Included images and media alternatives in the design.

Going forward

Key Takeaways
What I learned

While designing the Dinecircle’s app. I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

Impact

Positive user feedback: One quote from a user: “The app made it so easy and fun to view restaurants by location and make reservation quickly!

Lets connect! 👇🏽

Write me a message here!
These are my direct contacts:

Thank you for checking out my site! 🙏🏽

© Akin Adeleke 2022|Designer