Case Study:

Aya Restaurant

Project Overview.

The problem:

We are creating a new app for a local restaurant to help consumers with their orders during their busy working schedule, we need to figure out if ordering and scheduling pick up or delivery is easy for the users.

Responsibilities:

User research interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accessibility, iteration on designs.

Role:

UX designer leading the app and responsive website design from conception to delivery.

The product:

The restaurant website was developed for in dining and delivery service for busy working family. It is designed to make easier for families during their busy working schedule.

The Goal:

Design an app for Family Owned Restaurant that is accessible to all users. Focus on the user interface, ordering process, scheduling pickup or delivery, and the payment while enjoying the user journey.

Project duration:

June, 2021 to November, 2021

Understanding the User.

I completed competitive audits, conducted user interviews, and created empathy maps to understand how the users experienced the product. The users confirmed the importance of ordering and delivery experience. Users also had challenges with the navigation process.

Time.

Delivery process to be easy and fast

Accessibility.

Easy access to browse the App

IA

Text-heavy menus in apps are often difficult to read and order from.

Persona & problem statement.

Shelby is a busy business woman who needs faster online food purchase. She does not have time to make a special trip to the restaurant. She wants something fast and easy to use

User journey map.

Mapping Ying’s user journey revealed how helpful it would be for users to have access to a dedicated Aya Restaurant App

Storyboard.

Brainstorming.

Responsive Design.

Sitemap:

I focused on customization flow for the App. My intent was to create an easy and simple flow for users in order to meet their expectations.

Digital wireframes.

The goal of the digital wireframes were focused on how the user would navigate thru the App if they can’t remember what they ordered. The focus was to use better visual that is easy to use and navigate.

Digital wireframes.

The goal of the digital wireframes were focused on how the user would navigate thru the App if they can’t remember what they ordered. The focus was to use better visual that is easy to use and navigate..

Refining designs.

Users needed to understand how the checkout worked with better visual, colors and bigger fonts added.

Usability Study findings.

There were many findings uncovered during the test of the restaurant App flow.

Menu Suggestion:

Food recommendation for new customers that aren’t familiar with the restaurant menu.

Special Selection:

Limited options so users don’t feel overwhelmed. It will allow to have less options for those who want less choices.

Easy Order on the go:

Users like quick and easy ordering process. It is available right on the first screen home page.

Accessibility considerations.

  1. I set typography standards so there is a consistent visual interface and a clear visual Hierarchy.

2. Easier to navigate for people with no knowledge in technology and available for all users.

3. I was able to add high contrast for people with low vision and have difficult time reading

Refined designs.

High-fidelity prototype

My hi-fi prototype followed the same customization user flow as the lo-fi mockup. I will set user flows

for two other items to test additional customization requirements.

Going forward.

Takeaways

Impact.

My audience were able to find easy navigation and flow throughout the App based on the visual detailing and high contrast that was available for users.

What I learned.

Building a website that is accessible and presentable for all users. Having better illustration, visual presentation makes a big difference for helping users navigate the website.

Next steps.

  1. Create another high fidelity Proto type to test more complex design App.

  2. Conduct follow up user testing on website flow.

  3. Introduce graphic illustration for user journey.

Previous
Previous

Manal's Bouquet

Next
Next

Medical Treatment