The flow diagram below depicts how a user travels through the system as they switch accounts. The diagram also shows alternate flows and edge cases (unexpected things that happen with the feature) that a user may run into while performing an account switch.
Next, I experimented with as many solutions as possible. I create this on paper to ideate quickly. After I sketched, I talked to a few people about the sketches to make sure I wasn’t missing any major part of the experience.
I extracted the top sketches and converted them into wireframes. The wireframes explain the copy, call-to-actions, and other interface elements, as well as how they all work together.
The scenarios and design considerations acted as anchors. I was able to imagine how Ann’s family would move through the account switching feature.
4. Create prototype and validate with real users
Through InVision, I created three separate clickable prototypes.
Each prototype tested different approaches to switching accounts. The objective here was to figure out where the confusion was when users move through the flow. There were:
- 3 rounds of usability tests (groups of 5 users)
- 15 users tested
In the first two sets of prototypes, users got stuck. A common reaction was: “I don’t get it. I’m confused.” Making a simple feature like an account switcher is actually incredibly complicated. (Thank goodness people failed! The usability tests informed how I could move forward and iterate.)