kitted customization on hem.com

In August 2014, Hem (a spin-out of Fab.com) neared its public launch with a small collection of inventoried products and an online tool offering soup-to-nuts shelving customization. We gathered a strategic team to build a simpler custom offering that would:

  • reinforce the brand message of highly configurable furniture
  • introduce our customers to the visual language and interaction patterns used in our more complex customization tools
  • expand Hem's merchandise assortment by exposing existing modularity in the furniture & lighting collection

The solution would be powered on the back-end by a merchandising product called “Kitting” we had built earlier that year for Fab. Kitting displays a single customized product with configurable options to customers, while calculating inventory and fulfillment time on-the-fly from a large set of component SKUs. The Kitting product helps editorial (content management), merchandising (planning), and orders (supply chain) teams manage a complex product line. 

We planned to pilot "kitted customization" with three exclusive collections: Verso shelves, Levels lamps, and Lift shelves. I further constrained the project, requiring that this interface be implemented as a one-for-one swap of the “product display & options module” on Hem’s product detail pages. I had directed the user experience and build out of this template earlier in the development of Hem’s responsive e-commerce site, so I looked for expediency in working within existing page frameworks. 

 

Early Flow Sketching

I begin almost every new product working by hand. Whether a product is well-defined or wide open, I find that low fidelity forces me to produce a strict hierarchy of information and desired behaviors. 

I also ask myself simple questions in writing, such as “Are all components visible at once?” and “Progressive disclosure only?” Posing core experience questions helps me consider how my designs — and as importantly, the artifacts describing those designs — will guide our team through my process.

Because I’m most at home designing for mobile and tablet experiences, I quickly thumbnailed a small-format page during a longer sketching process. This serves as a way to bookmark the intricacies of displaying a complex tool on all screen sizes, while allowing me to first focus on order of operations. 

 

Pitching the Kitting Experience

As the concept progressed, I produced a more refined and more formal overview of my recommendations for a Kitting experience with Hem merchandise that included:

  • a high-level flow from a browse page to detail page and into the kitting interface
  • four linear flows describing customization decisions made by a customer for each product
  • simplified wireframe walkthroughs for two of the interfaces in situ on a product detail page
 

I often find myself returning to hand-sketching when considering very detailed interactions and interfaces as the project progresses. At this stage, high-fidelity deliverables sometimes cause hesitance to offer critique. While hand-drawn visuals help convey a work-in-progress that is open to interrogation of my assumptions and input from all members of a team.  I aim to balance visual abstraction as a means to move quickly on a single question while echoing the finished visual language to help my audience fill in the gaps with their own imagination.

 

I developed multiple options through more detailed wireframes.

The basic Kitting experience for Hem advanced product-by-product. At this time, I took a step back to consider how our initial build out of the simple custom offering could influence the “Full Customization” offering. To date, those products had been designed around technical capabilities, instead of taking a user-centered approach. As a result, they were serving primarily as a lead-gen mechanism.

Through interviews with our custom design service representatives (a sales group staffed by interior architects who individually design projects for customers one-on-one) and business stakeholders, I developed the first set of user stories. I diagrammed basic user journeys for a re-design of this technology.

Following this proposal, I delivered a three-month market and user research plan. The plan outlined a deeper dive into the motivations and needs of Hem’s perceived target market and the competitive landscape. Usability studies to prioritize a retrofit of our "Full Customization" tools rounded out the plan.

[Designer, co-product manager, 2014]