Using design and copy to solve for better UX.

6 min readJul 5, 2022

The challenge

It is common to switch between multiple accounts on web apps. However, when you have many accounts open at the same time (on different tabs for example) the situation gets tricky. You could end up unknowingly making changes to the account that you didn’t want to make changes to.

Below, I’ve worked on the re-design of this UX issue for a web app.

Output: The re-designed modal screen with the restructured communication.

Solution

This is how I went from A to B.

Secondary Research

1. Breaking Down the UX of Switching Accounts in Web Apps — Christian Beck

“ I’ve found that well-designed account switchers share a few common characteristics.
- Make account switching an overtly obvious action
- Make accounts visually distinguishable
- Remind users when they perform important actions “

2. Behind the feature: building multi-account — Figma

“ To make it clear which account is open in a given tab, we added an icon in the center of the editor that shows which account the file belongs to “

I did this secondary research to understand how the process of ‘switching accounts’ worked in general. After getting some feedback I realised that doing a competitor analysis would have been additionally useful at this stage.

Primary Research

I reached out to a few people with a short survey. The aim was to understand the issues that a diverse set of users may have faced while handling multiple accounts on web apps they used.

Survey Questions

Introduction: Many web apps allow you to have multiple active accounts in different browser tabs and windows. This allows you to have different accounts open in different tabs and switch between them. Eg: Gmail, Dropbox, Linkedin, Figma, etc.
Do you use any web apps with multiple accounts? If yes can you name some of them?
What are any issues you’ve faced while switching between accounts on any of the apps?

A snippet of responses by survey participants 👇🏽

A snippet of quotes by survey participants

From my research I concluded that, while switching accounts, the most important step was to let the user know which account they were currently using.

User flows (original design)

Tab B is the second tab where a sub-account has been switched.

Tab A is the original tab where the pop-up message appears.

Mapping the user journey helped me understand the issues with the design.

Original design

If the user opens multiple tabs and switches to different sub-accounts in each one, there would be many active accounts. Listing all the active accounts one beneath the other would make the pop-up redundant. It would be difficult to convey the message at the begining “ You are using Mamaearth sale in this tab but you switched to— ” and indicate the other active accounts in the original design.
If the user opts to switch to one of the other active accounts eg: Unacademy, the note indicates that they will lose unsaved changes in the tab. If the user is unsure if they has unsaved changes ( which happens most of the time) they will be forced to go with the Keep using this option to ensure that they don’t lose any data.
Giving the user two contrasting choices is confusing.
Given that the users have named their accounts the numeric code next to it need not be added to the copy.
Showing the note information at the bottom of both the account options is too much information. Using a system of progressive disclosure could be better here.
The copy on the first note is not necessary & the second note appears threatening. Eg: “You will lose any unsaved data”
Having both the CTAs as a primary action is confusing.

Restructuring the copy.

For this issue, less is more. The overdose of copy actually makes it much harder to perform this simple action. It causes a cognitive overload for the user. The solution was to work collaboratively with copy and design to make this simpler.

Headline:

You’re using the sub-account *account name* in this tab.

Clear: The copy states the account in use. The account name will depend on the name set by the user.

Body:

To switch to a different sub-account select an account from the dropdown below.

Direct: The copy conveys the ‘how’ and ‘why’ of the action.

Dropdown (default):

Name of the account that is active on the tab.

Note:

Switching sub-accounts will cause this tab to refresh. You may lose any unsaved data in this tab.

Transparent: The copy explains the consequence of the action.

Primary CTA:

Switch sub-account

Action-oriented and clear. Its function implies that the sub-account will be switched.

Secondary CTA:

Its function implies that no action has been taken by the user.

Default modal screen 👇🏽

On selecting a different account from the dropdown.

In this solution, if users switched sub-accounts in Tab B, this pop-up would appear on the other tabs. The first thing it does is to remind users which account they are currently using in that specific tab and then give them a single choice — to switch accounts if they want.

Tells the user the account being used on that tab.
Gives the user a singular course of action, to switch accounts if they want to.
If the user chooses to switch accounts, it displays the note. This allows the user to select cancel and check for unsaved changes before proceeding.

Rejected Solution

I rejected this based on a usability test. The feedback I got was that having two options was confusing and that they understood that having more than one sub-account active was not a possibility.