⫷ Back⫷ Home

Design Sprint

The intention was to build common understanding, uncover the most critical issues of the e-commerce website, and create and test the design solution.

brief

challenge

Design a mobile experience that allows the value skeptic, a new customer, can easily find the useful information he requires to make an informed purchase.

Sprint Team

VP of Product (Decider)
User Researcher
UX Designer (Facilitator)
Customer Service Director
UX Designer (Facilitator)
Business Analyst
Back-End Developer
Retention Marketing

About Google Design Sprint

I prepared, documented and memorized this experience as a guidebook for future design sprint activities. The Design Sprint is a methodology of product design process that puts the business, technology and especially the user in the center.

5 phases

understand

We kicked off by developing a common understanding for our cross-functional team.
We locked down to one persona and clarified the challenge statement - “Design an experience that allows Jeff, the value skeptic, as a new customer can easily find the useful information he requires to make an informed purchase. ”

UX

UX team presented user research findings and personas in order to build up the user-centered mindset in the company.

Brand

Brand team explained and their goal to maintain the look and feel of "comfort", “premium" fabric in branding.

Merchandize

Merch team said that smart fabric is one of Tommy John’s value props and let us examine Product Categorization and Naming Convention.

Business Analysis

Analyst showed us data of site performance that validated the user journey in research.

“Who is Jeff?”

Takeaway

Communication = the key

The Design Sprint is a great chance to learn from people that I work with around me.
Though we all worked in an open space, I didn't know what exactly the other members do at their daily job before the workshop. The experience of the site has always been directly and indirectly impacted by their decisions. Sadly, they had no idea what I do other than making the site look pretty.

uncover

We prioritized and uncovered TWO Most Critical Issues by consolidating and voting on different subjects.

Product Benefits

One of Tommy John's selling points is the innovative fabrics that improve customer's wearing experience.
There were different perceptions of product hierarchy in different departments. Even internal employees could not distinguish the fabrics from one another. It made the website fail to convey the benefits to our customer. The reason is the company was missing a structural product hierarchy and missing a clear strategy in product messaging.

Findability

On the listing page, there were overwhelmingly too many options and visual distractions. The filters are links to different sub-pages and they cannot multiply in order to narrow down options.

The interchangeable product benefits make customers difficult to choose suitable product. Customers are unsure about the value proposition and cannot justify the high price point.

diverge

This part was like playing with Lego bricks: gather useful components, then convert them into something original and new.
You might think that people have to come up with ground-breaking brilliant new ideas to solve the problems. However, when you look at any great innovation, it’s actually built on remixing and improving old ideas. We would gather solutions from other industries, other companies or old ideas that have been floating around in company for a while.

Four - Step Sketch

We moved along to the Four-Step Sketch exercise, including the crazy 8s. This demonstrated how other teammates mixed their ideas.
There are a five things that need to be considered:
1. Everyone sketches
2. Make it self-explanatory
3. Keep it anonymous
4. Ugly is okay
5. Words do matter
Meanwhile behind the scene, the user researcher and the designers started recruiting and screening participants for Friday’s Testing.
Takeaway

Too many cooks

I wanted members not to restrain their creativity by the conventional concept of Category Page and Product Page. I didn't strictly divide up the user story and assign someone to each section. I let team members sketch the whole story: from landing on the homepage until deciding to make a purchase.

However, the output came back disorganized. Next time I might execute differently.

decide

The third day is about decision making. Our team had a stack of solutions based on their paper sketches from yesterday. We critiqued each solution and decided which ones have the best chance of achieving the long-term goal. 

The storyboard: a step-by-step plan for our prototype

Takeaway

Stay Focused

The new ideas might have seemed compelling but they are abstract without going through common understanding. They would deviant the team from the ideas they sketched yesterday.

Prototype

Prototyping day! It is when all of the sketches, ideas, and decisions come together into a realistic prototype that we can test next day.

I suggested we decipher the product benefits into 2 layers and expected the copy would be easier to digest. We specifically designed two approaches of the fabric section for testing which communicates better.

Parent Layer

The parent layer is universal benefits that apply to all underwear regardless styles, fabric, color and size.

Child Layer

The child layer is the fabric benefits that fit in different life scenarios to match customers' needs.

Funnel

Based on the user’s feedback and business requests, we specifically designed this funnel to help Jeff find his ideal product — a pair of underwear.

Design variants

Here are 2 variants of Product Benefit Page. Then I used Invision to stick components altogether to make sure that it flows as a cohesive prototype for tomorrow's A/B Testing.

text accordion

FABRIC IMAGE + ICONOGRAPHY

Prepare for testing

To prepare tomorrow's testing session, we had written a script and set up the 2 rooms and live streaming devices. One for UX researcher to conduct the user interview and the prototype testing, the other room for other teammates to observe the interview and the screen recording.

https://invis.io/WP9XDM78X
Takeaway

Don't let team memeber stray

Next time, I only need to team up with the members whose daily job involves content creation. The rest of the team can go back to their everyday work routine.

validate

Last day of the Sprint is all about validation. While the UX researcher was conducing five sessions of user testing in one room, I was in the other room observing the interviews and taking notes.

Findings

First Impression (First Three interviews)
Positive Reaction
  • Clean, modern appearance
  • Hero showed someone relaxed and comfortable
  • Tagline (Designed to Make Your Life More Comfortable) was how user wanted to feel
Negative Reaction
  • Hero imagery at odds with tagline.
  • Lacks visual interest (monochromatic garments).
  • “It’s not wowing me.”
Navigation and Exploration
Half and Half Split in Interest to Explore
  • All users understood how to get to a product category from the homepage
  • They come to the site and are interested in purchasing underwear.”
Best Sellers
Interest in Browsing
  • Use Best Sellers to know what people like or what’s popular
Features and Functionality
Presentation on Screen
  • Users felt features appeared too soon in experience
  • Preferred to see styles first
  • Did not care to learn about features until seeing style options
Descriptions
Presentation on Screen
  • Users did not understand features without a frame of reference
  • Zoom-in on photography to understand (e.g. Quick Draw Fly)
  • Did not care to learn about features until seeing style options
Selection Paradigm: Fabric
Users (Prospective & Current) Think About Fabric
  • Users do consider what fabric works for them
  • NOT in the way Tommy John communicates
Men Think About Style First
  • Changing the paradigm led to some confusion
  • Selecting style grounds user. Helps determine if he likes look first
  • Allows him to eliminate options that do not interest him
Navigation
Usability of Accordion
  • Users understood how to open and close the fabric section to see more details
  • Users also understood how to see the underwear that was available in that specific fabric
Fabric Benefits
Visualizing Fabric
  • Use photography as proxy for feeling it
  • Assess the look of fabric in each style. Judge fit & comfort.
Fabric Composition
  • Interviews validated that composition is useful to some customers
Perceptions About Cotton
  • Prototype confirmed users were interested to learn about fabrics
  • Two users rejected all fabrics as not being 100% cotton
  • Requirement was really that the fabric is natural
  • Expressed interest in ‘beechwood’ (natural fiber)
Impact of Negative Wearing Experiences
  • Bad experiences drove thinking when choosing underwear
  • Suffering led to fabric requirements
Benefits vs. Usage
  • Users struggled to translate benefits into practical terms/how they’ll use the underwear in their lives
  • “Why did you come up with these different blends?”
  • “Tell me about use. Cool Cotton is for people who want...”
Overlapping Benefits
  • Benefits, as currently written, are interpreted as overlapping
  • Users struggled to choose between fabrics
  • Users preferred an option that would include all benefits
Navigation
Usability of Selecting Product Attributes
  • Users quickly figured out how to select different fabrics, styles, color and size
Style Selection
Difficulties Determining Style
  • Some users had difficulty deciding which style was best for them
  • On-model photography & model measurements alleviate this issue
Customer Quotes & Reviews
User Insights
  • Users expected to see customer reviews
  • Users recommended featuring customer quotes about product benefits
Photography
Usability of Accordion
  • On-model, front, back, detail shots and the ability to zoom-in are necessary when users are determining if the style, fit and fabric will work for them
Takeaway

Why messaging didn't convey?

When I was rewatching the test recordings afterwards, I noticed there were discrepancy and confusion occurred in users' perceptions. Why they didn't understand what we wanted to say in the copy?

One of the biggest selling point for Tommy John is the Smart Fabrics. Unfortunately, the messaging of benefits were not successfully conveyed to customers. With interchangeable benefits and confusing technical terms, customers who visited the fabric page still dropped off quickly.

next steps

Follow up with the members after sprint and keep them in the loop whether they are still interested or not. Remember to make an index file that documents every step of the process and includes all the access to research findings, lighting demos and talks, etc.

New Copy
  • Speak to why the fabrics were created, who they are suited for

  • Testing this can advance the conversation about its value

Content Structure
  • Determine how content should be prioritized and accessed

Selection Funnel
  • Style first or style and fabric simultaneously

Iterate Prototype
  • Apply visual design and interaction

  • Tweak inconsistencies (e.g. accurate prices, styles, sizes)

Test Revised Prototype
  • Moderated, in-person interview

  • Usability test with pre-determined tasks