Articles

Customizable Shoes Need Customized Interfaces

I know more about shoes than I care to admit.

Having been the creative lead for Timberland's Custom Boot application and Reebok's RbkCustom.com, both done through Fluid, Inc., I've learned more about footwear than I ever thought possible. However, I learned even more about how people shop.

While these two projects offered very similar services, their core audiences had different perceptions and expectations. As you would expect, form followed function in both cases, but form was further modified by audience as well. The design of the visuals, information, interaction and motion all had to be led by how these users perceived the product and the brand.

Timberland: What's This Boot All About?

Timberland's users are a broad assortment of collegiates, yuppies, tradespeople and urban youth (Timberland doesn't market directly to this last group, despite their co-opting of the brand...fascinating stuff for another article). Timberland's core user is an adult male who's more Banana Republic than Carhartt, but the custom boot experience still needed to appeal to this broad audience. There's nothing in this core demographic that implies that most users want to spend hours making the perfect custom boot of their dreams...but they still want a product that somehow has their personal mark on it.

While categorizing archetypal user personas for this project, we quickly arrived at idea of the design averse user. This is a user who wants to own a highly personalized product but is not interested in investing a lot of time designing a product from scratch. Most often, they want to put their initials on a product, or change just one color. We had to encourage and entice them while not alienating those who wanted to go deeper.

RbkCustom: Custom Kicks for the Sneakerfreak

Sneakerfreaks buy a lot of sneakers. Customer interviews revealed that on average, the target audience of RbkCustom bought between two and four pairs of sneakers a month. These are also young people with limited disposable income relative to the Timberland shopper, yet are more frequent shoppers. Self-expression, individuality and fashion one-upsmanship are some of their key shopping motivators.

Therefore, this dictated a very different approach to user experience design. These users craved complexity. They wanted access to every piece of the sneaker, and did not want to be guided at all. They wanted exploration, not explanation. This led to a design approach where steps were not sequential, and the interface used as few words as possible. Full-bleed photography was used wherever possible. The shoe was king.

Of course, the presence and success of NikeID loomed large over this project, as it should have. It was the first shoe configurator to market, is largely well-designed, and has a great reputation. Snearkerfreaks were expecting that level of experience at a minimum. But the first to market isn't always the best. It featured five fixed views of the shoe at relatively small sizes. Any update to a shoe refreshed fairly slowly. And the number of customizable parameters was relatively low.

Key Similarities

Despite the differences in users, there were a lot of similarities between the two projects. The high-level experience was nearly identical: first choose your product, self-indentify with gender and size (gender was subsumed into the product selection on Timberland), and then start customizing, either by modifying a pre-configured starting point or designing a wholly new product.

Early on we settled on a thick-client design approach using Flash, primarily because we wanted three key things:

• A variety of starting points for the design-averse
• Product rotation
• Truly instantaneous visual updates

We described pre-built, ready-to-purchase shoe designs as Inspirations. Both applications feature inspirations, but with their own twists. Timberland offers several stages of inspirations, including offering shortcuts or suggestions for completing a shoe design once the user has chosen just a few major attributes. RbkCustom acutally features inspirations designed by its own users, reinforcing friendly competition and encouraging further designs.

Timberland wound up having one axis rotation for each customizable product, but for Reebok (due to the nature of what was customizable, and where) we implemented two axes of rotation. The core idea here was to emulate the in-store experience of picking up a shoe in your hands and turning it over and around as you assess the design and form. Both sites had truly immediate rollover-level updates of color and element choice on the product image. These high-satisfaction interactions allow the user to accurately previsualize what the product will look like, making them more confident in making a purchase.

Key Differences

Timberland kicked off the project with a pretty robust understanding of their core customer, which we relied upon for the creation of user personas to guide our work. For RbkCustom, however, we immersed ourselves in the sneakerfreak subculture by interviewing them, reading their blogs daily, and ultimately doing usability tests with them. We found our hypothetical personas helped us make strong, accurate assumptions in our design phase, and yet more great ideas came from testing with real users.

Timberland had between twelve and sixteen customizable parts to each boot. Reebok had two to three times that number for each sneaker, plus far more complex relationships between attributes. This was informed by the manufacturing process but also by the desires of each site's users, and Reebok's goal of extreme customization. I believe the number of permutations available on the Reebok Classic Leather Low was somewhere in the quadrillions...

Of course, the biggest difference between the two applications is their feel or vibe. Timberland's interface was explanatory, while RbkCustom's interface was exploratory. Timberland's configurator guided the user through specific steps, from the most broad to the most specific; it feels ordered, solid, as sturdy as the boots it offers. RbkCustom provided groups of options rather than steps, based on the product's "geography" (main, sole, top, back); it is deep, powerful, and image-rich, offering the high degree of personalization its users demand.

Finally, RbkCustom allowed the user to do something no other footwear configurator could offer: customizing a shoe on a human model. This was important context for seeing how a sneaker would look with long pants, helping to set customer expectations and to better visualize what the shoe would look like when worn.

Conclusion

These projects, done just months apart, were a rare opportunity to see how similar products or services can be equally successful by having very different user experiences. It was a fascinating experience that blended design, user needs, business goals and consumer behavior into cohesive wholes that retained the appropriate contexts for their respective users. It reinforced that form should follow not just function, but audience needs and expectations as well...and that there is never a single right way to design anything.

If you want to read more about these projects, you can read my case studies of RbkCustom.com and Timberland Custom Boots elsewhere on this site.

Now if I could just find a pair of custom-designed shoes that fit properly...