HS Mobile Toolbar
Problem: For HelloShopper, mobile was the largest percent of traffic. The initial version of our navigation for mobile was a hamburger menu. This design has been proven through several industry studies to decrease engagement within mobile applications.
Solution: Replace our hamburger menu with a toolbar in order to clearly lay out our navigation for users.
Design:
(1) Reused the icons and labels in our side navigation for consistency. A separate page for the request list also needed to be implemented since that list currently lived in the nav itself.
(2) The “Account” tab housed both “Invite your friends” and “Settings” since we didn’t feel those needed to be separate tabs
(3) A large yellow [+] button was used to initiate our main request flow. This design gave our core flow the appropriate hierarchical prominence as well as signifying that it launched a separate flow rather than being a static “tab”. This approach was also carried through to our desktop version.
Results: TBD
Mobile App
The navigation was laid out on the bottom to increase user engagement.
Mobile Web
The navigation was moved to the top due the web browser's own sticky navigation.
Hamburger Menu
OLD DESIGN: The hamburger menu slid out to reveal the navigation options on tap.