Linkedin Icon Github Icon Left ArrowArchive Hamburger Icon

Project Members

Anthony Jasper

My Role

UX Designer

Project Tools / Sources

Figma, Adobe xd, Spreadsheets

The app will provide assistance to the BBQ restaurant customers when they order online delivery. It will allow the restaurant to connect to audience members who are unable to travel as well as target some of the younger audiences by targeting mobile users.

Time

1st Priority

Accessibility

2nd Priority

Information Architecture

3rd Priority

Personas

Problem Statement: Chloe is a nurse who needs access to accessibility tools for seeing impairment because they suffer from dyslexia and visual impairment and are a must for her everyday.

design snapshot of the persona

User Journey Map

Mapping Chloe’s user journey revealed how helpful it would be to expand and provide users with more assistive tools and to reduce the amount of information.

design snapshot of the user journey

Competitive Audit

Storyboards

design snapshot of the closeup storyboard design snapshot of the bigpicture storyboard

Digital Wireframe / Low-Fidelity Prototype

The low-fidelity prototype connected the primary user flow of accessing their orders and getting updated on its progress. This prototype could then be used in a usability study with a few users. View Prototype on Figma

design snapshot of the wireframing

Research Plan

Usability Study

I conducted two rounds of usability studies. The first found 3 key issues that helped the designs from wireframes to high-fidelity mockups. The second usability study was used for the high fidelity prototype and revealed an aspect that needed refining.

Insights

Pattern Identification

  • 4 out of 5 participants expected the hamburger menu to work. This means that most users look towards the menu first when trying to navigate.
  • 3 out of 5 participants found it difficult to see the bottom-bar at first glance. This means that not everyone is used to the quick mobile app menu.
  • 5 out of 5 participants found it easy to use and navigate the app with the bottom-bar. This means that once the bottom bar menu is discovered, users like this way of navigating
  • 3 out of 5 participants expected the progress bar to be interactable. This means that using icons to represent the stages of their order could be confusing to some users.
  • 2 out of 5 participants did not like how you navigate to the map section. This means that some users were unable to find the map quickly.

Insight Identification

  • Most users look towards the menu first when trying to navigate, an insight is: for the users to have everything in the bottom-bar also available to them in the hamburger menu if they are not familiar with app navigation.
  • Not everyone is used to the quick mobile app menu, an insight is: users need a better way to identify it at first glance.
  • Once the bottom bar menu is discovered, users like this way of navigating, an insight is: Users need to be made more aware of this feature to speed up their process.
  • Using icons to represent the stages of their order could be confusing to some users, an insight is: users need a better way to understand what they can interact with.
  • Some users were unable to find the map quickly, an insight is: users need better cues to how to navigate on self-updating pages.

High-Fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for accessing your orders and the tracking information. It also met the users need for assistive tools being provided at the forefront of the app. View Prototype on Figma

design snapshot of the wireframing

Case Study