Return to site

Awl & Sundry - Interactive shoe design

Overview

Awl & Sundry is a manufacturer of custom-made mens' shoes. that relies entirely on its web site. Customers can go onto the site and design their own shoes with the help of an interactive feature.

Issue

The company had been in business for only a year. The legacy site was developed in haste, and now the owner saw a need for the following:

  1. Think through the interactive custom-design feature of the site so that it's more intuitive
  2. Redesign the site layout to reflect the quality of the brand and image
  3. Establish a mobile presence

Solution

The solution was delivered in the form of annotated, high-fidelity wireframes that had been tested through iterations, a prototype and a research summary that identified the rationale behind the users' motivations, pain points, etc. We also re-designed the site's layout with strong visuals, a "social media'-like presence to help users with design ideas.

Result

Through the research we were able to gain insights about the clients' customers, as well as users who represented a new, and potentially lucrative, market. The site's new layout also reflected the company's values of affordable luxury.

How we did it

Roles & Approach

I was one of three experience designers engaged in strategy, research, interaction design, copywriting and iterative testing.

Discovery phase - current state

We reviewed the current site to identify design opportunities.

  1.  Interactive feature of the shoe design process was cumbersome and unintuitive,
  2. Mobile presence was one page directing users to the desktop site
  3. The site was text-heavy with few images of the product.

Competitive research

Next was a review of different sites and experiences to get ideas for layout, interactive design feature and a visit to Bergdorf Goodman department store to understand the process for custom made shoes.

User research

Our research consisted of surveys and one-on-one interviews.

Surveys - we canvassed social media, friends, family, etc.

  • 75 respondents
  • 70% male, more than half between ages 25-55
  • Most purchase clothing online
  • Would consider custom-made shoes were it not for the price
  • The #1 reason for purchasing shoes?  "Just because"
  • Online shopping pain points: customer service, checkout process, navigation

We also conducted a total of 10 one-on-one interviews to get deeper insights.

"I'm the guy who will buy a pair of shoes only after mine wear out"

"My husband is the cheapest guy. He won't spend more than $200 for a pair of shoes"

"Sure I'd pay $500 for a pair of shoes if they're good quality and will last"

Personas

I worked with the group to synthesize our research findings.

We then arrived at three personas - one who fit the current profile and two to represented "untapped potential"

We selected Max as our primary persona, as his behavioral attributes matched most closely with our user research data. I then developed a scenario and future-state journey to understand Max's motivations around why and how he would purchase a pair of customized shoes using the Awl & Sundry site. I provided a user flow diagram to illustrate how Max would navigate th site.

User Scenario for Max

While waiting to board a plane, Max remembers that he needs a pair of shoes for his friend’s Gatsby-era themed wedding. Max take out his iPhone and pulls up Awl & Sundry’s mobile site. Already loge in, he goes directly to the “Customize Now” page and starts playing around with styles and features. Max likes how the features he’s added make the style that much more distinctive. Just then, he hears the attendant announce that his plane is boarding. Max saves design on the mobile site and boards the plane. Once he's in flight, Max pulls out his laptop and finished where he left off.

Defining the scope

Based on user feedback and the client's input we prioritized features - those most important to users that were also technically feasible.

Design

First we constructed a site map based on the user's journey

Then each of us took a section and went through a series of three-minute "sketching drills"....

...and combined efforts into one cohesive design.

We then re-visited our competitive research for design inspiration

Then began wireframing the layout for desktop and mobile using Omnigraffle.

We then honed in on designing key features such as the interactive functionality of the shoe design process - greater use of the page, each part of the shoe defined, an autosave feature, ability for the user to jump back and forth among steps, posting to social media, to name a few.

Current & revised

Some of the enhancement included placement of color swatches so there's one for each feature, added a price, a "back" feature and autosave.

We also make sure to make the shoe more prominent on each page.

I rewrote the site copy, to feature more graphics.

Iterative testing

We ran two iterations of testing - first the low-fidelity wireframes to have users assess the mechanics of the interactive feature, then high-fidelity with graphics.

Some users' comments:

"What is a 'last'? 'Foxing'?

"Where am I in the design process? How much longer?"

"Some of this is too small, I can't read the text as I'm designing the shoe"

"How do I go back and make changes?

"Can I get suggestions? Where can I find inspiration?"

Conclusion

We delivered a set of mobile and desktop wireframes that would showcase the luxurious feature of the product while providing intuitive guidance for the user. A sampling of the pages can be viewed below.

Home page featuring the product

Suggested styles for the user

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly