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.
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:
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.
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.
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.
Our research consisted of surveys and one-on-one interviews.
Surveys - we canvassed social media, friends, family, etc.
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"
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.
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.
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?"
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
We just sent you an email. Please click the link in the email to confirm your subscription!
OKSubscriptions powered by Strikingly