Website daynasafferstein.jpg

Knotty Tie Configurator

Case-Study-Banner.png

Knotty Tie Configurator

UX/UI, Responsive Desktop & Mobile

 
Case Study Banners-03.png

Knotty Tie Co. is a rapidly growing Denver startup whose main source of revenue is custom ties. My team created a web tool that changed how users interact with the company, solved a growth bottleneck, and quadrupled online retail sales in a single year.

 
Warehouse images for export_Knotty Screens.jpg

# MINUTE READ TIME

0. Overview

In the spring of 2018 Knotty Tie assembled a team to address the major issue standing in the way of our growth - the scale of the business had outgrown the capabilities of our customization process. We ran a weeklong agile sprint, during which we went from brainstorming to testing a mock product with real users. As the only designer on the team, I spearheaded the design vision, created wireframes and mockups, and ran user testing.

ROLES

Interviews, Ideation, Wireframes, UI, Prototyping, User Testing

TEAM

1 designer (me), 2 founders, 1 marketing manager, 1 developer

DURATION

Agile Sprint : 1 week
Implementation & Iteration: 9 months

TOOLS

Case+Study+Banners-08.jpg

Our Goal

Create an automated, scalable tool that maintains/improves design experience.

Case+Study+Banners-09.jpg

How will we know if we’ve met our goal?

If a user can decide and design what they want and check out on their own.

Case Study Banners-02.png

Short Attention Span?

Skip to the best part…

1. Problem

We started our design Sprint by interviewing Knotty Tie employees from all departments, evaluating what they would need from our tool, and what they thought our users would need. Particularly helpful were our interviews with the other members of our design team, who interact one-on-one with users on a daily basis. Our designers had intimate knowledge of the things our users liked and the places where they struggled in our previous design process.

Here is a list of the main problems we hoped to tackle:

a) Finalizing details/checkout

  • Text Heavy: Relied on a long winded email that users weren’t reading

  • Unfamiliar Design Patterns: users expect to check out independently on the website, but our checkout process happened via email

02.1.jpg

b) Conveying complicated printing issues

  • Relied on designers to find and communicate potential print issues to users

  • Users often skimmed over warnings in emails and proofs and ended up unhappy with final product

  • Transitioning to a system where users could design and purchase ties independently meant finding a better way to convey print issues before purchase

03.jpg

c) Providing style guidance

  • Design process started with a style quiz that recommended patterns to users

  • Algorithm was poor at matching descriptions to patterns

  • Style quiz was successful at capturing leads but poor at providing the guidance users wanted to help them make decisions

04.2.jpg

d) Shortening response time

  • Average response time was 1-2 business days

  • Users were frustrated by slow response time, because it is typical to receive instant customer service online

  • Slow response time made us unable to accommodate very short turnarounds

  • Lost users who continued shopping after they submitted an initial inquiry

e)  Better utilizing design talent

  • Designers were constantly buried in repetitive and basic design work

  • Consumed by production queue, designers could not devote time to projects that would improve the brand and increase sales

  • Projects such as increasing social media presence, updating the website, and creating fresh patterns were constantly on the back burner


2. Thought Process

By the end of the weeklong Sprint we had built and tested an Invision prototype.

Here are some of our major innovations and how they addressed our problems:

a) Building confidence through the landing page

  • Aimed to accomplish 3 important goals:

  1. build user confidence that they were working with real people

  2. explain our process

  3. address our most frequently asked questions

  • Intended to provide style guidance for the user from the get-go by offering 3 starting points

  1. Style Quiz

  2. Choose Patterns

  3. Choose Colors

  • Starting points were determined by interviews with design team, who knew what customers were looking for when they first came to our site

06.jpg

b) Upgrading the style quiz

  • Improved the algorithm that matched descriptions with patterns

  • Provided lifestyle pictures as inspiration

  • Marketing research indicated users became more engaged with our website when they saw our products on people

  • User testing confirmed that the live photos gave users the impression that they were getting tailored style guidance

07.2.jpg

c) Expediting the color selection process

  • Allowed users to designate a main color, a secondary color, and accent colors

  • Eliminated a step from the process where designers had to guess the main color in the user’s color palette, freeing up designers for other projects

  • Aimed to reduce duration of the process from initial inquiry to purchase

08.jpg

d) Populating patterns in the user’s colors

  • Instantly populated patterns in the user’s chosen color palette

  • Responded to frequent concerns that users had trouble visualizing our patterns in their colors

  • Aimed to expedite the process by allowing users to see immediately if they liked a pattern in their colors, instead of choosing patterns and colors and waiting for a designer to send a proof

  • Intended to reduce revision requests, freeing up design manpower for other tasks

09.jpg

e) Simplifying the “Finalize Details” stage

  • Enabled users to view their entire collection of items at once

  • Calculated total in real time as items were added to cart

  • Eliminated the confusion caused by “finalize details” email

  • Followed common design patterns across internet

  • Confirmed in testing - users knew instinctively how to check out

Sprint Prototype 2_13_18-05.jpg

f)  Introducing The Configurator

  • Enabled users to shuffle their colors on their patterns in real time

  • Eliminated lag time between proofs

  • Reduced miscommunications between designer and user

  • Rendered on real products, responding to marketing research indicating user preference for real product photography


Sprint Prototype 2_13_18-27.jpg
Case+Study+Banners-08.jpg

90%

of our designers’ time was previously spent creating proofs. The Configurator would put that task completely in the users’ hands, giving designers 90% more time to spend on brand-building projects.

Case Study Banners-09.png

100%

of users tested were delighted by The Configurator. It was fun and satisfying for users to get to be in control of their own colors and patterns, and seeing them rendered on products helped them visualize the end results.


3. Solution

Ultimately we came to the conclusion that the majority of our customers would be best served with the simplest solution, and in response, we went live with The Configurator. We initially thought the personalized touch of working directly with a designer was important to our clients. Turns out, most wedding clients preferred a quick, simple design process that was similar to how they shopped elsewhere on the internet.

Case+Study+Banners-06.jpg

The best solution is the simplest.

Case+Study+Banners-08.jpg

We initially thought the personalized touch of working directly with a designer was important to our clients. Through user testing we realized that most wedding clients preferred a quick, intuitive design process that is similar to how they shop elsewhere online. So we scrapped the rest of the design and focused on making The Configurator in its finest form.

Step 1) Pick your pattern

Users get overwhelmed if they are presented with too options at first. The 3 Starting Points idea (see 2a) was unnecessarily complicated.

  • Made the online retail collection the entryway into The Configurator

  • Greatly expanded the online collection

  • Provided 4 pre-designed colorways for each pattern for customers who want more guidance

  • Organized patterns and made them searchable to enable customers to shop with intent

Screen Shot 2018-08-26 at 9.42.49 AM.jpg

Step 2) Pick your colors

  • Enabled users to choose up to 6 colors, depending on the number of colors in the design

  • Eliminated the need to choose primary, secondary, and accent colors (2c) because we put color shuffling completely in the user’s hands

  • Added filters to help users find their colors

  • Responded to customer feedback on our original design that the color picker tool was fun and easy to use

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

Step 3 ) Customize your designs

  • Created a tool that instantly populates the user’s chosen pattern in their colors

  • Enabled the user to shuffle colors. Shuffle was a feature introduced in the mockup that delighted users

  • Populated designs on real photographic mockups of products

  • Responded to marketing statistics indicating greater sales on products mocked up on real photography, as opposed to digital renders

Screen Shot 2018-08-26 at 9.45.43 AM.jpg

Step 4) Finalize details & check out

  • Allowed users to finalize their details and choose sizing without leaving their internet browser

  • Replaced extensive email conveying print issues with a simple design tip within Configurator, advising customers to check out a color chart before purchase

Screen Shot 2018-08-26 at 9.49.25 AM.jpg

4. Impact