Product & UX/UI Design at Sedai
Operation Compatibility
Background
Sedai is an autonomous cloud optimization SaaS product that helps businesses reduce costs and minimize wastage by optimizing cloud resources. To be eligible for Sedai optimizations, cloud resources must meet specific requirements. There are roughly 30 potential barriers that can prevent Sedai from operating on certain resources. Some barriers have solutions, requiring certain settings to be enabled to allow Sedai to bypass them. Others, however, are unresolvable, meaning Sedai cannot act on those resources.
This project began when Sedai detected that 12 customers has connected resources which were ineligible for Sedai operation. An internal team member has been manually creating spreadsheets for each of these customers, outlining why certain resources were not optimization candidates and suggesting actions to fix this. As this became a full-time task, our VP of Engineering requested a product page that could automate the display of operation compatibility within customers’ cloud accounts, streamlining the experience for both customers and internal teams.
Problem Statements
Certain cloud resources have barriers that prevent them from being eligible for Sedai operations, impacting Sedai’s business goals and limiting customers’ ability to save on cloud expenses.
A user cannot see which resources have barriers to operation.
Some barriers can be resolved or overridden through user action, but the necessary steps to do so are unclear.
The Data
One customer (a Fortune 500 company) connected over 2,000 resources to Sedai for optimization, but Sedai could not act on them due to operational barriers.
A Sedai team member was spending roughly 8 hours/week pulling information on operation barriers and solutions into a spreadsheet for customers. This task could instead be automated in the product to save time.
Sedai is able to save customers up to 50% on cloud expenses every year; in order to deliver on that promise, resources must be operation-friendly.
Ideation & User Flow Diagram
In the ideation phase, I generate as many ideas as possible within a set timeframe to address the problem statements. Then I create a user flow diagram to provide a high-level overview of the key interactions and processes required for a design. It serves as a foundational guide and helps spark ideas, but it is also adaptable and can evolve as design requirements shift. Additionally, it assists in identifying outstanding questions and potential areas for further exploration.
Planning, Wireframing, & Documentation
While most projects at Sedai involve complex technical intricacies, this project in particular demanded deep code investigation to fully understand various operational barriers and their corresponding solutions.
Planning involved addressing inconsistent terminology across team members, as we lacked standardized language for describing these barriers. To resolve this, I created internal documentation that established a consistent vocabulary, ensuring alignment among team members and providing a reference for sales, marketing, and product colleagues who might need this information in customer discussions. Moreover, I set up several meetings with the developers who worked on code related to this project so I could enhance the documentation with insightful notes and use this to better understand the content for which I was designing.
Additionally, I advocated for consistency between what was reflected in the code and what users saw in the product. Bringing the barriers into FigJam allowed me to group and visually differentiate them, refining our approach to categorizing and displaying them in the UI. This ultimately led to the decision to extract barriers without solutions and present those differently than barriers with solutions.
Low-Fidelity Mockups
After ideation and mapping the user flow diagram, I crafted low-fidelity concepts using Whimsical, which I then showed to five test users. Four of the five test users preferred Concept B.
Concept B
This wireframe grouped resources into two primary categories: those eligible for operations and those that are not. While there are additional nuances—such as resources that are operation-friendly but have overridden barriers—the design intentionally downplays these details. Instead, it focuses on clear calls to action to help users unblock resources for operations.
Concept A
This wireframe showcased the more nuanced details of operation compatibility, highlighting that some resources may be operation-friendly but still benefit from user action in order to become strong candidates. Here, the buttons below the chart are designed to be clickable, allowing users to filter the content on the right side of the page.
High-Fidelity Prototype
After confirming that users preferred Concept B, I created a high-fidelity prototype and presented a demo to the team. This design achieved several key objectives:
Provided a summary of resource counts for each barrier, helping users prioritize where to start when addressing issues.
Incorporated a single-select filter on the resource list page, allowing users to focus on one barrier (or problem statement) at a time.
Isolated resources without available solutions, preventing them from cluttering the list and ensuring focus on actionable items.
Added a quick-action side drawer, enabling users to resolve barriers with a single click. I collaborated with a developer to ensure API support for this feature.
Design Review & Iterations
Test user feedback led to the following iterations:
Removed the page summarizing resource counts per barrier, as users found this redundant to the single-select filter on the resource list page.
Chose the terms “Unable to Operate” and “Operation-Friendly” for the horizontal tabs to clearly communicate each category's content.
Added indicators in the side drawers for operation-friendly resources to specify if a resource is fully operation-ready or only classified as such due to user-overridden barriers.
Developer Collaboration
This project necessitated heavy collaboration with development teams. APIs were created to enable users to implement solutions directly within the product. My role involved mapping user-friendly text to backend enums for various barriers and solutions. I was then able to directly update text directly in the codebase using Visual Studio Code and GitHub.
Final Design
The final design—only recently pushed to production—has helped users convert over 3,000 resources to operation-friendly.
Thanks for following along!
Thank you for taking the time to explore my design process. If you're interested in a more detailed discussion or have any feedback, please fill out the contact form. As an experience designer, I’m all about feedback, so I’d love to hear your thoughts on my portfolio!