Underwear Expert
A mobile-first online experience that allows a new customer to easily find the useful information and make a decision for purchase.
A mobile-first online experience that allows a new customer to easily find the useful information and make a decision for purchase.
Redesign the old listing page into a mobile-first online experience that allows a new customer to easily find the useful information and make a decision for purchase.
As we were thinking retrospectively about the Design Sprint, we profoundly realized that the most underlying issue was the fabric messaging. Regardless where we place the messaging in the flow or we use different visual presentation, the benefits with transposable language don't resonate with how customers wear underwears in day-to-day life.
User research reveals that customers need to be convinced by value proposition Fast. Otherwise, they cannot justify the price and will leave the site.
We backtracked and interviewed the director of manufacturing to reveal the history of the fabric inventions. I synthesized all the copy across the site. I worked with copywriter to translate Tommy John's value prop (fabric benefits) to a Short, Pragmatic and Understandable language that customers can skim. In the meantime, the copy has to be distinctive amongst others and not overshadowing one another.
User research and the design sprint findings support the theory that customers naturally think about style First.
No.
They are simply here to buy a pair of underwear, they don't want to be bothered by the fabrics.
But...
They are spending 40 dollars for underwear, they want to see the value.
After customers select their style, they want to see the products immediately.
As soon as they are investigating the product details, they start thinking about fabrics.
This is where the customers' needs meet business goals.
We reduced the amount of decisions that they need to make at a time. This improves customer's ability to focus and complete their journey within short attention span.
I had benchmarked 10 of competitors and comparatives and studied how their product benefits were prioritized and accessed on their sites. The Product Benefits appears to be the heavy lifting for both customers and the UX team.
After several meetings with stakeholders, we cleaned up our product hierarchy. We had designed 2 routes for A/B testing the right placement for new copy of product benefits.
This flow follows the Redesigned Thinking Funnel. The goal is to reduce the noise in decision-making so customers can make one decision at a time. I named it "Middleton Flow".
When customers start investigate product details on an actual product page, they will find the benefits of the fabric they previously chose is blended in the entire product benefits.
Click to zoom in.
The second route follows the Old Thinking Funnel, which starts with asking customers to select a fabric. The goal is to ensure that customers would not miss the any information of all fabrics. The concern was raised by stakeholders when they reviewed Middleton Flow. I named this "Stakeholder Flow".
Click to zoom in.
We had built up interactive prototypes for both flows - The Middleton Flow and The Stakeholder Flow.
We were not able to conduct in-person moderated session for testing as original planned. We used Usertesting.com for the remote unmoderated testing. We utilized Proto.io as our prototyping tool. Because it's one of a few options that are supported by the UserTesting Mobile Recorder on iOS.
We ask this particular question to to evaluate the effectiveness of new copy, which suppose to let the participants be able to differentiate the fabrics.
Upon the testing feedback, the UX team strongly recommended the Middleton Flow and stakeholders adopted it. We extended the design from mobile to desktop and tablet screens.
Tommy John's website is a storefront of a e-commerce platform called Solidus developed and managed by Stembolt in Canada. As a new feature coming up on the storefront, we would create an Admin Tool inside Solidus portal as well.
Despite the limitations, I managed to conduct guerrilla usability testings. The feedback was there were still too many options and visual distractions. On desktop, the scrolling always stop at 3/4 of the page. Participants were missing out the last quarter of the content.
We proposed the color consolidation to Merchandizing Team to solve this issue. We had built 3 variants of the new experience.
They were Full-Color Consolidation, Partial-Color Consolidation and Non-Color Consolidation(original). We put them out for A/B testing. It turned out that customers responded better with Partial-Color Consolidation.
Here are the samples of sorting methods for Color Picker on Mobile Product Page. Therefore back-end developers can implement the sequence in the right way for a horizontal scrolling behavior.
In June, 2017, we pulled the trigger and rolled‐out the Redesign.
As a result, performance for the target audience (Jeff, new customer on mobile) was 28.75% improvement in overall conversion.
There are other major three things we have accomplished.
We transformed a cluttered listing page into a personal shoopping experience.
We refined the context and content for product hierarchy both internally and externally.
We started a true cross-functional collaboration in a changing startup environment.