Adam Shaylor

Sam’s Club header prototypes

I love working with designers. In this case, I worked across silos with a UX designer on the layout of Sam’s Club’s new responsive header. It was Sam’s Club’s first major foray into responsive design and part of a larger initiative to make the whole site responsive.

I had the privilege of working with a talented and hard-working engineering team at Walmartlabs. After some successes early on, we were put in charge of the front-end architecture for the Sam’s Club website. I took advantage of our team’s momentum in the organization by getting a meeting with the UX team about collaborating early on in the design process. Chandan Sharma was the UX designer working on our next project: a responsive header for both mobile and desktop. It would be the first in a series of projects to make the whole site responsive.

The new header’s responsive behavior.

After briefing me on how his team worked and what their plans were, we discussed how prototypes might help test design ideas rather than having to guess from static wireframes and check after launch. It took only a couple of days to build. We demonstrated both the header’s responsive layout and two contrasting ways of organizing and navigating Sam’s Club’s navigation hierarchy.

Prototyping new features for an existing brand with millions of existing customers is very different from prototyping a new experience in a previously nonexistent context from scratch. Assets from existing Sketch comps can be repurposed by capable designers like Chandan into high fideltiy wireframes very quickly. When such wireframes made into interactive prototypes prior to their official approval, variations on details can be explored in context and CSS strategies developed independent of an increasingly complex front-end architecture.

The first option we explored enveloped all menu items in the hamburger menu. The second option separated departments into a separate menu with a mixture of off-canvas and tree navigation.

Credits