02 RESEARCH
Identifying Needs.
My first step was to understand what admins need to do, without the need for additional support. And so, I reached out to fellow admins and engineers to learn about how they currently managed user accounts and pain points to keep in mind. Then, I researched in-class examples of existing user management systems.
What I learned:
02 RESEARCH
Key features
After communicating with my stakeholders and looking into other platforms that use UAM systems, I uncovered 3 main features that needed to be included in the user account management interface.
✨
View Accounts
• View by tenant group
• Sort by ascending or descending order
✨
Add New Users
• Insert profile data
• Select tenant and product access
✨
Modify Accounts
• Edit user info
• Delete inactive accounts
• Reset expired password
03 IDEATE
Design goals
From low-fi to high-fi iterations, I received weekly design critiques from design leads and collaborated with engineers for development weekly. Throughout this process, there were 3 overarching goals for my final designs.
💡 01 Light Mode
Transition to UAM should contrast with dark mode colors of the dashboard. In this case, using contrasting colors can emphasize to admins that they are interacting with a modal, rather than using the same color scheme of the dashboard.
💡 02 Visual Background
As an overlaying modal, the UAM background should be visually effective. Ongoing design trends should be referenced to understand how to make the content or data stand out.
💡 03 Simplicity
A simpler use of design components can achieve an intuitive and seamless solution. I wanted to aim for a very simple approach that meets all required needs of admins.
03 IDEATE
Design goals.
From low-fi to high-fi iterations, I received weekly design critiques from design leads and collaborated with engineers for development weekly. Throughout this process, there were 3 overarching goals for my final designs.
✨
View Accounts
• View by tenant group
• Sort by ascending or descending order
✨
Add New Users
• Insert profile data
• Select tenant and product access
✨
Modify Accounts
• Edit user info
• Delete inactive accounts
• Reset expired password
💬 Keep it Simple
Admins voiced that they want a clean, quick way to access a list of user accounts from the dashboard and make necessary changes. The system should be intuitive and easy-to-use, so that they can efficiently access accounts and go back to the dashboard.
💬 Technical Restraints
I should be aware of technical restraints and architectural structures when designing the interface. I do not want to overcomplicate the structure of my designs and consider the level of effort it takes to build this product feasibly in the given timeline.
💬 Useful References
Existing platforms and their design systems and UI components are helpful to initially reference for the visual design of the UAM.
03 IDEATE
Brainstorming.
From low-fi to high-fi iterations, I received weekly design critiques from design leads and collaborated with engineers for development weekly. Throughout this process, there were 3 main features I focused on for the UAM, which include: sorting the account list, adding new users, and modifying existing accounts.
✍️ Initial Sketches
I brainstormed how the UAM can be accessed from the dashboard, as well as how to structure of the UAM page, with key features in mind. Because admins primarily want to quickly check or update accounts, I explored how the UAM main page itself can be accessed as an overlaying modal on the dashboard, without the need to transition to a new page. Aside from the main features,
For the final deliverable, I aimed to create a simplified structure of a light mode interface that incorporates a visually effective background.
Sketches & References for UAM layout and interactions
🗒 Workflow
Then I finalized an admin workflow that displays how to navigate to the UAM from the dashboard. This clarified the structure of the UAM and how it is accessed for the development team.
New UAM workflow
04 DESIGN
Explorations.
With finalized features, I have a better understanding of how to structure my designs. I spoke with the design lead and senior designer to make sure I covered all necessary components I needed to work on for this project. This includes:
💡 Dropdown Menu
Here are some explorations I worked on throughout the design process. I iterated designs for different components, such as the dropdown menu. The dropdown menu for the UAM organizes user accounts by tenant groups. Admins can quickly view accounts by tenant selection to manage the 3 tenants that have access to Cirrus products.
💡 Modals - New User
There are two types of modals for this project. One is a form based modal for creating a new account. This modal uses the light box effect that overlays a darker background for admins to complete the new account form before proceeding further. I decided to explore various colors for the modals in a way that is consistent with the design system.
New account form
💡 Modals - Reset & Delete
The other type of modal for resetting and deleting existing accounts is a simple overlay on the UAM page, with no background. This is so admins can focus on confirming their actions to update account changes.
Resetting & deleting confirmation
💡 Account List
The list of accounts are in table format using a column header. The column header provides account information, such as username, email, phone number, tenant group, products accessed by the user, and the date the account was created. I realized the importance of colors that are utilized for each row, balancing the color scheme of the Cirrus design system and the visual background of the page. rest of the page for better readability.
List with column header
There were 3 main goals that I needed to achieve in my final designs for admins to have a more intuitive and improved experience executing tasks.
