MindBody Mobile App Re-design
What is MindBody?
MindBody is a mobile app that serves as a gym management software that connects studios and other exercise facilities with their customer base.
The app strives to connect its users to wellness outlets — it is a collective space to find fitness memberships, workout classes, wellness services and more, no matter where in the world. It aims to manage memberships and class packages, storing all your gym information in one central space.
Current Design
The users of MindBody complain about many of the features causing them headaches — both on the studio and the student side.
The current interface requires that the user navigate the app past the landing page to access scheduling, offering only general overview information on the homepage.
Scope of Work
In the current design pictured above, the MindBody interface uses several tabs located on its horizontal navigation bar labeled “Home”, “Search”, “Favorites”, “Deals”, “Profile”. I had difficulty defining my scope for this project, as I saw user-experience issues in each of these pages and even in the contents of the navigation bar itself.
When I noticed that the app does not currently use any kind of calendar feature for scheduling I saw an opportunity to improve usability while implementing a new touchpoint.
Currently, users are able to view their upcoming and previous classes, but it appears under the ‘Profile’ tab, under the subsection titled ‘Schedule’.
As you can see, the Profile tab allows the user to access his or her schedule, passes and activity data. Under the current design, the user can use the ‘passes’ tab to store membership and / or current class pass information, depending on how his or her participating studios handle those memberships.
I wanted to take a stab at the Profile tab as part of my redesign as well — but realized I was starting to go down the slippery slope that is “scope creep”.
So, I created a list of goals, non-goals and anti-goals in hopes of avoiding that temptation to go overboard in redesigning.
“Goals”
- Create a less overwhelming landing page for MindBody app users
- Implement a calendar feature that will be easily integrated with the app’s current features (i.e. scheduling)
- Simplify an unnecessarily complicated application
“Non-goals”
- Redesign the entire navigation bar at the bottom of the screen
- Change the ‘Profile’ tab to only include personal information, now that the ‘schedule’ feature is essentially obsolete
“Anti-goals”
- Add too many elements so that the redesign becomes overwhelming : safeguard by focusing in on one specific touchpoint, depth over breadth
- Lose the functionality of the app through excessive redesign : safeguard by keeping the functions of the current homepage accessible to users even after redesign (in the ‘Profile’ and ‘Deals’ tabs)
Re-design
I found a quote from Brian Davidson of Congruity360 which said that “apps are all about usability and speed, so making sure the app is user-friendly, efficient and achieves the goal quickly will guide the revamp process and ensure success”.
While I think the designers of the MindBody app had every intention of designing in a user-friendly fashion — the layout of the landing page gets in the way of providing the user an efficient navigation experience. In order to achieve efficiency, any unnecessary pieces must be eliminated.
It is no secret that advertisements are a simple way to gain awareness. But, they tend to disrupt the customer’s experience. In MindBody’s case, advertisements make the experience less personal and authentic, as the customer is forced to view an overwhelming amount of information aside from just that of their own.
The current design of the MindBody landing page is not only overwhelming, but also redundant. One of the titles says “Book a favorite” but, there is also a “Favorites” section on the navigation bar, which allows users to view studios they’ve favorited and to book directly from that page.
Using a template from UXPressia, I curated a present-state customer journey map which helped me to look at the customer experience from each phase of the process.
My present state customer journey map helped me identify the problems that occur at each step of the process. Breaking down the user’s experience with the MindBody interface by tracking their actions, goals, emotions and problems allowed me to create my solution with the user in mind.
I also found that explicitly defining user personas helped me move in the right direction towards my redesign and my future-state journey map as well.
I used these personas — Wellness Will and Lifting Letty — to help drive my redesign.
In considering the needs and frustrations of each of my personas and the problems that arose in my current-state journey map, I was able to pinpoint the most important areas to consider redesigning.
I found that aesthetically speaking, the homepage needs to be redesigned completely. In its current design, it is not only overwhelming, but also redundant.
In addition, the touchpoint I want to implement alongside this landing page redesign is a new calendar feature. But, I made sure not to compromise the integrity of the site, keeping any features previously housed on the home page that do not currently exist elsewhere.
Prototyping
With this design, I wanted to focus on simplifying the aesthetics of the landing page while also implementing the calendar feature.
In the event that the MindBody app experiences any kind of difficulty in scheduling, I wanted the user to be able to edit and rearrange his or her schedule just as easily as the iPhone calendar app.
I also wanted the user to be able to manually input his or her own personal workouts — whether that be setting aside time for an at-home-work out, stretching session or meditation — into their schedule.
This way, users can maintain their exercise schedules outside of only those of participating studios to create one central and organized calendar that specifically aims to track your physical health and wellness journey.
Link to my functioning Adobe XD prototype.
Link to my present-state customer journey map.
