rackofclothes.png

Layer / Neiman Marcus

Conversational Commerce App

August to Sept 2017

 
 

THE PRODUCT

  • Conversational commerce app through an omni-channel shopping experience
  • Provides personalized shopping experience with a personal stylist
  • Personalized 'looks' and unique offers and exclusive items
 
 
  • Customers can chat and dive into specific items sent by stylists
  • Checkout through the app without having to leave the chat experience
 
 
  • Customers can send and receive messages through sms, email, or through the chat experience
 

Results

Results are from week 3 of the pilot (Oct 24th 2017). I will update progress bi-weekly.

We have successfully seen:

  • 24% sale conversion rate for every 'look' shared. (This stat has been trending upwards every week).
  • A near 1:1 ratio of messages sent by customers to stylists.
  • 70% 'like/dislike' engagement per item shared.

We are still pushing out additional features as of mid-Oct 2017 to improve the user experience for both the customer and the stylist.

 
 

INTRODUCTION

Background

This project spanned a little over a month and was a collaboration between Layer and Neiman Marcus.

Layer is a platform that powers customer conversations and we worked together to bring a conversational commerce experience to Neiman Marcus. 

Neiman Marcus is a large department store founded in 1907 in New York City. They wanted to bring their customer service expertise to a newer generation of shoppers who preferred online shopping but still wanted a talented stylist to help them with their shopping needs. 

Our goal was to design and implement a pilot for Neiman Marcus using Layer as a foundation. We were successful in launching them an MVP pilot in a little over a month.

My Role

I was the Product Designer on this project with three Software Developers and a Product Strategist. 

I led the design for the first few weeks but later switched to front-end work when the project shifted away from divergent-ideation and testing towards more focused deliverables. 

My front-end contributions were done on React.js where I styled and built out the majority of the front-end components and UI. 

 
 

KICKOFF

 
 

We had a great kickoff with Neiman Marcus to start the project. Without going into too much detail about each exercise, we focused a lot of the work around where Neiman Marcus saw their digital offerings moving forward. They have been struggling to compete in the modern online shopping world and this project aimed to be a glimpse into a future where Neiman Marcus prospers in both the online and brick-and-mortar markets. 

It was important for us to empathize with our clients, not only with the desired outcome for the pilot, but how this pilot fit in their larger vision. 

 
 

FORMING THE PRODUCT

Crafting the 'Looks' Feature

Early on, we came up with an idea to mimic the existing stylist-customer relationship in their stores. The conventional Layer app was able to send individual items to the customer through a basic chat interface. This was not sufficient for the Neiman Marcus pilot because a key value add of a stylist is the ability to collect information and put together an entire outfit for the customer. 


Working with the Neiman Marcus team, I conducted workshops to figure out what the outcomes of the ‘look’ feature should be. We asked questions like:

  • What is the higher customer problem that needs to be solved?
  • How does this align with any higher goals or motivations of the user?
  • What is Neiman Marcus trying to accomplish with this feature? 
  • How does Katie (our stylist persona) currently put together and share looks? Is that the way she should do it using this conversational UI? 

First Attempt at the 'Looks' Feature

The first draft of the ‘looks’ feature was inspired by an editorial feel. This aligned with the high-end fashion retail world. A definition of editorial is “preparing of material for an audience” so we thought it was fitting (pun intended). 

We wanted it to be an immersive experience, separate from the chat view, in order to provide a higher-touch service. Other conversational commerce apps just show a carousel of items. This limits what the customer can look at and ‘imagine’ themselves in. This did break away from being strictly within the chat experience, so it was a top priority to de-risk this assumption. 

 

IDEATION

Early sketches of my 'editorial' inspired 'look'.

 

Each ‘look’ was to be headlined with a collage of the items in the ‘look’. We started with some predetermined layouts that would provide the stylist with some flexibility in how they wanted to present the ‘look’. Our goal was to go from a ‘single item carousel’ to a ‘lookbook / Pinterest board’. 

Sizing the images within the collage also gave a visual affordance to the user as to what pieces were more important to the look.

We learned that it was important for the stylist to provide comments on the entire ‘look’ and individual items. We incorporated those learnings into this design by showing the stylist’s comments underneath the collage. 

 

WIREFRAMING 'EDITORIAL' IDEA

 

Medium fidelity wireframes from this phase

I wanted the comments to still feel like it was part of a chat experience. I wanted the customer to feel like the stylist was directly messaging them about each item as they scrolled through the ‘look’.  However, at the same time I didn’t want to confuse the customer to think that this was the chat interface. 

A snapshot of the testing and refining process of the 'looks' feature.

We ideated and tested a few iterations and found one that met our desired outcomes. 

 

This is how the ‘look’ feature evolved later on in the project when we were constrained to strictly using mostly Layer’s UI.

 

Onboarding

The onboarding was an important part of the user journey and our clients expressed that this was a huge area of risk. The reason was that while onboarding in general is very important to the overall user experience, the specific user-base for this pilot is a demographic that is not as familiar with conversational commerce and maybe even online shopping. In general, the demographic (based on data from Neiman Marcus) is women in their 40s to early 60s with significant disposable income. 

So the onboarding experience wasn’t just about familiarizing them to the services provided by the stylist/service (like free express shipping, custom styles, access to limited items, etc…) but also to onboard them to a conversational commerce experience. 

The Neiman Marcus team and I came up with two distinct user ‘jobs to be done’ when they first sign up for the app: 

  1. ‘Window shopper’: A user who is not interested in necessarily buying something immediately but is interested in the service and wants to ‘window shop’. 
  2. ‘Mission shopper’: Someone who signs up for the pilot and immediately has something in mind they need to purchase (for themselves or for another person). 

These two distinct ‘jobs to be done’ helped us ideate an onboarding user flow that would be able to satisfy both customer needs. 

On the flip-side, the stylist also needed to gain as much information as possible early on from the customer in order to create a ‘look’ and send it to them. The faster we got information to the stylist, the faster they could meet the customer's needs and eventually result in increased sales. 

Through researching conversational commerce apps we found that getting them comfortable with clicking on elements within the chat experience early on lead to success. Many users to this day are not familiar with chat UI elements beyond text bubbles. We prototyped the idea of having a series of automatic questions (depending on if the user was a ‘window shopper’ or a ‘mission shopper’) to get the minimum amount of information our stylists told us they needed in order to start putting together ‘looks’. 

I also designed iterations of text-input specific onboarding questions because they required a unique chat-interaction experience and I wanted to de-risk that as much as possible.

Due to newer constraints and roadblocks, we pivoted this experience to a non-automated onboarding experience. The client wanted the perks and intro to the stylist to be the first thing they experienced outside of the chat experience. 

I applied the same learnings from the research we did to this simpler onboarding flow. The user would have to click on the chat bubbles that resembled what they would later see in the experience. Again, this was to familiarize them with this interaction element to reduce friction later in the experience. 

 

This is what an interactive chat element looks like in the experience.

 

Individual Product Details

I explored different designs for a detailed view of a specific item. This functionality is a core part of any e-commerce shopping and especially important for Neiman Marcus because the designer’s information is very important to their user base. 

 
 
 
 

CRAFTING THE STYLIST TOOL

Designing a great experience for the stylist was as important as the experience for the end user. If we could not equip the stylist with a great tool, then they would not be able to provide the service that Neiman Marcus intended. 

Likes & Dislikes

Showing what the customer liked and disliked was an important part of the stylist’s experience because it was one of the key ways for them to drop into a conversation and get a sense of what the customer’s preferences were like.

The first draft of this view was not optimal as the horizontal scrolling on a browser was not ideal and it showed very few items at a time. 

 
 

I stepped back and recollected the purpose and outcome of this specific view. The stylist wants to be able to see a high level view of what Connie likes. This assumes that they don't need to see both liked and disliked items at the same time, but both just need to be accessible. 

I switched to an accordion design in order to show more information about likes or dislikes to the stylist at once. I reduced the size of the items so that it was three per row. This provided more items at once to get a better sense of the customer’s preferences. Our user research showed that the stylist did not necessarily need a lot of detail for each item, but it was more important to get an overall sense of the style. 

 

I experimented with adding a ‘purchased’ icon to each liked item, which was well received by the stylists. I also added a ‘x of y’ to the header bar to give an affordance to show how much is being shown and how much is being hidden.

 

There was a third iteration of this view with a 3-item preview. This gave the stylist a quicker way to see if any new items were liked or disliked without having to open the accordion tabs. 

 
 

Neiman Marcus was going to force the stylists to fill out a giant list of profile information. We tried our best to tell them that the customer would not want to be bombarded with questions all the time and that there could be a better way to solve the higher level need (i.e. how might we best equip the stylist with the correct information to create ‘looks’ for the customer) but they were very fixated on this solution. 

We worked within these client constraints and created a ‘canned questions’ feature that allowed the stylist to quickly type in a command in the chat input to send a multi-option choice card to the customer. Once the customer selected an answer, it would be automatically saved in their profile to be referenced by the stylist later. This was accepted by the client and was the best middle-ground. The stylist could still technically ask all the questions at once but they are now more equipped to easily sprinkle in these questions more organically within the interaction. 

 

Example of an early ‘choice card’ design in staging that our engineer spiked.

 
 
 

FRONT-END DEVELOPMENT PUSH BEFORE PILOT

Mockup of the stylist view.

Feedback and testing showed that the original concept of keeping the stylist view flat, clean, and simple did not provide enough contrast. Certain parts were indistinguishable, the hierarchy was difficult to understand, and it was hard to anchor your eyes when scanning the screen. 

 

What we got 'out-of-the-box' from Layer.

 
 

What the pilot looked like when launched.

 

As you can see, it required a lot of work to make it look and function like the designs I mocked up. While not perfect, I was able to get it to a shippable state within a week. 

During this stage of the project, Neiman Marcus and Layer conflicted on the final state of what a finished pilot should be, so we were left in the middle to manage that relationship. Ultimately, we were left with very strict requirements, leaving no room for ideation and user testing. While this was difficult for our team, I was determined to make the best of the situation and design the best experience I could within the constraints and encroaching deadline

My process building out the front-end was to follow basic UX heuristics and do as many ‘hallway-tests’ as possible. Some of the things I focused on were:

  • Overall balance and correct panel ratios 
  • Applying basic design heuristics like the ‘C.R.A.P’ design principles (contrast, repetition, alignment, and proximity)
  • Icon consistency 
  • Smooth interaction user experience for key parts of creating and sending a look

Test and refine what I can

With difficult project constraints at hand, I tried my best to do as much testing as possible. They might not have been the best testing environments or with real end-users, but any user testing is better than none! 

One example of this was testing the icons that corresponded to different content on the stylist dashboard. I used three ‘resemblance icons’ (i.e. symbols that directly represent the physical object) rather than ‘reference icons’ (i.e. symbols depicting based on analogy) to reduce the cognitive load and learning curve of the app. I tested with numerous people who had no background knowledge of the product and tested the information-architecture.  

 
 

I also spent some time refining the icons to be more ‘optically balanced’. Here is a great article explaining this concept. The basic idea is that certain shapes must be sized differently according to its ‘base’ shape (i.e. square, circle, triangle, etc…). Below is an example from the Medium article depicting that circles must be a touch larger than squares to be ‘optically balanced’:

 
 
 
 

RESULTS AND LEARNINGS

Results are from week 3 of the pilot (Oct 24th 2017). I will update every week for the first couple of months.

We have successfully seen:

  • 24% sale conversion rate for every 'look' shared. (This stat has been trending upward as the weeks have gone by).
  • A near 1:1 ratio of messages sent by customers to stylists.
  • 70% 'like/dislike' engagement per item shared.

We are still pushing out additional features as of mid-Oct 2017 to improve the user experience for both the customer and the stylist.

Project difficulties and empathizing with the clients:

One of the most important lessons I learned through this project was the importance of empathizing with the client and guiding them through the product development process. This project was not short of disagreements and project management issues. At times the old adage, 'too many cooks in the kitchen,' was the best way to explain the project.

Neiman Marcus was embarking on this pilot project in an efforts to further modernize their e-commerce capabilities, and we had to guide them through the complex process of designing and developing a conversational commerce platform that would integrate with their existing system. 

I learned to communicate better with my internal team and with the clients to remove any ambiguity due to the high stakes and tight timeline. I can honestly say that this was one of my more difficult projects I have ever been on and subsequently grew a lot because of it. 

Code, code, and more code: 

I spent a significant amount of my time on this project helping to develop the front-end. With a small team, every ounce of extra contributions went a long way. While comfortable with basic styling on a React app, I had to challenge myself to help build out more complex front-end components. This allowed the engineers to focus on the back-end and have a polished and functioning front-end to work with.

While I would never consider myself a front-end developer, I enjoyed the challenge in doing what I could, enough that I completed a certificate in the Codeacademy Pro Intensive javascript & react course.

Testing where you can, when you can:

Some of my other projects saw intense deep dives into the user problem and diverging solutions. This was one of those projects where testing was not a priority set out by the client. A lot of the feature requests came straight from Neiman Marcus with very little wiggle room. In light of that, I did my best to test when and where I could. Sometimes that meant quick email questions with the stylists. Other times, it meant doing 'hallway-tests' to figure out which design decision made the most sense. 

Overall we did the best that we could in the given circumstance. Not all projects are given the right time and resources to be able to do thorough user testing. We are taking this 'build-measure-learn' approach and have secured additional work with Neiman Marcus post-pilot to fix and refine the product with the more user-centered approach.