Style Boards

It's hard for customers to get personalized style help without visiting a Nordstrom store. Style Boards was designed to bring Nordstrom's signature 1-on-1 expertise and handpicked recommendations to the online customer. 

Customers get personalized style help with no pressure to buy, and stylists get an easy way to serve customers and track sales from anywhere.

 
SB Runway Display Copy 5.png
 

My Role

Design lead

I worked intensively on Style Boards for two years, from early inception to MVP and beyond. As the design lead, I collaborated closely with Product, Program, Engineering, UX Research, and UX Writing to create an iOS app for stylists and a web experience for customers. I also contributed to setting the vision, defining goals, QA testing, writing training documentation, creating PR & marketing material, and later influencing other programs across the enterprise. This was a huge investment for the business, requiring weekly presentations to VP level leadership. 

 

Vendor Partnership

Making the case for a custom stylist app

Initially, the business planned to pilot a vendor solution called BevyUp with a group of 50 stylists in two key markets, and I was brought on to consult on the pilot rollout. It wasn't long before I identified major opportunities to improve the stylist-facing experience. I gained approval with key stakeholders to build a custom stylist app using the BevyUp back-end, first by planting the seed with rough sketches and then by A/B testing conceptual wireframes against the vendor's out of the box solution. 

 
 
FullSizeRender copy.jpg

Early sketches

 
 
 
Style Boards Improvements Mockups.png
 
 

Conceptual wireframes used to illustrate benefits of building a custom front-end

 

The biggest difference between my concept and the vendor solution was the order of operations: BevyUp's flow started with creating or looking up a customer, while mine started with pulling together items. 

Hypothesis: Stylists are inspired to curate a look when they see an item they like without always knowing who they want to share it with, thus would appreciate the flexibility to draft looks and share with a customer later. 

Research Findings: A lab study with five Nordstrom Stylists proved my hypothesis and exposed opportunities for improvement with my conceptual wireframes, like simplifying the navigation, making required actions more clear, and increasing the prominence of board notifications. 

"Starting with creating a board, rather than a customer, was a more natural task flow for how the stylists work." 

—UX Research report

 

“It’s easier to do in sequence – first pull product, then add product, then see what I pulled, and then add customer info at the end.” 

—Study participant

 

Defining success

Creating a vision, goals, and guiding principles

There was a lot of pressure to deliver Style Boards quickly, which caused team members to overlook the need for a strong foundation: vision, goals, and guiding principles. Moving fast only makes sense when you know where you’re headed, so I led a number of working sessions to more clearly define success. Through these conversations we realized the project was as much about building trust among stylists as it was about serving customers. 

 
 
SB Goals.png
 
 

Usability

Iterative prototype testing

With success defined, I moved forward with wireframes. We were constrained by dev resources on the customer side but not on the stylist side, so we focused on creating a great customer experience by providing stylists with a simple, intuitive app. The core of the app was the board view, where stylists add items, enter a title, add a customer, and write a message.

In total, it took dozens of iterations and prototypes, four lab studies, and countless peer workshops to land on a solution that matched their mental model and packed loads of functionality into a lightweight screen.

 

A sample of Board View wireframe iterations. The biggest challenge was figuring out what actions belong together and whether to make the flow fixed or dynamic.

 

I went with a three tab design to give stylists flexibility in their process. While the order of the tabs matched their rough workflow, stylists needed a tool that was flexible enough to support different scenarios…

  1. Off the sales floor (primary): When stylists have time and space to focus, they can carefully curate a look they’ll send to a customer they want to reconnect with.

  2. On the sales floor (secondary): Stylists experience constant distractions on the sales floor, and may only add a title, item, or customer name as a reminder for later.

 
04_Items Tab Default.png

Browsing items to add to a board

12_Item Added to Board Saved.png

Reviewing the look at it’s being created

15_Customer Tab Default.png

Adding a customer and a personal message

 

Research Findings: With the help of coach marks, all six participants noticed and used the tabs to browse items, review items on their board, and add customer info. However, four of six missed the board title field—even with an error message, it wasn’t clear to participants what they needed to do to move forward.

It made the most sense for the information hierarchy to keep the title field at the top, so I resolved the issue with improved copy and a unique error message design. (There are few places where deviating from established patterns are necessary and this was one of them).

 
28.1_Add Title Reminder.png
 
 

Communicating value

Customer experience

Constrained by dev resources, the MVP customer experience was a customized version of the vendor’s out-of-the-box solution. I focused on small changes that would help customers understand that each board was created just for them by a real person, not an algorithm. The familiar face, stylist name, and store name aimed to put the customers at ease while the stylist’s name next to the “new message” notification reinforces the personal touch.

 
 
CX_MOW_09_Landing Page Boards Saved Copy 3.png

Style Board Landing Page

CX_MOW_09_Landing Page Boards Saved Copy 4.png

Viewing chat message in context of board recommendations

 
 

Another major constraint was using text messaging for board notifications. I worked closely with my UX writing partner and legal team to land on copy that felt authentic yet communicated info required by the Federal Communications Commission. (Quite a challenge when you only have 160 characters to work with including a link to the board).

 
Screen Shot 2018-10-23 at 9.10.53 PM.png

For MVP, the customer received a link via text message to access their Style Board

 
 

Research findings: All five customers understood how to interact with the Style Board and noticed that the stylist headshot made the experience feel more personalized. Four of five noticed the new comment from their stylist at the bottom of the screen and said it behaved as expected when they tapped on it.

However, customers were confused by having two calls to action: Do I tap the link or do I reply Y? To resolve the issue, we moved the “Reply Y” part of the text notification to the Style Boards landing page.

 
 
 

Launch Prep

A race to the finish

Come QA time, the app had a long way to go. My Product Manager, Technical Program Manager and I put a lot of extra hours logging bugs and creating a prioritized list for the dev team to focus on. This phase of the project required equal parts compromise, communication, and empathy for project partners. 

Quite late in the game the team also realized Apple wouldn't accept the app into The App Store because it was internal facing—rookie mistake ;) I created an app download portal very quickly, so we were able to ship on time. 

When it was all said and done, we successfully shipped on time and provided real value to customers. It required integrating with 22 teams, creating 140 Zeplin screen designs, and five user research studies.

 

outcomes

What worked & what didn't

Since launch, Style Boards has a consistently higher customer satisfaction score, conversion rate, order value, as well as a lower return rate compared to shopping online without Style Boards. Best of all, the technology fades away and what customers remember is the positive interaction they had with their stylist. 

 

"I absolutely love this experience! My stylist is on point and I love the things she adds to the board. It's great that I can do this virtually on my own time instead of having to go to the store." 

—Style Boards Customer

 

I encountered many challenges on this project, and, in turn, learned more than I could have imagined. Looking back, I realize that most challenges stemmed from a lack of clear requirements. I was reminded that "delivering fast" is not the same as working as fast as possible; this disconnect led to tons of rework and debate down the road, costing us precious time. When faced with a similar situation in the future, I will be a stronger advocate for defining requirements early on. 

 

Post-MVP

Iterating based on feedback

There were two major learnings immediately after launch:

  • Customer Opt-In: It wasn't clear to customers that they had to opt into text notifications to get Style Board updates, so they were missing out on personalized recommendations.

  • Order Tracking: The way we tracked purchases wasn't cutting it and stylists were missing out on commissioned sales.

 
 
SB Opt In.png

Customer Opt In: The team made the decision to require customers to opt into text notifications to participate in Style Boards. Up to this point it was optional. Anytime you create barriers to entry, you risk abandonment—but we felt comfortable with the change because communication between the Stylist and customer was so critical to the experience.

I included a peek of the board behind a modal so customers could see the value of opting in, and emphasized the Stylist's headshot to reassure customers that they weren't opting into marketing messages. To our surprise, very few customers chose not to opt-in.

 
 
My Sales_02.0 Copy.png

Order Tracking: We learned that between viewing a board and purchasing items, customers take many different paths. The order tracking system couldn’t always maintain a connection between the stylist and a customer order so stylists weren’t getting credit for sales they influenced. Because one of our goals was to build trust among stylists, we knew this was a critical fix for long term success.

After updating the back-end, I redesigned the stylist sales screen to be as transparent as possible. I included a link to Board Details which showed the shipping status of each item (this was important because stylists only earn commission once an item is shipped). We also included a price breakdown showing purchases and returns within each order.