UX Patterns
One of the most overlooked UX challenges is how to handle allowing a user to switch accounts. I know this because I’ve designed for it a dozen times and it snuck up on me each time. Fool me once, shame on me. Fool me twelve times, write a Medium article about it!
What do I mean by switching accounts?
For today’s software and applications, you no longer install it via install disk and instead must sign up for an account. I can’t think of the last app I used that did not require a login. But this then creates challenges for those apps that allow you to have multiple accounts because they need to determine how they want to allow people to switch accounts (if at all).
Switching accounts takes on a few different forms (which I’ll detail in the next section):
- Admin: this is the simplest case where an application has some functionality that is available only to a user with a particular set of permissions. You’ll find this in just about every B2B SaaS application because someone has to control the key settings in the application for others.
- Business-Personal: For some applications, there is a need to support multiple accounts but separate between personal and business use. In these cases, there is little need for a user to have many accounts. Dropbox is the model use case for this pattern.
- Team-User Hybrid: In this model the primary account is a user but that user can belong to one or more teams. And within those teams, there are different functions available. Dribbble and LinkedIn are examples.
- Multi-User Platform: Here, a person can have many accounts, all with roughly the same functionality, with no particular use case driving the accounts. Unlike the Business-Personal type, there is no distinction here; in fact a user could have many personal and many business accounts. Social networks like Twitter or platforms like Google are good examples.
- Workspace: This is a particular flavor of the Multi-User Platform pattern where accounts are created in goal/mission-oriented teams/companies/groups. Slack is the best example of this model where each account is tied to a team or company.
- Agency-Client: A model whereby service companies (agencies) use a product on behalf of a paying client. This is most common in B2B products in highly technical domains or those with complex workflows. Marketing software for enterprises offer the best examples.
I’m sure there are other ways of grouping account switching but I find that grouping sub-patterns is a good way to simplify a broader pattern. While account switching isn’t inherently a complex pattern, understanding their differences and use cases can help you make better decisions at the outset of your next UX project.
Ok, let’s dive deeper into each of these patterns using real-world examples.
Admin
I’ll begin with the simplest use case of the lot: the admin user. Particularly for B2B apps, it’s common to need particular functions and rights assigned to administrator roles. The operative word here is “role” because most Admins are often users themselves. (Although when an application’s functionality becomes robust enough then you’ll find the Agency model emerge. More on that later).
In these cases, admin roles are simply defined by additional functionality given to the user. In practice, you’ll see an additional menu item in a user profile or a set of functionality inside the settings menu that others won’t.
Business-Personal
Dropbox
Dropbox allows you to have a business and personal account on the same machine but on the web, you have to work within one account at a time.
I’m hiding a lot in this GIF due to privacy but hopefully you can see that the entire screen reloads when I switch. Switching accounts in Dropbox is a non-trivial task. More importantly, it’s stateful, which means that any file or document I open will open under the context of the account I’ve switched to. Dropbox supports multiple accounts but you can only use one at at a time.
Team-User Hybrid
Dribbble
Dribbble allows you to have one account and multiple teams. In this case, you’ll see that I can “Use Dribbble as…” any of the teams I belong to:
Once the account switches to a team, a green bar shows that the switch is made, and now the dropdown menu has different items available.
LinkedIn allows you to have multiple company and showcase pages (I cannot even begin to articulate how the hell showcase pages work). Unlike Dribbble, which changes your entire context, “switching” to a company in LinkedIn simply takes you to the company page in admin mode:
The downside to this approach is that it limits what you can do as a company on LinkedIn. You can’t comment on posts like you can in FB when you have multiple accounts:
In the Facebook example, accounts are spread out across the app so that I can post as any account throughout. This has obvious downsides for people running social media for a business because you can forget which account you’ve commented on a post from (I’ve been guilty of this many times).
Medium
In Medium’s case I’ll refer to the “team” as being a publication. It only supports a single active account at a time but you can view a publication as a user. This comes with some additional functionality that is under a pseudo account:
In Medium, they simply add a logo for the publication to the right of your user profile and it contains different options. This works for Medium because the publication is not something you actually use Medium as. It’s something that you post content under.
Multi-User Platforms
Truthfully Twitter doesn’t handle this at all on the browser version. You have to download a 3rd-party extension to allow account switching inside the browser. In Tweetdeck, the native app that Twitter purchased several years ago, you can have multiple accounts open at once.
Earlier we saw the example of how Facebook allows you to post as different accounts throughout the app. On the opposite end, Twitter forces you to log out and login as different accounts on the desktop. On mobile it’s a bit easier because you can switch accounts inside the app:
Im guessing almost everyone has switched google accounts at some point. Whether it’s between your personal account and business, or between the various side projects or organizations you belong to, switching accounts is fairly common.
The tricky part for Google is that they have an exaggerated version of Dropbox’s challenge: many apps to navigate within each account. Google handles this by allowing you to be active in all your accounts simultaneously and if you need to switch apps, you do it from whichever account you want. For example, if I want to create a personal calendar event, I open calendar from my personal gmail.
Workspace
This model differs from the Multi-User Platforms in that you can have multiple accounts open at a time and they won’t interfere with each other. The functionality between the workspaces is largely the same, but they truly leverage the “workspace” mentality as if you were leaving one physical work room and entering another.
Slack
Like Twitter, the web interface is limited. However, they allow you to handle multiple accounts using URLs. You can have multiple windows open at a time:
AirTable
AirTable also make switching workspace easy by simply navigating up and down the page. I hid the actual tables for privacy but you can see the scrolling happening on the right side of the GIF:
Agency
This has been one of the more challenging cases for me to design for. I only came to know it myself when I was leading design for marketing software company serving large enterprises. And when I say large, I mean some customers had marketing departments with thousands of users of the product. When this happens, you’ll find services companies emerge that exist solely to customize or manage the software for companies.
If you work for a SaaS company that not only serves large companies, but serves 3rd-party agencies that exist solely to use your product (e.g. HubSpot, WordPress, Salesforce, Mailchimp, etc.), you’ll find an Agency model where you not only switch accounts but perform actions on behalf of a client. This is similar to the Workspace model but with additional review steps and permissions baked in so that the client can have final say. In many cases, you can have multiple active workspaces in different browser tabs and windows (unlike Business-Personal, where only one account is active at a time).
Now that we’ve established key patterns to account switching, let’s take a look at considerations that can help you determine which might suit your use case.
Technical
I won’t pretend I know what technical considerations are behind the examples I’ve given but I imagine it drives some of them. For Dropbox, it feels like technically, it gets messy if you have multiple accounts open at the same time (fwiw, this makes sense because it deals with syncing to your hard drive but is becoming less relevant with their digital plays in Paper and Showcase). I can imagine that privacy and security issues in certain domains will also partly dictate which model you can use.
Persona
Does your application have “multiple hats” a user can wear? For LinkedIn and Dribble, there are different things you do as a team owner versus as an individual. However, their fundamental user is a person, not a team or company. In other cases like Twitter, an account can be anything: a person, company, team, cat, etc. It’s important to understand how your product or service handles different personas in order to determine how easy it is to switch.
Functionality
For apps like Dropbox, having a distinct separation between home and business is smart. For apps like Google’s G Suite, every account has the same functionality. For Dropbox, the separation between Business and Personal is also functionality-oriented; the Business account has a different feature set and administration capabilities not present for Personal accounts. This can also be true for Agency models because each client could have different features available.
Product Maturity
Creating different account types is something that you’ll only need to grow into over time. Even if you think you’re going to need multiple accounts down the road, it’s not something you have to build for initially. Dropbox got by with Personal accounts only for years and have done a pretty good job bifurcating into Business and Personal accounts. Twitter makes account switching difficult in their browser app, but it’s much easier in the Tweetdeck app and native mobile apps. They
In my experience designing forlarge software companies, and serving dozens of tech companies through my agency Innovatemap, I’ve found that well-designed account switchers share a few common characteristics. Working backwards, these principles can help guide your design no matter which pattern you leverage.
Make account switching an overtly obvious action
Apps that support multiple active accounts don’t communicate switching at all. It wouldn’t hurt if they did but often they have other ways of distinguishing accounts. Gmail allows users to customize its look and feel, for example (see next principle). Others, like Dribbble, communicate with a colored toast notification at the top. It’s effective in the moment.
Make accounts visually distinguishable
Gmail does this with profile photos and with the ability to customize the look and feel. Branding, colors, and redundant labeling can help users locate themselves and prevent making mistakes. Making the switch obvious is useful but don’t forget to make it easy to remind users of context as they use the app.
Remind users when they perform important actions
This is something I wish more apps would do. For example in Dropbox Paper, I’ll often open a company doc while having my personal account active. And because they don’t do a good job visually communicating which account I’m in, I’ll accidentally leave a comment from my personal account. Technically, Dropbox could make a guess as to which account I should be commenting from (e.g. if a doc is shared from my company email, it’s likely I should comment from my company Dropbox account), and simply prompt me to switch accounts before I make a mistake.
Account switching is easy for designers to overlook, but I hope this article has shown there are nuances to this pattern. Account switching must be handled delicately, while not confusing or losing users in their workflow. And most importantly, handling this pattern well will pave the way for your product to grow effectively.
When I’m not describing the finer points of account switching, I’m helping designers get faster with Sketch design tools at UX Power Tools, and leading design at Innovatemap, a digital product agency.