Shrinking navigation bar

Role

Product Designer

Tasks

Concept

Prototyping

Documentation

Testing

Introduction

For the Consumer Apps platform, we are always searching for ways to innovate and make the experience even better for the users. The category bar is the #1 way to navigate through the app and find items that you like. But with mobile phones getting bigger and bigger, the category bar at the top of the screen is getting harder and harder to reach if you're using your phone with one hand.

The above heatmap shows an analysis of the parts of the screen that are easy or hard to reach. The (by then) existing category bar was falling in the 'forget about it' area.

Concept & Design

We decided to move the category navigation to the bottom of the screen, floating just above the tabbar. Right in the area, where reachability feels natural. Having the bottom tabbar already at the bottom, it wouldn't be hard to find the category bar just above it, since people are already looking at this part of the screen automatically for navigating.

After discovering all kinds of different designs (attached to the bottom bar, expandable, etc.), we decided to go with a modern floating and rounded look that woud fit best within the app's style.