Product & UX/UI Design at Sedai
What’s the cloud, again?
As a Product & UX/UI Designer with over two years of experience at Sedai, a cloud optimization startup, I've honed my ability to craft user-centric designs that drive product success. Working as one of only two designers on the product team, I've thrived in high-pressure environments, consistently delivering impactful design solutions.
#skills
Starting my career in a fast-paced startup environment, I quickly acquired a wide range of practical and technical skills. From managing UI developers to launching 16 major new features in the last quarter alone, my experience at Sedai has sharpened and refined my Product & UX/UI capabilities.
Wireframing
Prototyping
Design Systems
User Personas
Figma
Proficient HTML/CSS
SaaS Product Design
Visual Studio Code
User Flow Diagrams
Jira
Adobe Creative Suite
WordPress
Case Study
Lambda Runtime Support
Background
Sedai is an autonomous cloud optimization SaaS product that helps businesses reduce their cloud spend and wastage by optimizing storage & compute resource allocations. Companies integrate their Amazon Web Services (AWS), Microsoft Azure, or Google Cloud Platform resources and monitoring data into Sedai, which Sedai then monitors and analyzes for opportunities to optimize and save.
One of Sedai’s primary offerings is optimization for AWS Lambda, the most widely used serverless computing product worldwide. AWS Lambda functions are executed with runtimes, environments that provide the necessary libraries, frameworks, and dependencies to execute code. As AWS introduces new runtimes, older ones are deprecated and stop receiving security updates and support. Currently, there is no platform that helps developers easily identify which of their functions are using deprecated runtimes. By providing this functionality, Sedai could fill a significant gap in the market, attracting more users who are seeking to optimize their AWS environments.
Problem Statement
Site Reliability Engineers and developers have no clear way to see if they are using deprecated or soon-to-be-deprecated Lambda runtimes, which can leave functions vulnerable to security breaches and limit support for new libraries and features.
Scope
This project emerged from discussions with an AWS Partner, who suggested adding this feature to attract new customers. As startup life goes, the deadline was “ASAP.” I worked on this project for two weeks with one backend developer, one frontend developer, and the VP of Engineering, who defined project requirements.
The Stats
According to Datadog, AWS Lambda remains the top serverless compute resource, with approximately 50% of organizations using it for its scalability and efficiency in handling microservices and task automation.
Gartner projects that by 2025, over 90% of cloud security incidents will stem from misconfigurations or the use of deprecated, unpatched runtimes. This highlights the critical need for proactive runtime management in serverless environments.
Currently, AWS Lambda accounts for $80,000 in annual recurring revenue from Sedai's existing customers, indicating that expanding support for Lambda could drive substantial revenue growth in a profitable segment.
Planning & Personas
New product projects at Sedai begin with content requirement meetings. For this project, I met with the VP of Engineering to learn requirements based on his conversations with the AWS Partner. I also met with the backend developer who would be working on the APIs related to this feature.
Key Understandings
The user needs to understand why it’s important to migrate from deprecated runtimes (security threats and outdated libraries).
Showing a summary view of runtime support across a user’s cloud environment will help fill a market gap and drive customer acquisition.
While Sedai can recommend runtime migrations for functions with deprecated runtimes, the platform cannot execute these migrations on behalf of the user.
For this particular project, our team focused on two key personas:
Site Reliability Engineer: This persona is primarily concerned with overarching reliability and performance, focusing on maintaining the integrity and uptime of cloud accounts by monitoring, optimizing, and responding to any potential issues that could impact the overall system.
Software Developer: This persona delves into the specifics of function implementation, emphasizing detailed functionality and efficiency at the code level.
Keeping these distinct roles in mind helps solutions cater to both strategic reliability and technical precision.
Ideation & User Flow Diagram
In the ideation phase, I generate as many ideas as possible within a set timeframe—typically around an hour—to address the problem statement. This process involves analyzing the existing UI to identify opportunities for minor enhancements, as well as brainstorming how a potentially larger solution could integrate into the larger narrative of a user’s autonomous cloud optimization journey with Sedai.
This user flow diagram provides a high-level overview of the key interactions and processes within a potential 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.
Wireframes
In the wireframing phase, I apply a similar approach to the ideation phase by setting a timer to sketch as many design concepts as possible, suspending judgment to foster creativity. The duration of this sketching session varies by project; for this particular project, I dedicated 90 minutes. After a brief break, I revisit the sketches with a critical eye, identifying the strongest concepts, pinpointing any outstanding questions, and recognizing potential blockers. This process ensures the most promising ideas are identified for further development.
Following, I narrow down the best concepts to begin designing. For this project, the proposed solutions included:
Creating a comprehensive report for Lambda Runtime Support with summary and detail views of runtime support within an environment.
Utilizing the existing Asset Intelligence page (which lists all cloud resources a user has connected to Sedai) to show a user at a glance which functions are using unsupported runtimes
Adding deprecated/deprecating runtimes as notifications in the Activity Timeline (an existing page surfacing optimization recommendations)
Low-Fidelity Mockups
After ideation and mapping the user flow diagram, I crafted low-fidelity concepts using Whimsical, which I then showed to test users. Three of the three test users preferred Concept B.
Concept A
This concept focused on grouping the functions into each runtime category: deprecated, deprecating soon, and supported. Users can click on a runtime to see associated lambda and other details.
Concept B
This concept focused on showing the details on which specific functions were deprecated, deprecating soon, and supported—as opposed to burying this information in a side drawer.
High-Fidelity Mockups & Design Review
After moving the design into Figma, I hosted a design review with the VP of Engineering and developers to present the following deck and designs:
Takeaways
Only move forward with the Lambda runtime report for now. Once we gain traction with this, we can consider weaving information related to runtime support elsewhere in the product.
The summary information is more important than the detailed list of functions and merits more visual emphasis.
Incorporate a breakdown by coding language.
Add information on invocations; this helps determine which functions are most important to migrate first.
Avoid delving into dependencies—it requires significant effort and offers limited practical value.
High-Fidelity Prototype
I developed a clickable, high-fidelity prototype to facilitate our design review process. This prototype allows stakeholders to interactively experience the proposed user interface, providing valuable insights and enabling informed feedback.
Handoff for UI Development
After presenting iterated designs to the team and getting approval, I worked on handoff notes for UI development. I create local components for all elements of my designs in Figma to ensure continuity when elements are updated. When handing issues off, I provide a design summary with relevant information, such as collaborators, future considerations, outstanding questions, and Jira issues. I typically place the final design in a frame titled (you guessed it) Latest Design, marked as Ready for Dev. I then break out the design into more detailed explanations in the Notes section; there is where I make note of any button links, what dummy data represents, functionality and interactions, etc. Our product often uses side drawers to provide supplemental information, so I included a section for side drawers as well. Responsive design is also present. Lastly, I created Jira issues to assign to the UI developer.
A key step in my design process is reviewing pull requests before designs are pushed to test, stage, or production—drastically speeding up the review and revision process. I open branches in localhost to review designs and am able to tweak the code myself using HTML/CSS to adjust spacing, colors, component states, and text as needed.
Final Screens
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!