Creating and Design

From wire framing to actionable design, creating next steps

Our aim was twofold:

to make menu items easily accessible and visually appealing while ensuring they weren't intimidating. We experimented with various designs and settled on one that presented comprehensive information in the simplest and most user-friendly manner.

Alongside vibrant images

We made sure that food descriptions and selections in the cart were intuitive.

Online Services

It was imperative that we improved the design, flow and speed of the cart. In the process reducing abandon carts by 18%.

UX Page

The Development

Using design sprints and discussing the functionality between the ideas we came up with the basic layout below.

What is the Change:

Redesigned the menu structure to feature a standardized hierarchy with consistent labels (e.g., unified “Specials” across all pages) and a tabbed layout with filters (e.g., “Vegetarian,” “Gluten-Free”).

THE MOCKUP

We provided food description and nutritional details. The prior progress page displayed a static icon indicating the time of completion. I revamped it to allow users to set food completion and delivery times, along with an added feature for chat notes if necessary.

- Implementation: Created wireframes and high-fidelity designs in Figma, using a clean typography style (Roboto) from the design system (inspired by Google’s Material Design, as per customer request). Added dropdown menus and search functionality to enhance accessibility.
- Visual Enhancements: Used Adobe Photoshop to design vibrant menu icons and banners, improving visual appeal for James’s exploration needs.
Rationale: The usability study showed 60% of participants struggled with inconsistent labels, validated by a 35% bounce rate in Google Analytics. Journey mapping highlighted Sarah’s frustration with navigation delays and James’s need for clear categorization.
Persona Alignment: Addressed Sarah’s goal of quick ordering by reducing navigation steps and James’s need for intuitive exploration by adding filters.
Impact: Post-iteration testing reduced menu navigation time by 40% (from 2 minutes to 1.2 minutes), and Google Analytics showed a 15% decrease in bounce rates. SurveyMonkey feedback rated menu usability 4.2/5, up from 3/5.