One of my first projects at WalmartLabs was to redesign the search tools for the iOS and Android apps. I was to investigate new api capabilities, research key metrics, user behaviors, and competitive analysis.
Here's some of that process.
Search field on home screen
Search was only accessible via the magnifying glass icon in the header. You can only access the barcode scanner and department browse by tapping into it.
The search field is prominent on the screen. As long as the field is on screen, there's no need to have an icon in the header. But when the field scrolls out of view, the icon should appear in the header.
I also brought the barcode scanner and department browse links to the search bar component.
This animation demonstrates the transition into the search activity on the home screen of the Sam's Club Android app. The design allows us to expose the search field on the home screen, but also allow search to be accessed quickly if you scroll down through the content.
The interaction can be broken into two parts:
- Search field is exposed on the home screen, but as it scrolls out of view, the search icon fades up in the header.
- If you tap the search icon in the header, the search field animates into place from the right. As it reaches its anchor, the Back button and Microphone input icons appear. Recent/search suggestions slide down from the open search field followed by the keyboard sliding into view.
Filter & Sort
To test the concept and demonstrate the nuances of the interaction models, I built a working prototype demonstrating a variety of the Filter Drawer's components working congruently. This prototype was built using Principle and can be installed on any mobile device.
Interactions being demonstrated (in this order):
- Filter drawer open/close transition
- Scrolling available filters within the drawer
- A single filter's expand/collapse animation
- Selecting single-option filters (checkbox)
- Applying filters by tapping "Done"
- Clearing the applied filters
- Closing the filter drawer by tapping outside of it
Get the specs
View a sample of a PRD including detailed Wireframes, Information Architecture, Product Requirements, and Interaction Design Guidelines.
A sample of the final visual styling of the Filter drawer and components for iOS and Android.