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
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.
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.
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.
Context
How Does Stellar Cyber Use Graph ML for Alerts?
Research & Exploration Process
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.
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.
Key Design Feedbacks
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.
Design Feedback 2: Use Database Icon for Storage-related Icons
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.
Design Feedback 3: Design 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.
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
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.
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.
Key Takeaway 3: Sketching and Low-Fidelity Designs Foster Flexibility and 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.
Contact Me!
janetjliu
janetliu.ca@gmail.com
Pages
Key Projects