eXpert Personal Shopper (XPS) Empowered by AI — Tailored for Your Shopping Needs

UX design lead | Research, Design, User Tests, Axure, Balsamiq, Photoshop, SQL, HTML, CSS, JavaScript | 2016

Did these ever happen when you shop for something?

I  spend lots of time researching which outdoor gear to buy.

I can’t decide which product works best for me, they all look similar.

Traveling to stores takes too much of my time.

I need help!

We wanted this personal shopper to help you

Fluid eXpert Personal Shopper (XPS) was born to solve these issues. We wanted to create the most knowledgeable shopping assistant to help shoppers find, learn about, and buy the products that best fit their specific needs, relieving them from the paradox of choices, as well as the time-consuming process of studying and comparing product details.

 

My role

I’ve been with XPS since its infancy. Together with the team, we have been working towards this vision, from research, to defining MVP and to initial UI concepts. I’ve also worked with customer facing engineers and visual designers to launch projects for our customers, as well as built internal tools/analytics to help the team better learn about users.

Customer sites:

How we defined XPS

 

A concept video: what we wanted XPS to be (sort of)

Our Fluid agency team made a concept video demonstrating the vision: XPS converses with an adventurer in natural language and helps her find all the equipment she needs for a 14-day backpacking trip to Patagonia. XPS gathers weather and product recommendations for her and helps her understand technical terms.

The result? This user finds what she needs and proceeds to checkout.

fluid xps concept videoWhat to conquer to reach the vision?

In the concept video, the shopping process looked very simple and straightforward. To make XPS a viable product though, we had much more to consider, for example, how well the technology handles natural language dialogs, how to organize and analyze product attributes in a scalable way, how to accommodate different data needs from different types of customers, and how we can create a meaningful digital experience for shoppers. Basically, we had two major challenges:

ibm watson

Technology challenge: as a technology-driven product, it’s critical to have the right technology to support the vision. IBM Watson was the technology of choice at the time. Our engineering team needed to investigate it further on natural language support, product catalog support, easiness of training Watson and scalability.

shopping

Design challenge: what’s the best of in-store shopping experience? What’s the best experience possible interacting with a store assistant? How to present it in a way that users would feel comfortable interacting with in a digital way?

 

How do people shop items that require certain knowledge?

Considering the fact that it’s hard to help people shop for fit and fashion (e.g. “Does the dress look good on me?”), we identified the areas XPS can be most helpful: items that require certain knowledge, such as surf boards, outdoor gear, home electronics, flowers, etc.

My design colleague and me did a number of researches to identify shoppers’ needs and pain points, as well existing approaches to guide they to shop.

xps research

We did shopping exercises ourselves, and reached out to friends and family members to observe shopping process for items that require certain knowledge, such as surf boards, jackets and home electronics. We were not able to do research comprehensively with the schedule and budget limit, but we did interview people from 20 to 50 years old who shop in the US and Canada.

We captured:

  • The first thing a user did
  • Steps went through to find potential products
  • Along the way, what has been considered, price, fit, function, reviews etc
  • Time spent; devices used
  • What a user ended up buying and why, if thought we got the right product, any sites she loved/hated

We put together a list of observations and general ideas of user pain points.

 

xps_research

We researched existing shopping assistance services to learn about how a shopper is guided for find products, as well as principles and best practices to help in-store shoppers.

Many e-commerce websites provided a “live chat” feature to help shoppers, but the experience is not always pleasant:

  • It generally takes more than 20 minutes
  • Salesperson recommends pricey items
  • Salesperson not knowledgeable enough
  • If internet is cut off, conversation is lost

In stores, while it’s personal to engage a talk with a store associate, and able to see, touch and feel the actual products, shopping can take a considerable amount of time with all the traveling on road and comparing from brand to brand.

We noted down the good and bad experiences a user can have during in such situations, and used in-store sales principles/best practices to guide our research.

 

Now, what should WE build to better help shoppers?

We brought to the team a list of observations and general ideas of user pain points and brainstormed on problem statements and user scenarios, and later figured out priority items to be put on roadmap. I organized brainstorm sessions, created and managed all the documents.

mvp

We explored issues with the current shopping process in detail to form problem statements.

For each problem statements, we figured out what the scenarios were, identified how
these problems were solved then, and how XPS would solve them better.

Later, we prioritized the problem statements and identified which should be included in our MVP, mostly based on technical feasibility and team resource availability.

We also brainstormed roughly on possible screens and UI functional modules. This gave us a head start on sketching out experience down on paper.

mvp2

I led the brainstorming on better shopping flows in a visual way, and figuring out areas that have potential problems to solve. Tons of post-its used.

This was my quick sketch on existing user shopping flows. The post-its represent problem statements we identified in previous steps.

I compared this flow with our concept video, and was trying to find out what scenarios needed to be covered.

 

mvp3

This is one version of general user flows I put together and pitched to the team. I also listed possible user interactions with XPS.

At this point, the engineers were still exploring technical possibilities for implementing XPS using natural languages, so we kept the discussions at a high level.

Explored design concepts & iterations

sketch

We sketched a ton to explore interaction ideas and discussed with the team on technical feasibility.

Initially, we naturally thought of interactions in a “live chat” format, which allows users and XPS to talk to each other freely. However, our engineers expressed concerns on letting user input whatever they want, because they found out there were great technical constraints on processing & training on such inputs.

Therefore, the other designer and me started explored designers in two directions: keyword based flows (if we cannot implement natural language-based XPS) and dialog based flows (if we can) We did this just in case we had to go one way or the other.

During this period, we iterated our designs very quickly with daily design reviews, as well as frequent and regular reviews with team.

 

sketch2

We also did prototypes and iterated designs based on user tests. I helped with one version and some offline user tests and later put together wireframe docs as a reference to customer implementations. From our prototype tests, users gave us a positive confirmation on the value of using XPS and the general design direction using questions & answers format.

 

But… design prototypes can’t reflect how it really works

Without real product data, it was hard to know how effective this program works for users, since our engineers were still working hard to get full understanding of technical feasibility. We didn’t know how well the natural language support can be, or how much effort needed to be put into analyzing product catalogs.

Therefore, we decided to proceed with implementation with The North Face, so that we can populate XPS with real product data, test how good it handles natural languages, and take learnings back to the XPS product from real customer implementations. I handed off the design work to a customer facing designer for customer design work, while keeping an eye on the overall development.

 

 Redesigned mobile XPS for the North Face 

 

Since The North Face launched XPS (designed for desktop), the percentage of mobile users has been at least 30%, and 50% at its peak. However, the team was struggling with scaling the design to a usable and enjoyable mobile experience. At the same time, we desired a new desktop design pattern that displays more useful information for shoppers. Therefore, I joined the team to help revamp the experience.

I worked with 2 talented visual designers using a mobile-first approach. We had quick design iterations from brainstorming, sketching to designing. I was mainly responsible for designing interactions, but it has been a collaborative and open process from page transitions to elements on pages.

Sticking to rules like “surface information at a glance”, “give XPS a personality”, “provide visual feedback at all times”, we made the new design more interactive.

We saw a steady stream of positive user feedback on the overall experience, at the same time lots of user requests on better natural conversations and product recommendations. For a technology-driven product like XPS, both continuing improving technologies and understanding user needs are crucial in bringing users great shopping experiences.

Regularly tested with users & built tools to analyze user behaviors 

I regularly tested with users and briefed the team about the result, as well as built internal tools and performance dashboards to help team better understand user journey, user feedback, and use data to back up our decisions for improvements.

 

usertesting

I regularly do quick online user tests to see if there’s anything new & major that we should pay attention to.

 

screenshot

I worked with the product leader to put together performance metrics and visualize them:

  1. User overall impression, such as user ratings, feedback
  2. User’s tendency to purchase, such as add to cart click rate
  3. User engagement, such as average user journey percentage, session length
  4. Cohort analysis, comparing metrics across users with positive, neutral and negative feedback
  5. XPS recognition quality of user responses, such as error rate

Built using PostgresSQL in Periscope Data.

screenshot2

For a conversation based the journey, the chat history reflects user journey. I built a simple program that retrieves session details for every user we want to study, especially those who gave us negative feedback.

Built in HTML, CSS, Javascript.

We learned a great deal from our users, not just how they liked using XPS overall, but also what happened to them in details (e.g. what they enjoyed and what caused confusion during their journey), and made improvements accordingly.

 Admin Suite Framework Design 

Managing XPS data is a pain — the team manages data in Google Sheets, and remember every piece of a customer project process in their heads. Even with a tiny immediate user group, we can see fairly good patterns on what can help them better achieve better results. My goal was to build a framework that helps manage customer data and projects.

At the time, XPS is in early stage, so lots of changes can happen, so this framework tended to stay high level.

Below are how I approached this problem to address this step by step, as well as some design assets. Please contact me if you’d like to know more details:

  • Identified who the users were: Identified scope for the admin suite, potential internal/external users, why they need to use it and what they can do with it.
  • Learned about users & how they work: Researched (user interviews and relevant docs)  to form mental models/personas and high-level written scenarios to tell stories about their responsibilities, pain points & workarounds, people they worked with, objects they interacted with.
  • Explored the concepts:
    • I put together a list of system requirements, discussed and prioritized them with the team.
    • I explored key screens in user flows
    • Sketched out key UI components on whiteboards & in Axure, iterated with team/user feedback

 

admin-research
admin-req
admin-flows
admin-screens