Interaction Design

 

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


 
 

Before

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.

After

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.

 
 
 

Interaction design


The search icon's opacity increases in a 1:1 inverse relation, relative to the percentage of the search field in view.


 
 

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:

  1. Search field is exposed on the home screen, but as it scrolls out of view, the search icon fades up in the header.
  2. 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



 
 

Rapid prototyping

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):

  1. Filter drawer open/close transition
  2. Scrolling available filters within the drawer
  3. A single filter's expand/collapse animation
  4. Selecting single-option filters (checkbox)
  5. Applying filters by tapping "Done"
  6. Clearing the applied filters
  7. 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.


 
 
 

Visual design


 
 
 

A sample of the final visual styling of the Filter drawer and components for iOS and Android.