Stellar Cyber Cloud Observable Icon Set Design
Designed 26 cloud resource icons to clearly communicate cloud security alerts in Stellar Cyber’s Graph ML, making threat correlation faster and cases easier to visualize.
Company
My Role
UX Design Intern
Timeline
July-August 2024
Collaborators
UI/UX Manager: Annia Chen
Mentor: Alireza Vatankhah
Stellar Cyber UX Team
My Role
UI/UX Design Lead
Timeline
January - April 2025
Tools
Figma
React
OpenAI
Supabase
Raycast
Team
Janet (Designer)
Kate Seo (SWE)
Yuting Lin (SWE)
Isaac Chan (SWE)
Anh Vu (SWE)
At a Glance
Project Overview
Stellar Cyber is a leading Series C B2B cybersecurity company offering an Open XDR platform that unifies threat detection, investigation, and automated response. Its GraphML feature uses machine learning to group and correlate alerts into Cases, providing clear visual context for potential attacks.
As cloud-based security data became central to the platform, this project focused on designing clear, intuitive icons for 18 cloud data types to enhance visual communication and support more effective graphical analysis.
Stellar Cyber is a Series C B2B cybersecurity company with an Open XDR platform that unifies threat detection, investigation, and automated response. Its GraphML feature uses machine learning to group alerts into Cases, giving clear visual context for potential attacks.
This project focused on designing intuitive icons for 18 cloud data types to improve visual communication and support effective analysis.
My Contributions
Designed a comprehensive custom icon set with 18 cloud observable node icons and 8 category icons, each representing specific cloud resources and maintaining visual cohesion with Stellar Cyber’s design language.
Contributed to a 13% increase in Case Management usage over three months, resulting in 6,000+ additional page views after implementation.
Collaborated with developers and designers to refine icons for technical accuracy and platform usability.
Designed a custom icon set with 18 cloud observable node icons and 8 category icons, keeping visual cohesion with Stellar Cyber’s design language.
Boosted Case Management usage by 13%, adding 6,000+ page views over three months.
Collaborated with developers and designers to ensure technical accuracy and platform usability.
Impact
Designed cloud resource icons for Stellar Cyber's Graph ML that contributed to a 13% increase in Case Management usage and driving 6,000+ additional page views within three months of implementation.
Designed cloud resource icons for Stellar Cyber's Graph ML that contributed to a 13% increase in Case Management usage and driving 6,000+ additional page views within three months of implementation.
Context
How Does Stellar Cyber Use Graph ML for Alerts?
How Does Stellar Cyber Use Graph ML for Alerts?
In the cybersecurity landscape, there are overwhelmingly high volumes of alerts, especially from cloud-based environments. Stellar Cyber’s Open XDR platform addresses this by unifying data from multiple sources and automatically correlating related alerts into higher-level “Cases” that reveal broader attack patterns. Its Graph ML feature visualizes these relationships as interactive node graphs, helping analysts quickly understand and respond to threats.
As the platform expanded its cloud integrations, it became essential to represent cloud observables, like VMs, APIs, and databases, more clearly. This project aimed to design intuitive icons that make these cloud sources easier to identify and interpret during case investigations.
In cybersecurity, analysts face high volumes of cloud alerts. Stellar Cyber’s Open XDR platform unifies data and correlates alerts into Cases, visualized with GraphML node graphs for quick threat understanding. As cloud integrations grew, this project focused on designing intuitive icons for VMs, APIs, databases, and other observables to make them easier to identify and interpret during investigations.
Research & Exploration Process
What are the Key Cloud Resources?
What are the Key Cloud Resources?
To better understand the cloud resources and guide the icon design process, I first researched the definitions of all 18 resources. Then, based on the 8 high-level categories, I applied color coding to group them more easily. These colors were later incorporated into the icon designs.
To guide the icon design, I researched all 18 cloud resources and grouped them into 8 high-level categories using color coding, which was later incorporated into the icon designs for easier identification.
Exploring Ideas through Sketches and Low-Fidelity
Exploring Ideas through Sketches and Low-Fidelity
I began with 18 icon sketches inspired by AWS, Splunk, and IBM to explore visual directions quickly and flexibly. Presenting these to the design team helped identify the strongest ideas, which I then developed into low-fidelity Figma versions. These early concepts were refined through feedback from both discussing with designers, developers, and PMs, ensuring each icon remained distinct and consistent.
I sketched 18 icons inspired by AWS, Splunk, and IBM to explore visual directions. After presenting them to the team, I developed the strongest ideas into low-fidelity Figma versions and refined them with feedback from designers, developers, and PMs to ensure each icon was distinct and consistent.
Key Design Feedbacks
Design Feedback 1: Simplify Text-Based Icons for Clarity and Readability
Design Feedback 1: Simplify Text-Based Icons for Clarity
Design Feedback 1: Simplify
Text-Based Icons for Clarity and Readability
Design Feedback 1: Simplify
Text-Based Icons for Clarity and Readability
For icons with text, such as SQL, NoSQL, VPN, DNS, and API Management—the team preferred the simpler treatment used in VPN and DNS, where only the cloud or database symbol appears with text in the bottom-right corner. They found the SQL and NoSQL designs too cluttered, and for NoSQL specifically, recommended replacing the full label with a bracket symbol to enhance clarity.
For text-based icons, the team preferred simpler designs like VPN and DNS, using a symbol with text in the corner, and suggested replacing cluttered labels, such as NoSQL, with minimal symbols for clarity.
Design Feedback 2: Use Database Icon for Storage-related Icons
Design Feedback 2: Standardize Storage Icons with Database Symbol
After discussing with developers and PMs in the Case Management team, we decided to use the same database symbol from the SQL/NoSQL icons for File, Block, and Object Storage. They all represent persistent data storage, so using a consistent database symbol unifies their visual language and reduces cognitive load across the icon set.
We standardized storage icons by using the database symbol for File, Block, and Object Storage, unifying their visual language and reducing cognitive load.
Design Feedback 3: Design Icons for High-Level Categories
Design Feedback 3: Create Icons for High-Level Categories
To improve organization and clarity, the design team recommended icons for high-level categories like Compute, Containers, Databases, Storage, Networking, Integration, and Security. I color-coded these categories to help users quickly identify related resources and reduce cognitive load.
We designed color-coded icons for high-level categories like Compute, Databases, and Security to improve organization, clarity, and quick recognition of related resources.
Final Designs
Final Designs
After incorporating feedback and applying the color-coded categories, here are the final designs for all 18 icons:
Final Takeaways
Key Takeaway 1: Distinct, Simple, and Consistent Are Key to Effective Icon Design
Key Takeaway 1: Effective Icons Are Distinct, Simple, and Consistent
Effective icons are distinct to represent unique concepts, simple to maintain clarity, and consistent in style to unify the set. By using the cloud or database icon for most sources, I created a simple, recognizable design that reduces cognitive overload while incorporating distinct elements to represent each resource. These principles allow for a strong, easy-to-use cloud observable icon set that helps analysts better visualize cloud-based threats and cases.
Designing effective icons taught me the power of being distinct, simple, and consistent. By balancing recognizable symbols with unique elements, I created a set that is both clear and meaningful. This experience reinforced the importance of clarity, cohesion, and thoughtful detail in visual design, lessons I will carry into every project.
Key Takeaway 2: Cross-Functional Team Collaboration Enhances Design Quality
Working closely with designers, developers, and product managers throughout all design stages ensured accurate icon representation while welcoming diverse perspectives and ideas. This collaboration fostered both creativity and refinement, improving the visuals with technical accuracy and usability within Stellar Cyber’s complex platform.
Collaborating with designers, developers, and PMs strengthened the design process. Working closely throughout all stages ensured icons were both technically accurate and visually clear, while diverse perspectives fostered creativity and refinement. This experience reinforced the value of cross-functional collaboration in delivering high-quality, usable designs.
Key Takeaway 3: Sketching and Low-Fidelity Designs Foster Flexibility and Exploration
Key Takeaway 3: Sketching and Low-Fidelity Designs Enable Exploration
Starting with sketches allowed me to rapidly explore multiple ideas without commitment, promoting creativity early on. Low-fidelity designs then refined these concepts, enabling valuable feedback and iteration. Offering varied options, staying open to iterations, and embracing flexibility is a process I continue to apply to deliver more thoughtful, user-centered designs.
Starting with sketches and low-fidelity designs fosters creativity and flexibility. This approach let me explore ideas quickly, refine concepts through feedback, and iterate effectively. I continue to apply this process to deliver thoughtful, user-centered designs.
Contact Me!
Contact Me!
janetjliu
janetliu.ca@gmail.com
Pages
Pages
Key Projects
Key Projects