Pegasus Design System: Simplifying Complexity
An easy-to-navigate internal design system platform for teams at Infoblox to maintain design consistency across the organization.
An easy-to-navigate internal design system platform for teams at Infoblox to maintain design consistency across the organization.
Context: Problem Overview
Context: Problem Overview
Context: Problem Overview
Context: Problem Overview
Client:
Infoblox
My Role:
UX designer (Intern)
Duration:
May 2024 - Aug 2024
Services Provided:
UI/UX Design
What happens when a company with thousands of employees worldwide and millions of revenue undergoes a complete identity revamp? It leads to a broken identity.
When I joined Infoblox as a summer intern in 2024, I had one responsibility: organize the fractured, existing design system of a data heavy, cybersecurity platform in a way that anyone across the organization (engineers, designers, marketing team, project managers, higher-ups, etc.) can refer back to this one website that holds all the information related to the visual identity of the company.
What happens when a company with thousands of employees worldwide and millions of revenue undergoes a complete identity revamp? It leads to a broken identity.
When I joined Infoblox as a summer intern in 2024, I had one responsibility: organize the fractured, existing design system of a data heavy, cybersecurity platform in a way that anyone across the organization (engineers, designers, marketing team, project managers, higher-ups, etc.) can refer back to this one website that holds all the information related to the visual identity of the company.
Research: Persona Pain Points
Research: Persona Pain Points
Research: Persona Pain Points
Research: Persona Pain Points
Before starting on the project, I wanted to understand what were the needs and pain points of different users who would be interacting with this platform. Here are key findings:
As a Designer
It had been difficult to collaborate with fellow designers with so many changes happening at the same time
It was difficult to keep track of changes happening in all the UI components
As a Developer
It had been difficult to keep track of all the changes that designers are introducing
There was a gap in understanding of functionality and interactivity of new components
As a Project Manager
It had been difficult to keep consistency in the product with constant changes
A lot of time was being wasted because of constant back and forth between designers and engineers
As a QA Tester
It had been frustrating testing for expected behavior without properly defined references
There is no single source of truth as a reference
As a Sales Person
They were not sure what iteration of the product was currently live
As a New Hire
It is all too much to understand without any references
Senior team members did not have time for proper onboarding
Before starting on the project, I wanted to understand what were the needs and pain points of different users who would be interacting with this platform. Here are key findings:
As a Designer
It had been difficult to collaborate with fellow designers with so many changes happening at the same time
It was difficult to keep track of changes happening in all the UI components
As a Developer
It had been difficult to keep track of all the changes that designers are introducing
There was a gap in understanding of functionality and interactivity of new components
As a Project Manager
It had been difficult to keep consistency in the product with constant changes
A lot of time was being wasted because of constant back and forth between designers and engineers
As a QA Tester
It had been frustrating testing for expected behavior without properly defined references
There is no single source of truth as a reference
As a Sales Person
They were not sure what iteration of the product was currently live
As a New Hire
It is all too much to understand without any references
Senior team members did not have time for proper onboarding
Competitor Analysis: Learnings
Competitor Analysis: Learnings
Competitor Analysis: Learnings
Competitor Analysis: Learnings
To get inspiration and better understand how design systems are documented, I conducted a detailed competitor analysis of design systems of companies in the cybersecurity space (and more). This included: Cisco (momentum design system), IBM (Carbon Design), Oracle (Redwood), Servicenow (Horizon), Dell, Porsche, Material Design 2, Material Design 3. Some of the key learnings were:
It is important to keep consistency in terms of how information is presented (numbering, on labels, etc)
Putting everything on one page like Material Design 2 or Redwood makes content very confusing to digest and navigate
Putting all the content on the same page also holds the attention of the user for less amount of time
Having a mix of top navigation tabs with vertical tabs makes the navigation much easier like in Material Design 3 and Carbon Design
Break the content in smaller, digestible manner
Accessibility usually has its own section
No need to repeat the same visuals, if visuals are not available then its okay to just use text (especially for dos and donts)
To get inspiration and better understand how design systems are documented, I conducted a detailed competitor analysis of design systems of companies in the cybersecurity space (and more). This included: Cisco (momentum design system), IBM (Carbon Design), Oracle (Redwood), Servicenow (Horizon), Dell, Porsche, Material Design 2, Material Design 3. Some of the key learnings were:
It is important to keep consistency in terms of how information is presented (numbering, on labels, etc)
Putting everything on one page like Material Design 2 or Redwood makes content very confusing to digest and navigate
Putting all the content on the same page also holds the attention of the user for less amount of time
Having a mix of top navigation tabs with vertical tabs makes the navigation much easier like in Material Design 3 and Carbon Design
Break the content in smaller, digestible manner
Accessibility usually has its own section
No need to repeat the same visuals, if visuals are not available then its okay to just use text (especially for dos and donts)
Wireframing and Prototyping
Wireframing and Prototyping
Wireframing and Prototyping
Wireframing and Prototyping
I went through multiple wireframes of the product, conducted brainstorming sessions and collected feedback at each iteration. One major learning in this process was how this platform had to be flexible to accommodate ongoing changes in the design system itself.
I went through multiple wireframes of the product, conducted brainstorming sessions and collected feedback at each iteration. One major learning in this process was how this platform had to be flexible to accommodate ongoing changes in the design system itself.
Final Product: Pegasus Design System
Final Product: Pegasus Design System
Final Product: Pegasus Design System
Final Product: Pegasus Design System
The final product consisted of a documentation of all the current components being used by the design team and their descriptions. Some of the important elements of this system were:
Interaction
Simplicity
Motion
The final product consisted of a documentation of all the current components being used by the design team and their descriptions. Some of the important elements of this system were:
Interaction
Simplicity
Motion
Interaction
Adding videos and gifs on the platform helped showcase the behavior of components.
Interaction
Adding videos and gifs on the platform helped showcase the behavior of components.
Interaction
Adding videos and gifs on the platform helped showcase the behavior of components.
Interaction
Adding videos and gifs on the platform helped showcase the behavior of components.
Simplicity
Breaking large amounts of information into smaller sections using tabs helped with the readability.
Simplicity
Breaking large amounts of information into smaller sections using tabs helped with the readability.
Simplicity
Breaking large amounts of information into smaller sections using tabs helped with the readability.
Simplicity
Breaking large amounts of information into smaller sections using tabs helped with the readability.
Motion
Adding small details, such as a moving background in the header and highlights while hovering, helped make the platform more enjoyable to use.
Motion
Adding small details, such as a moving background in the header and highlights while hovering, helped make the platform more enjoyable to use.
Motion
Adding small details, such as a moving background in the header and highlights while hovering, helped make the platform more enjoyable to use.
Motion
Adding small details, such as a moving background in the header and highlights while hovering, helped make the platform more enjoyable to use.
Outcome and Future
Outcome and Future
Outcome and Future
Outcome and Future
The Pegasus Design System led to a 43% efficiency for designers. This was measured as a comparison between the time it took designers to find components previously (in the Figma file), and the time it took them to locate the same component in the design system.
The marketing team was still working on identity elements so when my internship ended, so I could not add those foundational details to the platform. This platform only existed as a Figma file while I worked on it during my internship, the next step was to develop a live website for Pegasus Design System, which I believe is currently being worked on.
The Pegasus Design System led to a 43% efficiency for designers. This was measured as a comparison between the time it took designers to find components previously (in the Figma file), and the time it took them to locate the same component in the design system.
The marketing team was still working on identity elements so when my internship ended, so I could not add those foundational details to the platform. This platform only existed as a Figma file while I worked on it during my internship, the next step was to develop a live website for Pegasus Design System, which I believe is currently being worked on.
