Compartment Select Re-Design
Redesigned the Oracle Cloud Infrastructure (OCI) console resource compartment navigation, enhancing how customers access and manage their service resources.
Tools Used: Figma, FigJam, Confluence, Jira
UX Design, Re-Design, Design System Component and Pattern Impementation
About the project
At Oracle Cloud Infrastructure, compartments are the primary security entity and way OCI segments resources. We re-imagined the way OCI customers would navigate their service resources on the console.
Business Goal
-
​Simplify the process of locating and managing compartments.
-
Clarify which compartment the user is currently in.
My Role & Team
Role: UX & Visual Designer
Team: 11 (Including me, A Junior Designer, SMEs, UI Developers)
Duration: Nov 2023 - Jan 2024
Outcome
-
Users struggle to locate and manage compartments, leading to frustration.
-
Users become disoriented and struggle to understand what compartment they are in.
The Process
-
Requirements gathering
-
Competitive analysis
-
SME interviews
-
User flows
-
Collaborative brainstorm and ideation
-
High fidelity prototyping
-
User testing and validating
-
Development handoff
-
Contribute back to design system
Phase One
I partnered with a UX researcher, developers, and a lead product manager to:​
-
Uncover customer pain points.
-
Understand the entire workflow of working with compartments.
-
Explore the capabilities of the API and identify areas for expansion.
Before - Placement of compartment is disconnected, lacking a clear indication of current compartment.
Phase Two
Brainstorming and Design iterations
Working with fellow UX designers, I facilitated brainstorming sessions to collaborate on ideas for the compartment selector's location, functionality, and design.
I led the team as we created rapid design concepts using the components and templates from our design system.
After selecting key designs that aligned with our goals, I worked with a UX researcher to test the concepts.
.png)
User testing with high-fidelity flows
Working closely with a user researcher with the goal of determining which style and position worked best, we planned both live moderated and unmoderated UserZoom click tests.
After developing a script and outlining key questions for users, live sessions were held to gain deeper insights into the user experience.
Click testing results (44 respondents)
-
A majority of users chose the compartment next to the resource name as a suitable location (45% of respondents).
-
In the engineering team’s discussions during the survey, it was determined that having compartment select next to the header would not be feasible, so designers changed the direction to have the compartment select next to the search bar, which was selected as the second choice (32% of respondents).
-
The new direction was later validated through user interviews.
User Interviews (5 internal experts)
-
All users reported that having the compartment selector separated but placed next to the search bar made the most sense from both a style and behavior perspective.
Results and Impact
The improved design and placement of the compartment select navigation resulted in a more intuitive experience and increased user satisfaction.
-
The location of compartment select influenced the final re-design of tables.
-
The compartment selector is a permanent filter chip next to the search bar, serving as the first filter users need to select. It defaults to the root folder, so users aren’t prompted to select a compartment each time.
-
Our engineers built out this component as a custom component and we contributed it back to our design system.
-
The hierarchical dropdown selection was also contributed back to our design system to be utilized in forms.
Future roadmap planning
Leveraged user testing and research insights to shape the future roadmap for component redesign
​
-
Advocated for enhanced functionality, including multi-compartment selection and "select all" capabilities.
-
Explored opportunities to integrate compartments with tenancy or region selectors for a more seamless user experience.