Mockup UI Website images for export_Banner Thought Process.png

Thought Process

Mockup UI Website images for export_Banner Thought Process.png

4 MINUTE READ TIME

We spent the week building and testing a prototype that would address our main problems. Every member of our Sprint pitched a solution, we picked our favorite, and we spent two days building a mockup of the tool. I created the look and feel of the mockup and built all the screens based on Knotty Tie’s existing brand standards and the vision of our Sprint Team. Here’s the mockup we tested at the end of the week, and how it addressed our main problems:

 

Step 1: Landing page

The goal of our initial landing page was to build user confidence that they were working with real people, explain our process, and address our most frequently asked questions. We also wanted to give the user some options for how to start, because we found that wedding customers (our target audience) approached us with varying degrees of certainty on what they wanted. We gave the user 3 potential pathways: (1)Take the style quiz, (2) Choose a pattern, or (3) Choose a color.

06.png

Step 2: Style quiz

For our mockup, we used the style quiz as the jumping off point for the user, because the style quiz encompasses both choosing patterns and colors. Our style quiz asked the user to choose words that described their style, and choose images that inspired them.

07.2.png

Step 3: Select Your Colors

The next step in the mockup was for the user to choose colors. We updated the color picker from our previous design process to allow the user to designate a main color, a secondary color, and accent colors. We noticed in working with users through the old system that we wasted time sending out a first proof - most of the time the user had a main color in mind, but didn’t have a way to tell us during onboarding, so we almost always got it wrong on the first proof.

08.png

Step 4: Choose Your Patterns

When the user entered the pattern picker in our mockup, they were presented with a selection of pattern matches, as determined by the results of their style quiz. They could scroll down to see the entire pattern guide, categorized by type of pattern. Our biggest innovation with the pattern picker was that the patterns populated in the user’s chosen colors, responding to a frequent user concern that they had trouble visualizing our patterns in their colors. This tended to draw out the design process when users realized that they didn’t like a pattern as much once it was in their colors. Allowing a user to see the patterns in their colors right off the bat would eliminate some back and forth because the user would come into the design process better informed. We also encountered a frequent problem of users starting new deals with us whenever they wanted to see new patterns in their colors. This resulted in many users having multiple deals in our system, and caused chaos from a file organization and customer service standpoint. Allowing users to see all patterns in their colors from the beginning would empower the users to make those decisions him/herself.

09.png

Step 5: The Configurator

Here lies the heart of the tool; “The Configurator”. The Configurator would allow users to shuffle their colors themselves, and watch them change in real time on renders of real products. In our previous system, this menial task occupied 90% of our designers’ time. By allowing the user to shuffle their colors themself, the lag time in between proofs could be eliminated, and miscommunications between user and designer could be reduced. In user testing we found that The Configurator was a universal crowd pleaser. 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.


Step 6: Finalize Details

We knew we had to dramatically redesign the checkout process, and our goal was to make it as simple as possible. Our mockup allowed users to view their entire collection at once, and guided them to provide the necessary details as they added the item to their cart. As items were added to the cart, the total was calculated in real time. This would eliminate the confusion caused by our “finalize details” email, and allow users to purchase instantly instead of waiting for a designer’s response. This solution was more similar to what users were seeing elsewhere on the internet, and in user testing we found that users knew instinctively how to check out.

Sprint Prototype 2_13_18-05.png