Simplified the control of different user organizations and profiles
As a UX designer with Acoustic, I streamlined user account management by restructuring core user flows and interfaces for a smoother experience. Key features include a new organization switching modal and a brand new user profile management user flow.
Project details
My role
Research
Conceptualization
Design
Tools
Figma
Jira
Team
2 Designers
2 Developers
1 UX Writer
1 Product manager
Timeline
3 Months
01. INTRODUCTION
In order to make sense of all the information presented throughout the Acoustic platform, I first had to set some common definitions and relationships for relevant terms.
Clearing up the terminology
At the highest level were users. Users had access to different accounts such as organizations and their own profile. Users also needed to navigate between organizations, which each held multiple applications. All of these user-accessible pieces are accounts.
What accounts are we managing?
The Acoustic platform was built by combining several software solutions, creating a powerful but complex system with accounts, terminologies, and designs from different places. There were variations in how accounts were accessed, what they were called, and how they looked. Recognizing these shortcomings, Acoustic undertook a project to fix these issues. This project involved uniting user account management on multiple levels, prioritizing clarity, consistency, and efficiency.
02. PROBLEM BREAKDOWN
1. Inconsistent terminology and user patterns
It was clear that User patterns and terminology lacked consistency throughout the platform, which made it difficult for users to find accounts. For example, two buttons both labelled “My profile” led to completely different destinations.
2. Usability and discoverability issues
Switching accounts was cumbersome due to the lack of a single streamlined solution. Tasks could be completed in various ways, with inconsistent interfaces. Often, these options were buried in submenus and accordions, making them difficult to discover for new users.
3. Outdated design and lack of brand identity
Users attempting to switch/view accounts were met with screens from different eras and platforms. Many of the interfaces were outdated, and only some followed the Decibel design system. Overall, account pages and their design elements did not look Acoustic-owned.
Final Screens
Easy control over Acoustic accounts in one click.
Easy to find and access
Access to organizations and user profiles from the platform header.
Profile Page Revamped
A new look for users, profile management, and my profile page.
Modern and clean design
Simple, accessible, and consistent with Acoustic branding.
No overlap between organization accounts and user profiles.
03. PROCESS AND REASONS
Deep dive on the competition! After auditing over 15 direct and indirect competitors, I had a clear vision for the ideal user experience. My top priority was creating a central hub for all accounts that was both easy to find and use.
Additionally, I documented best practices in profile access and display, integrating them into my design for a smoother user experience.
Audits and competitor research
User Flow Analysis
The existing user flow lacked clarity and didn’t define crucial terms like "accounts," "products," and "users." The interface made the issue worse by presenting accounts and products as independent pathways when accounts are always linked to specific product plans.
Additionally, the switch icon also housed additional user profile options. This made account switching and profile viewing even more confusing because they were all accessed from the same place. Actions such as "logout" lacked context within the start point, leaving users unsure of exactly what they were logging out of.
Improved User Flow
To improve the user experience, I split the original access point into two, with dedicated interfaces for accounts and profiles. Both remained readily accessible in the header, close to their original positions. These simplified user flows now provide clear context on the user's navigation path.
04. VISUAL ITERATIONS
I explored several different options for the account switcher, and how accounts would be showed. I eventually landed on the right-most option because of its simplicity and readability.
Account Switcher
Account Timers
For accounts that were expiring soon and other necessary warnings, I needed to design timers. The timers needed:
Different colors matched to days left
To be separated from the other listed accounts
Moved to the top of the list so that they were not missed
Account Searching & Integration
I worked side by side with product managers to come up with a way to search accounts for users with more than 10 accounts. The solution needed to integrate with the timers and previous functions.
As I learned more about user needs I realized that it would be more beneficial for users to see what organization they are working for, rather than what product plan they have access to. Not only would this give the user more relevant information faster, it would also reduce clutter on the page.
Further Improvements
Personalization & Control
I completely redesigned the profile page and created a new user flow to add, delete, or edit profile pictures. There was very little difference between a “profile” and an “account” before, but the addition of a profile picture makes it clearer that profiles are tied to users and accounts are tied to organizations.
05. LEARNINGS AND IMPACT
Be skeptical
I initially started tackling the problem by using designs that someone else had made. As I worked on the problem, I realized that I was stuck using ideas from that original design, even though they weren't the best fit. I had to really let go of those old ideas and undergo a reevaluation to come up with something completely new. It took longer, but the final product was much better because I wasn't limited by the original design.
Product delivered
Working with other teams to bring these designs to life was a huge privilege that I’m grateful to have experienced. Although some features such as the company logos can’t be implemented right now, I am stoked to see my work impact the platform’s future.
