Part I

Project Background

MindBody is the market leader in health and wellness business management software. The front desk and back office of over 60,000 salons, yoga studios, fitness studios, and wellness practices run on MindBody. MindBody is a public company and currently has a market cap of over $1.5b.

Note

This case study covers a large year long project in detail.

If you are looking for a shorter summary style case study please read my case study about my work with Evidence Based Courses here.

1

Problem

The MindBody POS was out of date, difficult to learn, and slow to operate.

Often, software usability issues can be a driver of attrition and early churn, in particular, usability issues affecting key parts of a system. The point-of-sale system is a key part of any retail or service business. It is relied on throughout the day, and speed and ease of use are mission critical for a business’s success.

Above: the former POS design — a design that hadn’t been updated in almost 10 years.
Point-of-Sale Speed

In general, slow work flows can be annoying, however, on the POS screen, a slow work flow can be particularly painful, with the customer often in front of you wondering if something is wrong with their payment.

Point-of-Sale Ease of Use

Mistakes made during checkout can cost money and/or hurt a business's reputation. A clear and easy-to-understand interface lessens the chances of these kind of mistakes. Additionally, many staff work part time at a studio and receive little formal training on the MindBody system.

PROBLEMS

  • The existing POS checkout took too long (too many steps/clicks/waits)
  • A lack of multitasking ability
  • As a result, clients unable to give a high level of customer service
  • Dissonance Between Desktop and Mobile
  • Generally out of date and difficult to learn and use

GOALS

  • Reduce Cost of Delivery
  • Decrease the time for new users to learn (both findability of features and ease)
  • Reduce attrition
  • Increase speed of task completion for veteran users
  • Reduce errors
  • Increase Sales
  • Build an industry-leading POS to remain competitive
“The checkout process is not smooth, it takes so many clicks, and if you have to change the ticket to a different service or add a retail product, it makes it way too long for a customer standing there.”
— Listen360 Feedback
2
Project Background

How and Why the Project Started

This project came about from generative research lead by Amaya Becvar Weddle, Ph.D. (the senior user research manager at the time) with the help of another user researcher, Marianne Conner. All under the direction of Susan Rice, Director of UX.

Opportunity Score is measured by how important a task is and how satisfied users are with how well that task is currently supported.
Page Visit Rank is measured by how many page views the page receives.

Two generative research studies indicated the opportunity of redesigning the POS. From a quantitive research point of view, it was found that the POS was the most-used screen in the MindBody desktop app, and was ranked #2 on our Opportunity Score projects list. As a result, a follow-up round of ethnographic site visits was scheduled.

3

Observational Research

We visited 12 businesses from a diverse variety of industries  in the LA area. From this research, we discovered many examples of where the current POS was failing users.

Summary of Site Visits
  • 12 LA area businesses
  • Spanning 5 different industries
  • 2-3 hour long visits
  • Observational research and interviews during slow points
Common Problems

The 12 ethnographic site visits showed that, with the current system, common small retail sales, such as selling water to multiple students before a yoga class, took too long, and common service sales, like selling a membership, were confusing.

High-Level Takeaways
  • Small retail sales are deferred until later or tracked on paper (5 out of 12)
  • They often had a MindBody guru on staff
  • Very busy at many of these places — it’s not a line, it’s a crowd
  • Multitasking issues
  • Front desk is slammed before class, in particular
  • Issues with operational speed and ease of use across all sites
4

Project Success Metrics

SUCCCESS METRICS
1. Reduce Time on Task (Qualitative Control Scenario).
2. Increased the System Usability Score (SUS) score.
EXPECTED OUTCOMES
  • Increase % of completed sales in retail
  • Increase payment volume (measured month over month)
  • Reduce the amount of attrition due to payments/retail
  • Increase app store ratings
5

Personas, Scenarios, and Stakeholder Interviews

Personas

Amaya led a workshop using the site-visit observations to synthesize 5 primary personas, each representing different industries. Liza Plotnikova (UX designer) designed the persona pages.

OBJECTIVE

To define a set of typical users of the point-of-sale in MINDBODY that can be used throughout the project.

The core questions we wanted answered with these personas were:
  • Who are the users of the MINDBODY point-of-sale, including mobile?
  • What are they doing (context) when they process sales?
  • What areas of the product will they be in when they’d need to process a sales transaction?
  • What areas of the product will they be in when they’d need to process a sales transaction?
  • What about their context should we bring into the point of sale?
APPROACH

A collaborative workshop with the UX/PM team bringing together hours of observational research in the field.

UX Scenarios
I led the creation of 37 UX scenarios, creating multiple scenarios for each persona. We used Kim Goodwin’s UX scenario methodology.
Executive Stakeholder Interviews
Our Director of UX, Susan Rice, and the POS Product Manager, Joey Saldana, led stakeholder interviews with the executive team at MindBody.
6
Project Design Principles

Based on the synthesis from our ethnographic research and interviews, we formulated 4 project design principles

1
Don’t slow me down (in front of users)
2
Allow me to Multitask (interruptible and forgiving)
3
Make it simple enough for anyone to use
4
Give me what I need when I need it (context-relevant information and actions)
December 2015 — Janurary 2016

Part II

Creating a
3-Year Vision

Starting with a Vision to Think Broadly

To kick the brainstorming process off, I led the creation of dozens of How Might We (HMW) statements, and then held a large cross- discipline HMW workshop (with team members from customer support, sales, user research, UX design, and more).

Outlaws Club

To help workshop participants explore a wider territory of ideas, I created orange storyboard sheets for Outlaws Club Ideas. These ideas could be:

  • Crazy
  • Impossible
  • Ridiculously expensive
  • Just ridiculous
  • You know people hate it
The Top Ideas

The top ideas ended up painting a picture of a world where businesses used less paper and the best UI was no UI at times. One idea for example: prompting consumers to pay asynchronously after a heavily used trial membership expired, instead of using up the front desk worker’s time.

The results after dot voting on the ideas
1

Creating Concept Designs

Now that we had a broad set of ideas to pull from, and a prioritized list of what we felt were the best ideas for our users’ needs and business goals, I organized a design studio with several of our best UX designers from across the company and our two POS UI designers.

We came up with many design ideas and high-level concepts. I then had a smaller group of designers break out on their own and create a more-refined concept based on their favorite ideas from the design studio.

Iterating on Concepts
We did multiple iterations on the concepts, and, as time went on, we started to merge ideas from different concepts, until we had two divergent concepts remaining.
2

Refining The Concepts

Beth Leibovich organized and led us through a round of concept testing with MindBody users from local businesses. The process led by Beth had three parts. In part one, we sat down and interviewed the users in a round-table style.

In part two, we broke out into groups of two (designer or researcher and user) and showed them both concepts, gathered feedback, and asked them questions about past instances where the benefits or issues would have arisen – to go beyond opinions and get to the actual user behavior that would help inform our eventual design decisions.

In part three, we said good-bye to our users, and our team gathered around a standing whiteboard with each concept on either side of it. We then silently added our notes and insights from our discussion with the users.

We ended up with with lots of great insights and, by noticing patterns that formed and paying attention to important outliers,  we were able to inform our recommendation for a final concept direction with stakeholders.

3

Animated Vision Video

We incorporated our top ideas into an animated vision video that describes the day-to-day life of a front desk worker in the year 2020.

The video illustrated the delight and benefit staff and consumers would experience when faced with situations that would be a challenge or frustrating with the current POS and MindBody ecosystem of apps across different platforms or lack thereof.

FEBRUARY 2016 — JULY 2016

Part III

The 2017
POS Project

After completing the 3-year vision, we had a clear understanding of our north star. This guided our design decisions throughout the 2017 POS project.

With the visioning work wrapped up, I transitioned my core team of UX Designers into starting on competitive research, I started to sync up with Joey Saldana, the PM for project priorities, and Beth and I came up with a weekly testing plan.

After we finished the competitive research, we jumped into a weekly cadence of wireframing, design reviews, and usability testing. Throughout the process, I both led the project and acted as a key individual contributor, designing a large portion of the wireframes, all while mentoring and guiding my team of designers.

Now that it is post-2017, some of the more advanced parts of the three year vision have already started to be released, such as the Poynt tablet integration that allows customers to sign for contracts and receipts digitally on customer facing second screen.
A Complex POS System

Below, you can see a diagram I created at the beginning of this project to compare the complexity of this project to the current feature set in the easy-to-use Square POS.

Compared with a easy-to-use, best-in-class POS systems, such as Square or Shopify, the MindBody POS redesign would need to account for a much more complex set of features that fitness, wellness, and beauty staff have come to rely on.

1

Competitive Analysis Research

WHY?
The primary benefits of any competitive analysis are a better understanding of what your competitors are doing, what they are offering to customers, and how to maintain your competitive advantage. It also helps build domain knowledge and identify best practices.
COMPETITORS WE ASSESSED
With the help of my design team we researched 5 direct competitors and 2 best-in-class benchmark POS systems.
RESEARCH METHODS
We analyzed each of the 7 POS systems and then:
  • Created a comprehensive feature matrix
  • Identified MindBody’s  feature gaps
  • For each competitor we identified:
    • Pain points to avoid
    • Insightful features & approaches to consider
WHAT WE LEARNED
  • MindyBody was missing 28% of the 18 most common features that our direct competitors provide [1]
  • MindBody was missing 46% of the 28 most common features that best-in-class competitors provide [2]
[1] Common Feature: 4 or more of the 5 competitors we analyzed provided this feature.

[2] Best in Class Common Feature: 2/2 best-in-class competitors we analyzed provided this feature.
2

The Design Iteration Process

Weekly Wireframing, Design Reviews and Usability Testing

With a clear idea of our high-level direction, I led the design team through a cadence of weekly design sprints, loosely based on the Google Ventures Design Sprint approach. These sprints allowed us to hone in on a design that was intuitive for novice users and delivered the performance veteran users desire.

An overview of the weekly sprint project plan I put together
3

Scenarios and Journey Maps

We ended up writing 37 scenarios to cover our current POS feature set plus new features.

These scenarios covered complex situations, including:

  • Selling contracts
  • Setting up a recurring payment
  • Prorating and changing start dates of contracts
  • Allowing the customer to digitally sign and agree to terms
  • Processing up to 10 different payment types
  • Splitting payments and tipping
  • Paying for another client

We used Kim Goodwin’s Scenario methodology for guiding design decisions. According to Goodwin, a scenario is an aspirational story of a persona’s experience using a service.

To create rich and insightful scenarios, we synthesized our observational research findings into a Journey Map for each persona. Listing out for each step of a given scenario what they: Do, Feel & Think, and Want & Need.
Scenarios are Intentionally Design Agnostic

They explain the context and the challenges without prescribing the solution.

Scenarios Are Intentionally Detailed

They differ from use cases in that they focus on specific situations and capture the diversity between the constraints these specific situations bring. E.g., booking a haircut is a use case, however, booking a haircut for 6 weeks out on a Sunday after 2 p.m. is a detailed scenario that evokes better design, and that ultimately better serves the user.

13
4

Desktop and iPad Wireframes

I led a team of UX designers throughout this project and acted as a primary contributor for  much of the design work. Liza Plotnikova and Sara Lancaster were my core UX designers. Later, Hyung-Min Park and John Michael joined full time to help us finish the mobile wireframes.

We intentionally chose to create a design that would work for both desktop and tablet (and easily translate to mobile). This had two benefits:

The challenge was to make a design that felt right on iOS, Android and Dekstop. We knew for this to work, at a minimum, we would have to make final design polish changes for each platform at the visual design phase. However, the concern was whether having one master set of wireframes for tablet and desktop would result in neither platform providing a great experience.

This approach ended up being very successful. By keeping the wireframes fairly abstract and putting a lot of consideration into the design of these primary wireframes, we ended up having to do little custom design work for each platform.

Our Design Iteration Process

I led the team through reviewing the current week’s scenarios, and we discussed ideas with the Product Manager, Joey. Then, we would get to sketching and white-boarding. Throughout the week, we would share designs and get feedback from each other, the researchers, and Joey; we would repeat the process the next week. In the end, we ended up creating over 250 wireframes.

250+
 Wireframes
that span
37 scenarios
that cover
72+ features
5

Mobile Phone Wireframes

By thinking ahead and designing our primary tablet wireframes in a mobile phone–friendly way, we were able to translate our tablet designs into mobile phone layouts at a rapid pace. We used a two-column design on the tablet wireframes. The second column was often the shopping cart/receipt preview. By collapsing this information into an expandable bar at the bottom, we were able to provide a rich mobile experience with very limited tradeoffs.

6

Usability Testing

Team Involvement
As a team, we observed tests in real time with our research team, the PM, Joey, and Engineers. This allowed us all to brainstorm and whiteboard solutions as problem patterns emerged.
Rainbow Sheet Sessions
With the Rainbow Spreadsheet approach by Tomer Sharon, we were able to turn around insights quickly, and every designer and dev who participated left the sessions with empathy and passion.
Whiteboarding
As a design team, we would start working on solutions to the problems we saw in whiteboarding sessions, even before Beth had time to compile the observations into a summary report for stakeholders.
UX research is best done when a team is involved. When you run UX research on your own without active observers, you are missing its point. — Tomer Sharon
Over the course of the project we created dozens of prototypes and interviewed and observed close to a hundred users. Liza and Beth pictured above.
7

What We Learned

By leveraging best-in-class ideas from Square and Shipify, we avoided a lot of major usability issues. However, these POSs don’t handle many of the scenarios a yoga studio or a spa sees on a daily basis. For example, at a spa, a customer has multiple ways to pay for a service. They can pay for a single visit or buy a multipack to pay for today's massage.

Through over a dozen weeks of usability testing, we tested each scenario and corresponding design.

Overall, no major issues came up in our usability testing of prototypes throughout the design sprints. However, we saw dozens of little issues; none by themselves would be show-stoppers, but added up, they would have made for a bad experience.

One of the first insights was a common issue in UX: as designers, we are too close to the design. We had a two-column checkout experience, similar to Square and Shopify, with services that needed to be paid for on the left panel, and an empty cart on the right panel (see below). We knew it was the cart because we designed the wireframe and called it the cart. However, usability participants assumed the items on the left were in a cart. Scanning the design, they didn't pick up the nuance that the right-hand side was the cart, and the left-hand side was unpaid services. We were able to fix this confusion by simply explicitly adding to the right-hand panel text that said, “Cart empty.”

Other issues that came up were around the user not having muscle memory for the new screen yet.  However, we knew that front desk staff would build muscle memory quickly over the course of their daily usage because they would be using this system dozens of times an hour, daily.

For example, in our design, when a user chooses a product that has variants, the edit/detail panel comes up (see below) to allow the user to select a size, color, or another attribute. The panel then stays open to allow the user to edit the price or make other detailed changes. However, users quickly pointed out that they rarely need to make those changes. They wanted to know why we made them click “add” after selecting the size? Initially, we thought we could fix the problem by simply prompting them solely for size. But what if the product needed a size and color selection? Then, we started asking ourselves, “Will clicking ‘add’ really take extra time, or did it just take them time because it was their first time using the system, and they had to process where it was?” We decided that over the course of a couple of days, users would gain muscle memory. Clicking “add” would become second nature to them. This allowed us to keep the design simple (using just one detail/edit pop-up). It also meant that if the user did want to give a discount or add notes, they had it at their fingertips.

One of the first issues we saw: To us, the cart looked empty, but new users didn’t know that the cart was on the right, and the unpaid services were on the left.
A sample of the many minor issues that came out of usability testing.
8

Visual Design

The MindBody visual identity is rooted in four distinct design tenets, which guided the visual design work.

We’re committed to being open, honest and trustworthy. We mean what we say. Our brand should reflect this, from speaking plainly without jargon, to designing with real customers in mind.
Simplicity means clean and uncomplicated; that less is more. Whether it’s a concise sentence, a design with minimal elements, or code with few lines, our brand should reflect a natural sense of clarity.
Warm, infectious and dynamic, this aesthetic is inspired by the vibrancy in the fitness, wellness and beauty industries. The elements of our brand should pulse with energy and radiate joy.
Our brand should draw people in. It should be open, compassionate and empathetic. This aesthetic should be reflected in friendly, encouraging copy and in authentic photography.
Visual Design Process
August Kreowski and Adrian Crabtree were the primary contributors for executing our visual designs. Throughout the visioning and early wireframing, I included them in workshops and design reviews so that they had a shared understanding and a chance to give UX input early on. They were led by Jon Delman, and we all received significant direction and mentorship from the SVP of UX and Creative, Alexander Mahernia.
August and Adrian came up with a visual design style that would translate well to both our tablet and phone wireframes.
We used a primary color of orange for action buttons, and a complementary color of turquoise for secondary actions and to indicate state.
iOS + Material Design
Prior to this project, I led the UX redesign of the Appointment and Class Schedule for our mobile apps.  I was the primary contributor for executing the visual design for both Android and iPhone.
However, with this project, we greatly benefited from having August’s and Adrian’s help to advanced MindBody’s visual language and aesthetics for both platforms.
The tablet designs needed to work for both customers and staff on customer-facing portions of the workflow.
The design had to also feel natural on desktop. Google’s and Apple’s recent direction in their touch design language luckily need little tweaking to make them work on desktop.

This POS project was the catalyst that led us to create our most robust business-facing design library (which complemented our already robust consumer-facing design library).

9

Animation and Final Polish

After a core visual design started to crystalize, August and Adrian started to brainstorm ideas around motion.

Animation and Motion Design
When done thoughtfully, motion can both inform delight.
"Motion shows spatial and hierarchical relationships between elements, which actions are available, and what will happen if an action is taken." — https://material.io/design/motion

A Complete Booking and POS System in One

Designed for mobile phone, tablet and desktop
10

Methodology for Measuring Results

Results were measured using both controlled tests and in-the-wild early-access beta testing.

Approximately 1,800 clients were invited to early access of the mobile version of the POS app. 747 downloaded the app, 570 actively used it. Email feedback was monitored and 49/570 completed an exit survey. This research was led by Beth Leibovich with the help of Emma Tietje. Amaya Weddle acted as an advisor and reviewer.

EARLY ACCESS RESEARCH OBJECTIVES
  • Identify bugs, issues, and feature gaps that were experienced.
  • Measure subscriber satisfaction with the new POS.
  • Identify opportunities for MindBody  to improve the POS experience to better meet client needs.
11

The Results

Usability Improvements
Significantly reduced Time on Task for Transactions (Qualitative Control Scenario).
Significantly increased the System Usability Score (SUS) score.
Business Goals
Increased app store rating from 3.9 to 4.5 stars.
Subscriber Satisfaction
In the exit survey, 49 subscribers answered questions aimed to measure satisfaction with the app. When subscribers were asked how satisfied they are with the app’s new retail experience, 71.4% subscribers replied as either very satisfied or satisfied.
View Other Case Studies
Want to know more about my process? View an overview here or take a look at one of the other projects I documented as a case study.