Mindbody UI Redesign
An app I use several times a week, Mindbody allows me to see a listing of classes at my local gym. It populates other classes nearby at different facilities, all with the goal of providing an easy platform for registering for classes.
There is just one problem:
the booking process lacks user feedback.
I say this based on the countless times I’ve said, “Wait, did it sign me up?” and I have to go back and check if the class listing says ‘booked’ or not. I mainly see this problem when I want to book a class or add the booked class to my calendar. It goes something like this:
The solution is simple: include components that build user confidence!
I’ve reworked a few design components to remove second guessing. Mindbody is supposed to make going to the gym easier and not add to any lack of motivation!
No more guessing. Just confidence that my classes are confirmed.
Error Prevention + Microcopy
While Mindbody does a good job of error prevention by allowing users to continue through a process before completing an action (i.e. having to hit Book a second time before class is booked), the process is confusing because both buttons are labeled Book - “Did I book the class? Why do I need to hit Book two times?”
To skirt this issue I changed the text on the first screen to Select and to Confirm Booking on the second screen. The new copy allows users to continue to the next step (review selection) before completing an action (booking a class).
Affordances
A button should look like a button! In the current design the orange “button” looks like a block at the bottom of a modal. By rounding the corners I created the affordance of a button, and it’s clear the user needs to click on the new copy, Confirm Booking, to finalize booking a class.
Feedback
In the current design there is no feedback when you select Add to Calendar. Users expect some type of feedback, whether that’s a type of interaction design (a shake, pop or zoom of the icon) or visual design. I opted to use color (green), icon (checkmark), and copy (added to calendar) to let the user know their desired action was completed while considering accessibility standards.
Where to go from here
Impact: Confidence through a design that doesn’t make the user second guess their interactions.
What went well: understanding the problem from personal experience. Working through the redesign inspired more unplanned updates, like changing the copy for further clarification.
If I had a do-over: I would take this a step further and turn the wireframes into a prototype to show the new flow, and add an interaction to the Added to Calendar feedback.
Thanks for visiting!