Stellar Cyber Visual
Design System
Redesigned core UI components for Stellar Cyber, a Series C B2B cybersecurity company, to build a unified, scalable design system used by design and development teams company-wide. This ensured a consistent, trustworthy user experience that empowers security teams.
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 B2B cybersecurity company offering Open XDR, a unified platform for threat detection and automated response. As the product expanded, a consistent design system was needed to ensure clarity, trust, and scalability.
I redesigned core UI components like buttons, input fields, and chips to improve usability, strengthen brand identity, and create a cohesive experience, which helps design and development teams work more efficiently and consistently.
My Contributions
Redesigned key UI components and variants including buttons, input fields, and chips to create a unified visual language actively used across Stellar Cyber’s Open XDR platform.
Designed scalable variants to enhance flexibility for designers and improve usability for end users.
Collaborated closely with developers and design team to define clear guidelines on spacing, typography, and states ensuring smooth handoff and consistent UI.
Context
Why a New Design System for Stellar Cyber?
As Stellar Cyber expanded its Open XDR platform, inconsistent UI affected user experience and the platform’s credibility. To address this, the team used the PrimeNG design system as a base to modernize components and streamline development. As a design intern, I led the redesign of core UI elements to build a scalable and cohesive system that improved usability, reinforced brand identity, and aligned designers and developers on UI choices to support the platform’s continued growth.
Research Process
Exploring Existing Design Systems
To grasp the best practices in design system, I started by studying established design systems like Material Design and Apple’s Human Interface Guidelines. Focusing on buttons, input fields, and chips, I closely examined the different variants such as sizes, states, and use cases to understand what contributes to a clean, scalable, and user friendly design system.
Key Design Decisions
Decision 1: Define Scalable and Adaptable Size Variants
To support Stellar Cyber’s diverse interface needs, including compact side filters, tables, and full-page forms, I designed small, default, and large size variants for buttons, inputs, and chips. Each component scales visually and functionally, with consistent icon and text sizing to maintain clarity and cohesion. This scalable system streamlines design and development while reinforcing a unified look and feel across the platform.
Decision 2: Establishing Consistent Padding and Alignment Rules
To create a cohesive and visually balanced component set, I defined standard rules for button sizing, including height, padding, margins, text size, and line height. Based on team feedback, I adopted a guideline where horizontal padding is twice the vertical padding to enhance visual balance. I also applied consistent alignment and spacing principles to input fields and chips—especially between text and icons—to ensure responsive and polished layouts across the system.
Decision 3: Implement Label Variants for Clarity in Input Fields
Input fields are essential across Stellar Cyber’s dashboards, forms, and modals, where frequent text entry occurs. To support varied layouts, I designed regular and float label variants, using regular labels for spacious forms to ensure clarity and float labels for compact interfaces like dashboards to save space. I also adjusted font sizes to maintain hierarchy and reinforce consistency throughout the system.
Final Designs
Buttons
In Stellar Cyber’s complex Open XDR platform, buttons guide users through diverse actions and workflows. Beyond size variants, I designed a scalable button system with multiple types, including primary, secondary, success, info, warning, help, and severity, each tailored for specific functions. The buttons include styles such as icon-only, text-only, raised, outlined, and link, with consistent visual feedback across idle, hover, and selected states to ensure clarity and responsiveness.
Input Fields
Input fields are essential for data entry across Stellar Cyber’s dashboards, forms, and modals. Beyond scalable size and label variants, I implemented multiple statesm including regular, hover, and focused, to provide clear user guidance. I also designed support for left and right icons and incorporated error states to ensure consistent feedback and flexibility for the team.
Chips
I designed chips as compact, interactive elements for filtering and selection within Stellar Cyber’s data-rich environment, where they can appear in groups. To maintain visual consistency, I used a rounded style and a color scheme aligned with buttons, including primary, secondary, accent, query, and disabled colors. Inspired by Material Design’s chip anatomy, I created variants with images and removable icons for greater versatility.
Final Takeaways
Key Takeaway 1: Think in Systems When Designing for Scale
Working on Stellar Cyber’s component library taught me to approach design as a system, not just isolated parts. From button sizes to chip colors, every element needed to work across varied use cases while feeling cohesive. I learned how consistent rules for spacing, padding, and interaction states enable smoother development and a better user experience. Designing for scale isn’t just about flexibility, it’s about building trust through clarity and consistency.
Key Takeaway 2: Define Design Guidelines to Maintain Structure
Creating consistent standards for padding ratios, text alignment, and spacing helped me build a structured and reliable design system. I learned that documenting clear rules, such as keeping horizontal padding twice the vertical, establishes structure for the design process, makes it easier for myself, improves visual balance, and streamlines handoff and collaboration with developers.
Key Takeaway 3: Actively Iterate Based on Feedback
Regular team feedback and testing taught me the value of iterative design. Thoughtfully incorporating input on input labels and interaction states allowed me to continuously refine my designs. Working closely with Stellar Cyber’s team of three main designers gave me the opportunity to gather diverse perspectives and introduced new approaches, ideas, and solutions. I will carry this practice forward by actively seeking feedback early and often, ensuring my future designs evolve with real user needs and team insights.
Contact Me!
janetjliu
janetliu.ca@gmail.com
Pages
Key Projects