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.
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.
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.
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.
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.
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.
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.
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.
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.
To define a set of typical users of the point-of-sale in MINDBODY that can be used throughout the project.
A collaborative workshop with the UX/PM team bringing together hours of observational research in the field.
Based on the synthesis from our ethnographic research and interviews, we formulated 4 project design principles
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).
To help workshop participants explore a wider territory of ideas, I created orange storyboard sheets for Outlaws Club Ideas. These ideas could be:
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.
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.
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.
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.
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.
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.
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.
We ended up writing 37 scenarios to cover our current POS feature set plus new features.
These scenarios covered complex situations, including:
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.
They explain the context and the challenges without prescribing the solution.
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.
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.
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.
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.
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.
The MindBody visual identity is rooted in four distinct design tenets, which guided the visual design work.
After a core visual design started to crystalize, August and Adrian started to brainstorm ideas around motion.
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.