Improving a user’s journey to order

The Goal

This project aimed to improve the user’s experience when placing a mobile food order. While performing a site audit, our team identified hindrances to adding items to a user’s cart. With this in mind, we believed redesigning the Menu and individual Product Detail Pages would improve and increase placed orders.

The Team

1 mobile app product designer (myself)

1 web product designer

1 user researcher

1 strategist

Specifically, I focused on redesigning the Menu and Product Detail Pages. I then passed off the designs to the teams researcher to test.

The Process

To begin, I performed an audit of the app to both familiarize myself with the designs and to identify where there may be areas for improvement. Once that was complete, I shared the findings with the team and we discussed what would be most impactful to focus on.

Audit Findings

The audit of the mobile app helped us to identify 3 areas of focus:

  • Inconsistencies in the design

    • These include inconsistent spacing, fonts, font sizes, button use, and overall patterns.

  • User hindrances in moving forward with a task

    • This was specific to the designs itself. User testing helps identify these hindrances prior to pushing new designs into development.

  • Streamlining navigation

    • Navigation goes hand in hand with the users’ overall usability of a product. Having clear flows and obvious paths enables a smooth journey for a user to complete a task. Designing for the one-off is important, but should not be the main goal of the design.

Focusing in

The team reviewed the audit together and agreed with the findings. A checklist was created to update designs for consistency and to ensure all future work followed the same guidelines.

Next, the team focused in on a key area that was both hindering a user’s ability to complete a task as well as challenging navigationally.

While there were many updates that stemmed from this audit, like updates to using rewards, viewing your cart, and checking out, this case study will focus on the Menu.

The Menu’s Current State

The current state of the Menu allows for beautiful imagery (and let’s be honest- eyes eat first) but as far as designing for a user to complete a task, the value of information is more important to a user than images. Currently, the user can see a few Menu categories but once the category is tapped, a user can only see one item above the fold.

The Work

The updated design enables users to see more of the menu by stacking the categories. Once the user clicks into a menu category, the items within that category continue with the stacking pattern. This is also a familiar pattern that hints at more categories below the fold. Instead of seeing one item per page, users are now able to see 5+ depending on their device.

Next Steps

The team tested and iterated on the designs and found that the updated design improved a user’s journey to order by simplifying the view, easing the navigation, and allowing for more items to be visible.

This design is now in development to be pushed to the app next year.