Mockup UI Website images for export_Banner The Solution.png

The Solution

Mockup UI Website images for export_Banner The Solution.png


Once user testing was complete, we handed off our prototype to my boss, who spent the next few months coding the tool. During that time we realized we could better achieve our goal by honing in on just the heart of the tool - The Configurator. We realized that we initially thought users needed more handholding than they actually did. However, elsewhere on the internet, users were successfully customizing products and checking out independently. We replaced the landing page from our mockup with a chat function and a dramatically reduced response time. With the new chat function, average response time went from 24 hours to 2 hours (closer to 15 minutes for users who were active on the website). We noticed in user testing that users were not reading the text, so we reduced the tool to its most basic visual components, and programmed the chat bot to provide relevant information when the user was on specific screens. For instance, tie length info that was skimmed over at the beginning of the process is now delivered to the user right as they are choosing sizes. The Configurator launched in July 2018, and though we are still working out kinks, The Configurator almost entirely replaced the old custom design process within a week. Leads have stayed consistent but the overall duration of the design process has decreased dramatically, and user correspondences via chat and email have decreased as well. Designers are freed up from the tedium of color changing, and now have an average of 20 hours per week to devote to creative projects instead of the 4 hours we had under the old system. The design team is also smaller now, and since our sales are no longer tied to the number of designers we have on staff, sales per designer have actually increased. 


Step 1: Browse patterns

We replaced the style quiz with a drastically expanded online retail collection. Our online storefront now includes our entire pattern library, with an improved search function that helps users sift through options. Each pattern is offered in four popular color-ways, which serve as built-in style suggestions for the user. All patterns are rendered on photos of real products, helping users visualize their patterns on ties and bow ties. Almost all patterns offer an option to customize the colors, which serves as the entry point into the color picker.

Screen Shot 2018-09-07 at 3.11.36 PM.png
Warehouse The Solution Images-04.png

Step 2: Choose colors

Screen Shot 2018-08-26 at 9.42.06 AM.png

The color picker in here is very similar to the color picker in the mockup, with one major difference. We eliminated the differentiation between the main color, secondary colors, and accent colors, in favor of simplicity. In the next step the user is given the capability to shuffle their colors any which way, eliminating the need to predetermine the prominence of certain colors.

Step 3: The Configurator

Due to overwhelmingly positive feedback during user testing, The Configurator didn’t change much from mockup to launch. There’s just one notable addition - a block of text stressing the importance of checking out a color chart to verify colors before purchase. This is our most common print issue, and it is essential that the customer internalizes this information. While all other design tips pop up in the chat window, and can be easily minimized, this tip is static and ever-present inside The Configurator.

Warehouse The Solution Images-05.png
Warehouse The Solution Images-06.png
Warehouse The Solution Images-07.png

Step 4: Finalize Details

The finalize details/checkout stage also looks very similar to how it did in the mockup. We did add a Wishlist option that allows users to save their products and share them with others before purchase. This solves an issue that we didn’t initially identify as a major target, but nonetheless came up repeatedly in our old design process. Wedding clients wanted to share their tie collections with other members of the wedding party, but didn’t have an easy way to do so.

Designers can also access Wishlists. If a user is having trouble, a designer on chat can view their Wishlist to offer help and style suggestions.

Warehouse The Solution Images-03.png
Warehouse The Solution Images-02.png
Warehouse The Solution Images-01.png