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 webapp.

Project duration

November 2022 (4 weeks)

Project goal

Design Dinecircle's Web app to be user friendly providing clear navigation and ensure users can search for restaurants and book a reservation on the website

My role

Sole UX designer designing the web app from inception to delivery.

Responsibilities

Branding
Visual design
User research
Conducting usability studies
Wireframing
Prototyping
accounting for accessibility
iterating on designs





kickoff: Understanding the mobile app design

I started by thoroughly analyzing the existing mobile app design, Understanding it's functionality, user flow, and key features. focusing on Identifying the mobile app's strengths and weaknesses, and how best to translate it to a web app.

Focusing on our users

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

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.

Adapting the mobile Information architecture

To Begin to translate the mobile app's information architecture to suit the web context. I Considered how the app's content and functionality can be organized into a coherent and intuitive structure for the web app. I Created sitemaps, user flows, and wireframes to plan the layout and navigation of the web app.

Sitemap




Userflow




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 transferring it to our collaboration tool for easy sharing and test with users

Responsive & adaptive design


I Focused on Optimizing the design for desktop and laptop users while also providing a seamless experience on tablets and other devices.





Interaction design

prototype

The 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 web prototype on figma





Landing page






Mobile responsive landing page






Searching for restaurants






Exploring the restaurant page










Payment and confirmation






Accessibility considerations
(1.)

Used sufficient color contrast between text and background to ensure readability. .

(2.)

Ensured that interactive elements are easy to identify.

(3.)

Maintained consistent navigation across the website to help users understand the structure and find their way around.

(4.)

Used headings and spacing to group the related content together.

(5.)

Included images and media alternatives in the design.

(6.)

Ensured that the website is responsive and adapts well to different screen sizes and orientations.

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

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

Next steps
(1.)

Conduct other rounds of usability study to validate whether pain points users experienced have been effectively addressed.

(2.)

Conduct more user research to determine any new areas of need

Lets connect! 👇🏽

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

Thank you for checking out my site! 🙏🏽

© Akin Adeleke 2022|Designer