OVERVIEW: KNOT STANDARD
Knot Standard is a bespoke menswear company providing high-quality custom suits, shirts, and accessories through their website and private showrooms. My objectives were to re-skin existing website framework, then move through the website evaluating and solving for user drop-offs. As well as, increase number of users customizing products, adding items to cart, completing measurement process, and placing order. Below I've highlighted three main areas I focused with Knot Standard to accomplish these goals.
All designs were completed between June 2013 - June 2014
THE PROBLEM: MEASUREMENTS
Previously Knot Standard’s measurement process was a single page with 20+ entry fields for various measurements the user needed to take and input. At first glance this page was overwhelming, but became even more grueling as the process dragged on. Many users were adding items to the shopping cart, but quitting at some point during the measurement process and abandoning the purchase altogether.
THE SOLUTION: MEASUREMENTS
First I spoke with Knot Standard about reducing the number of measurements the user needed to take in order to complete the process, yet still get a stellar, well-fitted product at the end of the day. We reduce the number to an acceptable 10 measurements. I wanted to break-up the process so the user only had to focus on one measurement at a time, with all the information needed right there in front of them. Using an image of a Knot Standard model in a suit, I added dots at all key measurements points, and as the user completed each step and moved to the next, the page would slide down the image until all measurements were complete, head to toe.
THE PROBLEM: CUSTOMIZATIONS
If you found yourself on the page of a suit you liked and wanted to add the item to your shopping cart, you would have to complete the customization process before the button was clickable. The process was a vertical accordion styling stack of options on the right side of the page. The process was clunky and hindered users from adding an item to the cart before finishing this process.
The Customization Process bar appears at the bottom of the screen once the user initiates scrolling (see above).
THE SOLUTION: CUSTOMIZATIONS
I started by making sure users could add to cart before completing any of the customization process. These suits did have defaults settings for all customizations, so the theory was that we would allow them to add to cart and if they went to checkout before customizing, we would alert them that no customizations had been made but they could go ahead and order anyway. Next I focused on the customizations process itself. Again, using an image of a Knot Standard model in a suit, I pointed to each section available for customization, I gave a brief description of the section/customizations available, and allowed the user to select whichever section they would like to begin customizing. I also added numbered sections to the bottom of the screen that showed the user all available customizations, where they were in the process, and allowed them “Save & Add to Cart” at any point during the process.
THE PROBLEM: HOME PAGE
Perviously the Knot Standard home page had several background textures, busy navigation, and studio (white background) product images for the supporting visuals. Knot Standard wanted a quick turnaround for the home page design, and minimal change to the existing dev.
THE SOLUTION: HOME PAGE
My primary focus was to simplify the Knot Standard home page. My thought was that the high bounce rate was related to users feeling overwhelmed by options and aggressive visuals. I began by refining the navigation structure. It was my belief that new users to the site would only be focused on two things... the products and the process. So I simplified the main nav to highlight those two things. From there I added a secondary nav for services, and placed everything else in a dropdown menu or the footer.
Next I wanted to inject some personality into the home page. I was limited in how I could do this, while keeping with the existing framework and maintaining a simplified layout. So I sufficed with lifestyle photography and created headlines that stood out. The main image was set to a randomizer, so display a series of different images and headlines upon each visit.