UX and visual design enhancements for the MINDBODY App
Mindbody sits at the intersection of wellness and technology. It's scheduling and booking engine powers thousands of exercise studios and salons across the country, and its consumer-facing mobile app lets wellness enthusiasts find, book and pay for their favorite classes and services.
Brand strategy, UX & design phase
When the app launched, users were quickly acquired, but there was need to create more consistent engagement, build a more clearly defined and differentiated brand and brand experience (both for B2B and B2C) to maintain loyalty, and to grow the business as competition increases. Our key challenge was to drive usage and conversation with seamless functionality while beginning to build and grow a relevant consumer brand experience.
• • •
We started with a journey to help us visualize a user's relationship with the MindBody App:
Then we moved into UX to define two new flows:
(1) a new user sign-in flow and (2) a dashboard for users to find new classes or services by searching/browsing, surfacing personal recommendations (based on a user's previous bookings) and/or showing trending bookings.
The dashboard UX was first approved as three exposed content sections, but in design the client challenged the UX to be more "app-like". We went back to the drawing board to create a simplified dashboard and elevated design system.
• • •
Ultimately, the visual exploration pushed the UX further. In fact, it redefined it:
• • •
In design, we took inspiration from the brand personality (Encouraging, Authentic, Energetic, Bold, In-the-know, Smiling, Radiant, Inclusive) and the manifesto, "It’s the catalyst that gets you away from your desk, off the couch, out of your rut, and even out of your comfort zone," that we defined for MINDBODY to help us reinvigorate the brand.
Shifting color creates constant movement, an ebb and flow of radiance. It’s never one color; it’s a slow moving lava flow of gradients focused on complementary colors—orange and blue, red and magenta, always in balance.
Variations of sans serif Proxima Nova work together to create a simple, actionable hierarchy of information. The simple white type on backgrounds of color allow for clarity of communication.
The MINDBODY icon system builds off of its most recognizable visual element, the enzo (logo). The play between two line weights creates a unique visual element and allows for more complex icons, in a simplistic treatment - different than most icons that use all the same line weight.
• • •
Art director: Kit Casey, Creative director: Jared Kelleher, Copywriting: Emily Morgan, UX: Linda Mateos and Gail Fogel, Strategy: Scott Karambis