portfolio-cover-BAP-2.jpg
 

Account switching for the Mindbody business app

Role: Lead Visual Designer

Product: Mindbody business App iOS & Android

Project Status: Delivered and Listening


The Problem

MINDBODY business app users were signing out and back in 17,000 times a month on average. This is more than half of monthly active users needing to switch accounts.

We know people who work in the wellness industry tend to work at more than one job. Considering this behavior we recognized a need for a multi-account solution that enabled staff can be signed into multiple accounts and can easily switch between them.


Design Process

Working with a UX designer and UX writer, we set out to conduct an analysis of account switching paradigms of Outlook, Google, Twitter and identified a couple of design principles that would drive the organization and interactions of this feature.

We identified 3 main users need the UI to need to account for

All my accounts in one place

Design a place where users can see and switch between all accounts they've loaded onto the business app

  • Active Account Visible

  • Provide a highly visible way to recognize what account is active, This reduces the risk of selling customers’ services from a different business.

  • Sharing securely

  • Business app is used on shared devices we needed to give users a quick way of signing out of all active accounts


Wireframes

portfolio-single-BAP-2.jpg

The components

I adopted the paradigm of account switching that would be familiar to users' expectations.  My UX counterpart and I work out the wireframes for each user story. Before I move into the final phase of visual design, I take stock of what new and existing patterns I need to include. Working with real data, a test-drive each component to see where it could potentially break.

BAP-Profle Header@1x.jpg

hjhggj

hjhg

BAP-Manage accounts@1x.jpg

kjhkjh

jgjgjgh

BAP-Manage accounts@1x.jpg

kjhkh

kuhkhkh


Final Visual

Using the established icons and illustration design guidelines I created new icons for managed accounts, business insights, and an illustration for the first-time-user modal

HI Fi .jpg

Delivery

The Profile Header and Manage Accounts screens needed to accommodate variable data so it was necessary to deliver a detailed spec sheet to developers. This is uploaded into InVision and a link added to an external site map for easy access.

BAP-UI-1.jpg

Results & Reflection

When we released this feature we saw an immediate spike to taps to add accounts and the Manage Accounts screen. We initially thought users would add around 2-4 accounts. However, we learned from tracking analytics users averaged more than 4 and saw one instance of 19 added accounts. Each week our team reviews analytics and any feedback from Customer Success. This design ended up being adopted by our branded web team.