Nordstrom Trunk Club

final designs - trunk request

MY ROLE

Design lead

TEAM

Product manager
Engineering manager
Seven developers

Trunk club was in the midst of a business model transition. In the past, stylists initiated 1-to-1 conversations to learn what customer's wanted in their first Trunk. But this wasn't scalable as we grew and integrated more closely with Nordstrom.

The first pass at a tech solution had significant drop-off and introduced customer confusion. How could we increase new customer Trunk request rate while learning enough about current needs for a stylist to pack a great first Trunk?

Background

Trunk Club is a personalized styling service for men and women. A stylist will pack clothing items and outfits based on a customer's style preferences, budget and needs. Customers can then try on the items at home, keep what they like and send the rest back. Trunk Club had been acquired by Nordstrom a few years ago, but was just starting to be more closely integrated into Nordstrom's brand and business model.
I worked on the customer first experience team as the design lead. Our team consisted of myself, a product manager, an engineering manager and seven developers. We were focused on the onboarding style quiz, account creation, and all other experiences that led a new customer to get their first Trunk.

Scope & Goals

The original project brief outlined "Express Preview Improvements" had a narrow scope to make minor improvements to the existing experience. There had already been a few rounds of minor tweaks with negative or flat results. So I met with our product leadership and got buy-in to spend more time on the project researching and exploring new solutions.
In an ideal world this project would have reexamined the entire onboarding flow as a wholistic experience. However due to time and technical constraints, as well as the complexity involved in coordinating style quiz updates with data science, the scope of this project focused solely on the Trunk request flow for new customers.
Our team's goal was to redesign the Trunk request experience for new customers in order to:

The Problem

Once a customer had taken the style quiz and created an account, they still needed to request their first Trunk. A stylist would then prepare a preview of items in the Trunk for the customer to review and approve.
But a significant percent of new customer accounts never requested a Trunk. The flow had the second highest drop-off rate in the customer onboarding funnel and user feedback indicated that customers were confused and losing interest. Additionally, stylists felt they didn't have enough direction to pack a good first Trunk.
Through customer and stylist feedback, I identified a few key pain points:

No guardrails, little guidance

After creating an account, users were dropped into the app where the Messages tab would be for existing customers. The screen prompted them to request a Trunk, but we saw significant number of users go to Discover or Profile instead.

Also users could get into a 'limbo' state if they created an account on web and then downloaded the iOS app, where they could send messages into the abyss because they were not yet assigned to a stylist.

What's in it for me?

For users who did follow the happy path and entered the request Trunk flow, they were immediately asked to provide a shipping address and credit card. Unsurprisingly, this is where we saw the highest drop-off in the flow.

We were presenting the highest friction steps that requested sensitive customer data without building momentum, excitement or demonstrating value.

We also heard a variety of common customer confusion points:

  • Unsure if they will be charged now and how much
  • What does a Trunk cost? What is a styling fee?
  • Many Nordstrom cardholders did not know they could add their card here to waive the styling fee.

"I knew it was a robot"

For users who made it through, the next step displayed data science generated outfits, internally referred to as "express preview." Users could like or dislike the outfit items. Liked items would appear in the Trunk for the stylist, disliked items would be removed. Customers knew these were not picked by a human based on how quickly they were generated. They expressed disappointment and were already suspicious a human would not be packing their Trunk.

Stylists hated express preview as well. They didn't know why these items were chosen and placed in the Trunk before they had started packing. They would often remove those items before packing a Trunk. It also didn't give good direction. Stylist didn't know why items were liked or disliked.

Heavy cognitive load

Customers were able to enter specific needs but found the process uninspiring, especially if they were unsure what they wanted.

There were also usability issues. Customers thought the suggested pills were already added to their request. There was no limit to the amount of item requests or indication of how many items fit in a Trunk. Stylists would get requests they couldn't fill because there was simply not room in the Trunk.

How does this work?

Customers expressed general confusion about the service. They didn't understand what a preview entailed, when to expect that, or when to expect the Trunk to arrive. They weren't sure if they could request for a certain date. When or how much they would be charged.

Understand

We had a good sense of pain points, but wanted to better understand what goals and motivations customers had for their first Trunk. What brought them to Trunk Club? In addition, we also needed to know what information was most helpful to enable a stylist to pack a Trunk preview that would convert.
To help us answer these questions, our UX researcher and I set up a diary study on dscout to interview new customers and follow them as they signed up for the service. We also set up internal interviews with stylists. Finally because current needs & goals used to be gathered via chat with a stylist, we reviewed those old conversations and pulled out key themes and quotes.

Key Insights

Some customers knew exactly what they were looking for and wanted to explain that in detail and request specific items. Other customers were unsure and wanted the stylist to decide.
Stylists struggled to pack Trunks that would convert if there was no guidance on current needs/goals.
Customers often had a "trigger" occasion or situation in mind where they wanted to improve their look.
Stylists would frequently ask "is this trunk for work, weekend, a special event, or something else?" to narrow the focus of the Trunk. It helped them to pack a thoughtful, curated selection when there was a theme.
Customers wanted to see some options and get inspired. "Blank slate", open ended forms made them feel like they need to put in a lot of effort.
If a customer had a specific event or wanted to ensure they'd be home, they wanted to be able to schedule when the Trunk would be delivered.

Explore

I kicked off the exploration stage by facilitating an ideation workshop with our team. We reviewed the problem, research insights, inspiration, and sketched ideas.
After dot voting and a prioritization exercise based on feasibility and anticipated impact, we decided to flesh out the idea of presenting the customer 'themes' to choose from and then customize. A lot of customers had these situations in mind anyway and it could simplify the experience by helping the customer develop a mental model of what to expect in a Trunk and reducing choice (or the "blank slate" effect). Stylists had used a similar approach in their conversations with customers and loved the idea because it helped them narrow their choices when packing the Trunk.
I then iterated on this core idea through multiple critique sessions with my squad, the design team, stylists and stakeholders. We recruited users to concept test a prototype. Iterated more based on their feedback. The concept was further refined based on level of effort and scope.

Concept exploration: Top 3

One of the pain points for stylists in the old experience was that customers would tend to add too many requests or none at all. We also heard from customers that they felt overwhelmed by the existing request form.

I wanted to simplify the task and narrow the customer's focus by guiding them to just add top three items they'd like to see. I thought if we could nail those three items, we could drive additional Trunk requests to meet additional unmet needs.

Customers gave very positive feedback during testing, especially around the suggestions and search. However, stakeholders and stylists felt it might be too restrictive.

Concept exploration: Add notes and inspiration

Another pain point we heard from stylists is they didn't have enough direction at the individual item request level. Some customers knew exactly how to describe what they wanted, while others struggled.

This concept allowed customers to add notes at the item level but also let them browse and add visual inspiration.

Customers loved the browse inspiration feature, however some felt adding notes to each item would be time consuming (notes were not required, but not clear enough in prototype). Ultimately there were technical constraints in our internal styling tool with item level feedback, so I had to explore alternative solutions.

Design system curve ball

In the middle of the exploration phase, a couple things happened. First, we were thrilled to have a new product manager join the team. She was instrumental in helping to define the MVP, coordinate resources and launch the feature.
Second, Nordstrom announced Trunk Club would be fully integrating with the broader organization. One consequence of that was we needed to update our brand and design system to more closely match Nordstrom. A lead designer and I conducted a design audit at this time and made short and long term recommendations to accomplish this.
One of the longer term recommendations was to build out a new design system in Figma. We were already experiencing the pain as a design org of having only a limited component library. And also to find a medium-low effort way to replicate this system in code. The current approach lacked comprehensive shared styles, components, consistency, and guidelines.
We would make simple visual changes in the short-term and then use a lift-and-shift approach to update to the new design system built in Rebass and documented in Storybook. Get a Trunk would be the first feature to use the new system.
I created the majority of the new design system in Figma, updated and built out component variations based on Nordstrom, and also introduced new, reusable components to the system for the Get a Trunk feature.

Final designs

Empty states & new architecture

We knew some users would not be ready to request a Trunk, would have questions or want to explore. Also a small percentage of our customers stated they just wanted to talk to someone first. I wanted to keep the main navigation consistent whether a customer had requested a Trunk or not. So I designed empty states for the Messages tab and the Trunks tab. The primary CTA on the Messages page encouraged our more high-touch users to ask questions and start a chat. On the Trunks page, the primary CTA encouraged customers to request a Trunk. It also included a "How it Works" section that explained the process in three steps.

While we were working on this project, another product squad was working on redesigning the main navigation to support a Home and My Style section. The Home section included a dynamic Trunk status card which we were able to leverage as an additional callout for new customers to request their first Trunk.

Focused entry point

The new flow leads with an interstitial screen that callouts key value props and clarifies questions about the service that we frequently heard during user testing. The goal was to simplify the "next steps" information to a few key points and guide the user to the CTA.

In the previous architecture, this CTA to request a Trunk lived within the main app navigation where the messages tab would normally be. I chose to use model instead to focus attention and limit options for the user. Users could still close out of the model and drop into the main nav where they would see empty states on Messages and Trunks that would explain the process and guide them back into the Request a Trunk flow.

Schedule Trunk

Some customers want to schedule their Trunks for specific time, especially for those who want to be styled for a specific occasion. However based on testing and user feedback, the majority of new customers wanted a Trunk as soon as possible. To reduce cognitive load, I designed this step to default to ASAP and hide the calendar until the customer engaged with the "schedule" option.

This step was also an opportunity to clarify confusion and set expectations. The ASAP option includes secondary text that explained the customer could expect a preview of their Trunk within 24 hours.

Trunk Focus

The core concept of this project was that guiding users to focus on a specific occasion would help reduce choice paralysis, set better expectations, and give stylists a more clear, actionable Trunk request to pack.

The focus options were based on common themes identified after reviewing dozens of stylist conversations. I worked with our marketing team to develop imagery and copy for each Trunk focus. Our team then used Contentful as our CMS to populate the content so it would be easy for content stakeholders to switch out seasonality.

Trunk Details

This step went through the most iterations. It was tricky balancing simplicity and customization. Some customers had very specific, detailed requests for their Trunks, while others just wanted to see what the stylist would pack.

We ultimately landed on allowing up to 6 category requests and a free form note. In my initial designs for this approach, customers could search and browse categories to add and see recommendations based on their preferences and behavior. I also created a lower effort option review with the team where customers could quickly type to add shopping list items. Our team decided to go with the lower effort option to reduce scope for the initial release.

Add Payment Improvements

Adding a payment method is now shown at the end of the flow, after a customer has a better understanding of what they're getting and what to expect. I also included a number of copy improvements to address the common customer confusion points we heard in feedback sessions. Specifically:

  • Why we require a credit card at this stage
  • Calling out that adding a Nordstrom credit or debit will waive the styling fee
  • Emphasizing there will be no charge to the card now
  • Specifying the styling fee and reinforcing that customers will have a chance to review and approve their Trunk

Results

The new Get a Trunk flow saw significant increases in all three of our primary KPIs:
For an onboarding conversion funnel, these were huge improvements. Our team's PM and I presented the revised flow and results at our monthly product review day in front of Nordstrom's leadership and 500+ employees. We received extremely positive feedback and it was a great opportunity to gain exposure for the Trunk Club service across the broader Nordstrom product and tech orgs.

Next steps & iterations

We're currently using learnings from this project to redesign the Trunk request flow throughout the app across various ingress points. I'm pairing closing with the lead designer on that project to include the search, browse and discovery concepts I developed but didn't make into the shipped feature.
After this project, our team started working to redesign the entire onboarding and account creation flow to make it more inclusive, seamless and dynamic.