Moving to a new tab navigation bar

We are currently using the hamburger menu to navigate in the app, by that users fail to discover and use MH features, which causes a lack of retention and potential revenue loss.

 
 

The problems

  • Visibility issue
    Users’ location and all our features are hidden.

  • Navigation issue
    Users can’t switch between features rapidly.

  • Poor consideration of the thumb zone.
    Users need to use both hands to reach the hamburger menu.

Our goals

  • Increase discoverability
    by creating visible navigation and helping users understand, explore and move easily between features.

  • Increase conversion
    by inspiring users to engage and interact with payment features.

TN01.png
 
 
 
 

Tab navigation pros

  • Good discoverability
    Users see all top-level navigation options right from the start. Instead of hiding the navigation options in a drawer, you splay them out.

  • Thumb-friendly
    Tab bar is located in easy to reach zone (bottom of the screen). Users don’t need to stretch fingers to reach a particular option.

  • The tab bar fulfils all 3 requirements -

    It is visible on every screen and therefore always gives you visual orientation.

    It shows you where you are (active tab highlighting), where you can go (other tabs) and what you will find there (icons and descriptive labels).

 

Hamburger menu cons

  • Hard to navigate -
    Users can’t rapidly switching between features.

  • Lower Discoverability

  • Less Efficient

  • Clash with platform Navigation Patterns

  • No Glanceable

 

Competitive Analysis

TN02.png
 

Best practice

Interaction theory, A/B tests, and the evolution of some of the top apps in the world all support the same thesis: The hamburger button is bad for engagement. Popular apps sporting tab bars: Twitter, Instagram, Pinterest, Skype, WordPress, Quora, and the App Store. Many of them used hamburger menu.

 
 
TN03.png

Spotify

Got rid of the hamburger menu from its iOS app in May 2016, favouring tabs at the bottom of the screen (see below).

The change led to a 30% increase in navigation clicks and was rolled out on Android in November 2016.

 

Facebook

Back in 2013 they launched a big iOS 7-style app redesign featuring bottom-screen “tab bar” navigation built with an advanced native mobile testing framework.

TN04.png

Map app

To understand the structure of the app,
I created a site app that clarifies all the parent and child pages and the actions in each section.

TN05.png

Wireframes: High-Fidelity

TN06.png
 

User testing

I asked two groups - New users and Existing users to test out the prototype's usability. The participant pool was comprised of people between the ages of 45 and 60. Both groups, the new users, and the existing users, were given the control variant and new tab navigation bar with a task to complete.

 
 

The Solution

The five main crucial payment features are no longer hidden to the users. The purpose of the app is clear, and the users understand where they are and what to explore.

 
 
TN07.png

 👈🏼 Previous | Next 👉🏼