Project Overview

The Problem

Users often experience difficulties when trying to locate and book restaurant reservations, especially when having to commute between locations. This process can be frustrating and detracts from the overall enjoyment of dining out.

The Product

Dinecircle web app aims to streamline the process, offering users a seamless experience to search for and book restaurant reservations all in one place.

Project duration

September 2022 (4 weeks)

Project goal

Design Dinecircle’s mobile app to provide clear navigation and ensure that users can easily search for restaurants and book reservations within the app.

My role

Sole UX designer, responsible for the entire design process from inception to delivery.

Responsibilities

Branding & Visual Design
User Research & Interviews
Wireframing & Prototyping (Low and High Fidelity)
Usability Testing & Iteration
Accessibility Considerations
Prototyping (low and high-fidelity)
Developer Handover

Research summary: Interviews

I conducted interviews with 10 participants, ages 18-55, including students, working professionals, and entrepreneurs. The key findings were:

Lack of detailed restaurant info

Users struggled to find specific restaurant details, such as price and availability.

Manual reservations

Many users resorted to calling restaurants or visiting in person to make reservations.

No guaranteed seat reservations:

Users felt uncertain after phone reservations and preferred a confirmation system

Limited restaurant discovery

Users had difficulty discovering new or lesser-known restaurants.

Competitor Analysis

I analyzed both direct and indirect competitors in the African market.

Key findings:

Few competitors had dedicated apps or websites.
Most competitors relied on phone or WhatsApp bookings.
Many had cluttered interfaces with unclear navigation.

User Pain Points

Discovery:

Users couldn’t discover nearby or faraway restaurants easily.

Limited Options:

Users lacked access to diverse restaurant choices.

Comparison:

Users couldn’t compare restaurants based on price, distance, or ratings.

Pricing

Users didn’t know the cost of meals before arriving at the venue.

Creating personas

Based on the research, I developed personas to represent the primary user groups

Mariam Nuhu:

An intern seeking an app to explore new restaurants after work.

Chidinma Eze

An event planner needing an app to manage client reservations efficiently.

Daniel James:

I A software engineer looking for an app to plan social outings with friends.

User Journey Map

A detailed map was created to visualize how users engage with the app when making a reservation:

User launches the Dinecircle app and inputs a search or uses automatic location detection.
User browses restaurant options.
User selects a time, date, and number of seats.
User receives a confirmation booklet for use at the restaurant.

Ideation Phase

I created storyboards and wireframes to ideate the user experience across various scenarios, helping to refine the user journey.

Big picture storyboard

Close-up picture storyboard

Paper Wireframes

Initial paper wireframes were sketched to brainstorm design solutions. These were digitized and turned into low-fidelity prototypes to simulate the user interaction and test with participants.

Digital Wireframes

The design evolved based on feedback and findings from user research, ensuring an intuitive user experience.

Prototyping and Usability Testing

Low fidelity prototype

I connected the core flow—restaurant search and reservation booking—into a low-fidelity prototype for usability testing.

View prototype

Usability study

Study type:

Unmoderated usability study

Location:

Lagos, Nigeria (Remote)

Participants:

Five participants across different age groups 18-45.

Duration:

20-30 minutes

Affinity Diagram

I used an affinity diagram to group observations and identify actionable insights for design improvements.

Key Findings

More information needed

Users wanted more detailed restaurant information.

Date & time selection improvement:

Users requested a more intuitive experience for selecting reservation times.

Automatic location detection:

Users preferred automatic location detection at the search stage.

Better navigation

Users wanted accessible navigation throughout the reservation journey.

Design phase

Sitemap

A sitemap was developed to structure the app, improving clarity and navigation based on user feedback.

Mockup design

The design iterated through low- to high-fidelity stages, integrating feedback from usability tests.

Landing page design

Homescreen UI

Growth features

Other screens

High-Fidelity Prototype

The final prototype delivered a clean, intuitive experience, with clear user flows for searching restaurants and booking reservations. This was presented to stakeholders and tested for further feedback.

View Full Prototype

Onboarding on the app

App navigation

Accessibility Considerations

Enhanced Readability

Ensured sufficient contrast between text and background to improve legibility for all users.

Clear Interactive Elements

Made interactive elements easily identifiable to improve usability and reduce user confusion.

Consistent and Intuitive Navigation

Maintained consistent navigation throughout the app to enhance user comprehension and ease of use.
Used clear headings and proper spacing to group related content logically.

Inclusive and Responsive Design

Included media alternatives to accommodate different user needs.
Ensured the design was fully responsive across various screen sizes for a seamless experience.

Key Takeaways

What I learned

Designing the Dinecircle app emphasized the importance of iterative design. Each usability study and feedback session played a crucial role in refining the product and aligning it with user expectations.

Impact

Positive feedback: “The app made it so easy and fun to view restaurants by location and make reservations quickly!”

Lets connect! 👇🏽

Write me a message here!

These are my direct contacts:

Thank you for checking out my site! 🙏🏽