top of page

Zing App

A menu navigation system redesign aimed at providing a more intuitive ordering experience.
Product Design
Client Work
Mobile App
UX Design
My Role
Project Lead, UX/UI Lead, Animator, Illustrator
Team
Moxie Method
Zing: Developers, PM
Timeline
: 6 weeks
Background
Zing is a food and beverage delivery service company based in New Jersey, offering items like pastries, coffee, and tea. Its business aims to operate as a mobile coffee shop that can go wherever customers request.
Project Overview
As a result, Zing faced the following problems:
  1. Misleading navigation because of repetitive UI elements that connote the same action.
  2. Prolonged browsing due to excessive taps to reach a goal.
  3. Non-standard format of navigation systems leading to user misuse.
Problems Zing Faced
When Zing first launched its mobile app, the company didn’t have enough time to fully design the ordering flow. Thus, it used a third-party app to generate the needed screen flows.
Problems with the Old Design
A couple of week after Zing’s first launch, its founder was getting a lot of feedback about the use of the app. The customers were having issues with navigating the app, including accidentally closing the entire ordering process due to confusing the ‘X’ icon as a back button.

In addition to customer feedback, I conducted a UX audit of the app to make sure that all other issues can be addressed.
The Process
Redundant UI
UI components that repeat misleads users into taking an action they did not wish to take. Below is an example of how users would make these errors.
The Solution: Redesigned Menu Navigation
Updated Menu Details
  1. Using one icon to represent the action of returning to the previous screen.
  2. Category navigation that looks like tabs and not like buttons.
  3. Faster reach to individual items using vertical and horizontal scrolling.
Investigating Existing Solutions in Other Apps
After noting down the underlying causes of the navigation issues, I conducted a UI competitive analysis of the Starbucks app and the Blank Street app. Doing so expedited my process by providing inspiration from existing effective solutions.
Competitors' Approaches
1. Starbucks: Combination of horizontal and vertical scrolling reduces page scroll length.
2. Blank Street: Category tabs for quick scrolling between multiple categories.
Unfamiliar Navigation System
The founder of Zing informed us that customers were not using the category buttons for navigation because of the layout of this navigation. Buttons are not typically used for navigating items on the same page.
Long Path to Individual Items
It takes customers more than 2-3 taps to reach an item on the menu. Additionally, this collapse and expand model led to a very long menu scroll.
Wireframes: Applying Layout Inspirations
I created a number of wireframe layouts to show the breadth of how the navigation of the menu could be optimized. My primary goal for the layout redesign is to shorten the path(s) users will have to take to reach their goals.
Wireframes
Iteration 1: Reducing Scroll Length
  • Minimized scrolling by reducing the size of individual picture elements.
  • Uses inner pages for each category instead of an expand/collapse function.
  • Utilizes category tabs for quick navigation.
  • ‘Back Button’ and ‘X’ icon are replaced with one back icon arrow.
However, the user still needs to tap too many times to access an item.
Iteration 2: Adding Shortcuts for More Direct Actions
  • Keeps menu items visible, reducing the taps required to access them.
  • Users can add items to cart without having to open the item.
However, displaying all items on one page results in a long scroll, increasing the time it takes for users to find what they want.
Final Wireframe Iteration: Shortens Path to Individual Items on the Menu
  • Uses the combination of horizontal and vertical scrolling to further reduce the scroll length.
Previous Design​
Final Layout
Final Layout
  1. Category tabs using anchors as navigation​.
  2. Use of horizontal scroll reduces vertical scroll.
  3. Kept the pricing and quantity adjustment.
Design Explorations
I developed several designs to explore the different ways Zing’s branding elements can be used on the menu screen. I wanted to make sure that the design aligns with Zing’s brand guidelines and is clear on which components are interactive.
Design Iteration 1
Trying different Color Schemes
After months of working with Zing’s founder, I’ve learned that he believes more color means more attractive. In the three designs below, I explored color combinations to show that bold colors should be used selectively, not throughout the entire screen.

The founder and I agreed that Option A best matched the color treatment of the rest of the app.
Option A
Option B
Option C
Design Iteration 2
Limiting strong colors to important action items
In this round, I focused on using strong colors only for action items and important information. Additionally, I added icons to each category heading to match the feel of ‘fun’ of the rest of the app.

The founder and I agreed that Option A catches the eye more, helping users to differentiate user actions and important information (like the item price).
Option A
Option B
Option A
Option B
Design Iteration 3
Different tab designs and adding background elements
To add a fun element, I used Zing's spark icon instead of lines for category tab selection, added a touch of orange to category icons, and included background elements for a splash of color.

The founder and I discussed how Option A's tab design allows more room for visual elements, enhancing its appeal while maintaining a clean look.
Option A
Option B
Option A
Option B
The final design was integrated into the app by Zing's software developers and rolled out with the second launch.
Impact
Zing’s original ordering flow lacked clarity in navigation and visual consistency. The new navigation system:
  1. Shortens path of user action by displaying all menu items, reducing scroll length through horizontal and vertical scrolling, and promoting the use of the category tabs for quick navigation through the menu.
  2. Unifies the ordering flow with the rest of the app by utilizing visual elements from Zing’s brand identity.
Design Iteration 4
Adding icons to the category tabs
I added the same icons from each category heading to the category options on the tab. I also created another option that has all the icons on the tab but none on the category headings themselves.

We selected Option A because the tab design was less distracting since the inactive category titles do not have icons next to them. We kept the icons next to the category headings because it helps each heading to ‘pop out’ more.
Option A
Option B
Option A
Option B
  1. One icon for selected tab option & one for each category text.
  2. Placing sparks here is less distracting.
  1. One icon per tab option & none for category text.
Final Design Iteration
Adding Fun Fact cards and a 'View Order' Button
Lastly, a “Fun Fact Card” was added to the end of every category scroll. This was done to increase user engagement and give them something interesting to learn about after scrolling through a category. I also set the ‘View Order’ button to be in a fixed position so that users will always have access to it.
  1. Fun Fact cards at the end of every category.
  2. A sticky (fixed position) View Order button.
Fun Fact Cards
bottom of page