Web Design
System
Standardizing components to ship faster, cheaper, and more consistently.
Role :
Lead UX Designer, Researcher
Company :
Splunk
Tools :
Figma, Miro, Mouseflow, Google Analytics
Outcomes
The design process included multiple overlapping stages that were often developed in parallel rather than following a strict linear path
Reduced custom html components on the live site
01
Benefits:
reduces cost on development work
Decreased time it takes designer to mockup a webpage
02
Benefits:
-
Projects are completed quicker
Provided a central hub for design documentation
03
Benefits:
-
Helps maintain consistency on the website and across projects
-
Provide guidance for our web authors
-
Reduces cost on design and development work
-
Allows for designer and developers to work on more complex projects
COMPONENT AUDIT AND OPTIMIZATION
The first step into building the Splunk Web Design System was to conduct a comprehensive audit of the existing design components to identify redundancies, inconsistencies and health status of our component.
The audit helped us determine which components to retain, update, or deprecate, streamlining the design system for improved efficiency and consistency.
INFORMATION ARCHITECTURE
Next steps were to define the information architecture for the design system, ensuring that components and documentation were logically structured and easy to navigate.
Now that we have the information architecture defined, it was time to apply it.
I collaborated with the design team to establish a structured and organized Figma file system. Showcasing each component, variants, and specifications.
FIGMA FILE STRUCTURE
ZEROHEIGHT INTERGRATION
As a team we decided to use Zeroheight as the tool to house or design system. My role was to publish our figma files and usage guidelines into this tool.
This created a centralized hub for design documentation and assets, which provided easy access and reference for the design team, outside vendors, developers, publishers and more
DO'S AND DONT'S
As apart of the used guidelines I crafted a set of do's and don'ts to provide clear directives on best practices and potential pitfalls when using each design components or pattern.
This helps prevent design inconsistencies and encouraged adherence to established design standards.
I written detailed usage guidelines for the components, patterns, and templates ensuring a shared understanding of how to use them.
How do we use Components
PERFORMANE ENHANCEMENTS
The design system team and I, continuously monitored the design system's components for performance issues on both mobile and desktop platforms.
If components are not performing well, we implement the necessary design enhancements to improve performance or deprecate and replace the component in order to maintain a seamless user experience.
.png)