SUCCESS
OUTCOMES
1
2
3
Reduced custom html components on the live site
Benefits:
- reduces cost on development work
Decreased time it takes designer to mockup a webpage
Benefits:
- Projects are completed quicker
Provided a central hub for design documentation
Benefits:
- Improved efficiency
- 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
INTRODUCTION
BACKGROUND
A design system is a foundational element for any organization that values consistency, efficiency, and user experience. It serves as a holistic blueprint, providing a set of standardized design components, guidelines, and best practices that streamline the design and development process.
With a well-implemented design system, teams can work cohesively, reducing redundancy and ensuring a consistent brand identity. This not only accelerates product development but also enhances the user experience by delivering a unified and polished look and feel across various digital platforms.
In essence, a design system is a vital tool for maintaining design coherence, fostering collaboration, and ultimately delivering superior, user-centric products and services.
DIVE IN
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.
ORGANIZATION
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.
ORGANIZATION
FIGMA FILE STRUCTURE
Now that we have the information architecture define 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.
ORGANIZATION
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!
HOW DO WE USE THE COMPONENTS?
I written detailed usage guidelines for the components, patterns, and templates ensuring a shared understanding of how to use them.
DO'S AND DON'TS
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.
USAGE GUIDELINES
USAGE GUIDELINES
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.
KEEP IN MIND
COMPANY'S NEED AND ALIGMENT
We collaborate closely with product teams, marketing, and brand to align design system updates with the evolving needs of the company.
We ensured that design components meet the specific requirements of projects and are adaptable to changing business objectives.
