Platforms

iOS apps (iPhone & iPad)

Roles

UX & UI Design
User Testing

Tools

Sketch
Silverback


Objective

Move the iOS app navigation from a hamburger menu to a tab bar for all 6 Quidsi apps.

Problem

All 6 of the Quidsi apps had a hamburger menu navigation with some proven usability issues:

  • Low discoverability of the hamburger menu
  • The hamburger menu was difficult to digest because it was a long laundry list of unrelated items
  • Key app features (Easy Reorder, My Account) were hidden inside the hamburger menu
  • There was no way to access categories except to go to the homepage of the app

Solution

The tab bar is a more effective form of navigation that addresses all of the issues presented above. It increases discoverability and encourages browsing, in addition to exposing and highlighting the key app features.

Working closely with the Strategy, Product, and iOS development teams, I analyzed analytics and the app user flow in order to determine the optimal tabs for the navigation. Then, I conducted user testing to validate the final tab bar design.

User Testing

I led user testing for this project, taking charge of recruiting participants, drafting the test plan, moderating some of the sessions, and compiling a report. 

User testing details:
  • Features tested: App tab bar & Segmented controllers on the homepage
  • 8 moderated sessions
  • 2 test versions: (a) search in the header (4 testers); (b) search in the tab bar (4 testers)
  • Setting: Quidsi user testing lab
  • Participants: 8 Diapers iOS iPhone app customers who made at least 3 purchases from the app in the last 6 months
Questions that I sought to answer:

No, none of the testers encountered issues with the basic navigational tasks during testing. Even though categories had been moved from the home page to its own tab and search was moved from the top to the bottom for 4 out of 8 testers, none of the testers struggled to find products. All 8 out of 8 testers rated both browsing and searching as Easy or Very Easy

However, some of the testers were confused by the "Featured" label for the homepage tab. The use of "Featured" in the segmented controllers added to the confusion. 

Actions: To eliminate ambiguity, I renamed "Featured" as "Home" and "Browse" as "Categories" for the remaining 5 tests, and the testers experienced no further difficulties or confusion with the tabs.

None of the testers encountered any problems with search whether it was in the header or the tab bar. 5 out of 8 testers (62%) preferred search in the upper right-hand corner and 3 out of 8 testers (38%) preferred search in the tab bar, but 7 out of 8 testers (87%) did not have a strong preference, saying that they were neutral and would be able to find and use search regardless of where it was located. Only 1 tester had a strong preference for search on top.

Actions: Keep search in the upper right-hand corner. This also future-proofs the design, as we will have space to add an additional tab on the tab bar (e.g. "Lists") without having to shift the layout again.

Yes, a minority of users do, but it is not a priority. Because there is low engagement with links to the other sites from the hamburger menu and users can still find products from other site catalogs through search, we initially eliminated links to the other sites. However, 1 tester brought up the desire to navigate to the other sites unprompted.

Actions: Include links to other site catalogs at the bottom of the list of categories on the Categories tab.

Test versions: Search in the header vs. Search in the tab bar

 

Before & After

Before: Hamburger Menu

After: Tab Bar

Tab Screens

Home

The "Guides" page, another page within the "Home" tab:

Categories

Links to the other sites at the bottom of the Categories page:

Easy Reorder

Cart