iOS apps (iPhone & iPad)
UX & UI Design
Move the iOS app navigation from a hamburger menu to a tab bar for all 6 Quidsi apps.
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
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.
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:
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.
Test versions: Search in the header vs. Search in the tab bar
Before & After
Before: Hamburger Menu
After: Tab Bar
The "Guides" page, another page within the "Home" tab:
Links to the other sites at the bottom of the Categories page: