Mobile App Navigation Overhaul

Project Overview

The Starting Point

Bearing in mind our two main goals, we took a critical look at the existing menu. At a glance, Shop appears buried amidst several library management items and its place in the navigaitonal hierarchy is unclear. Join Pro is tucked between Settings and Help all the way at the bottom of the menu - making this key driver of recurring revenue feel more like an afterthought. Go ahead and scroll down to find it...

Typographic hierarchy is non-existent. Jagged indentation and random gray/white zebra stripes further undermine any sense of structural hierarchy. Enabled, disabled, and selected states are hard to discern. There's no space between separate feature sections. A few icons have been included, one of which is actually a logo, another of which is just the letters PDF again. There were lots of opportunities here.

Mapping Things Out

Setting aside layout and styling for now, we wanted to unjumble these menu items and get a clear sense of the structure of this app so we could help users create a mental model that matches it.

It turns out to be quite simple. Our users can:

• 1. Access and organize music they own
• 2. Buy more music
• 3. Join the Pro Membership program
• 4. Update their app settings

Translating it to the UI

How could we bring this simple clarity to the interface in a way that helped users understand these four main app areas and their related sub-areas?

Sketch #1

The idea: Early sketches provided the sub-nav items in a scrolling menu on their respective parent screens and kept everything else in roughly the same place in the main nav drawer.

User testing feedback: This brought more clarity to the overall mental model users had for app navigation. However, some people missed the granularity that the sub-nav items provided in the legacy design.

Sketch #2

The idea: We reintroduced the sub-navigation items to the menu, but sought to make the hierarchical relationships clearer with layout and styling.

Internal review feedback: This focus on visual hierarchy feels like an improvement to usability, but we aren't really solving the business goals, namely: to reimagine navigation in a way that promotes in-app shopping and membership sign-ups. Plus, this still isn't a clear representation of the app map - Recently Viewed and the Organization features technically belong under My Library.

An Aha! Moment

The insight: Top-level navigation only includes four (4) items. This could fit easily across the screen in a persistent bottom-nav.

Why it works: It's a more modern and familiar pattern to users. It exposes Shop and Pro with the same clarity as Library. With the new horizontal sub-navs on the parent screens, it amounts to the same number of interactions for users to reach available actions within these parent areas.

Mid-fi Wireframes

The new design began to crystallize in some mid-fidelity wireframes and simple, linear user-flow prototypes.

Developer consult feedback: We'd need to add some back buttons to accommodate the new navigational drill-downs. Early sketches included a global search feature in the bottom nav, but we decided that was out of scope, and instead included the Settings menu item in its place.

High-fi Mockups

We addressed some accessibility, styling, and branding opportunities in responsive high-fidelity mockups.

Handoff

The simplicity of these new top and bottom nav components made handoff a breeze.

Results

Since these updates went live, customer feedback around usability has been very positive.

Pro Membership Sign-ups and Sheet Music Sales have both seen major bumps in our mobile apps and continue to rise!