Designing a Scalable Design System
How did we establish a comprehensive design system to streamline our design processes and enhance consistency across our product suite?
Cisco
Interaction Design
12 weeks
The Context
A little about Cisco and design systems…
Cisco Systems designs, manufactures, and sells networking equipment. They provide hardware and software solutions for networking, security, collaboration, and the Internet of Things.
A design system is a toolkit for designers and developers to create consistent and efficient user interfaces. It includes reusable components, style guides, and best practices.
The Problem
Why did we decide to build a design system?
Imagine a growing product suite with various applications. Each application had its own design aesthetic, leading to a disjointed user experience for customers. This inconsistency also hindered development efficiency as designers and developers worked on separate styles.
The Solution
What does our design system comprise of?
To address the problem, we embarked on a comprehensive design system initiative. Our solution consisted of,
Reusable Components
Forget reinventing the wheel! Our library of buttons, forms, navigation elements, and more empowers designers to build interfaces quickly and efficiently.
Pre-Designed Patterns
Common design scenarios like page layouts and information hierarchies are addressed with pre-built patterns, saving design and development time.
Visual Harmony
A unified color palette, consistent typography, and well-defined spacing ensure brand recognition and visual consistency across all products.
Clear Documentation
A comprehensive style guide provides detailed information on typography usage, color application, and iconography to ensure everyone's on the same page.
The Design Team Interviews
What questions did we ask the designers?
To better understand the challenges faced by our design team, we conducted interviews focusing on the impact of a design system. We asked questions about their pain points, inefficiencies, and desired solutions.
fig 1.4 Redundancy
Redundancy
This question helps spot inefficiencies by asking how often designers redo work, pointing to ways tools like reusable components can save time and make work easier. Refer fig 1.4
fig 1.5 Collaboration
Collaboration
This question explores the challenges designers face when working with developers, like miscommunication or workflow issues, to find ways to improve collaboration. Refer fig 1.5
fig 1.6 Accessibility
Accessibility
We asked this to understand designer challenges in creating accessible and user-friendly designs without a system. This helped identify areas where a design system could improve UX and inclusivity. Refer fig 1.6
The Pain Points
What were the top user concerns?
After analyzing the feedback, we identified the major insights hindering our design and development processes.
Inconsistent Design
Lack of a design system leads to inconsistencies, increased effort, and a poor user experience.
Slower Time-to-Market
Lack of a design system delays launches, increases costs, and harms user experience.
Suboptimal User Experience
Inconsistent design leads to decreased user satisfaction, lower conversions, and challenges for teams.
Lack of Scalability
Expanding products without a design system is challenging due to increased complexity and potential technical debt.
Higher Development Costs
Increased costs, inefficiencies, and potential bugs due to inconsistent design and development.
The Journey
What did our process look like?
Recognizing the need for a more efficient and consistent design process, we embarked on building a comprehensive design system.
fig 1.7 Foundations (Colors)
fig 1.7 Foundations (Typography)
The Journey
Foundations
We began by establishing a strong foundation, defining core principles like brand voice and visual identity. This included defining color palettes, typography styles, and spacing guidelines.
fig 1.8 Building the Library
The Journey
Building the Library
We meticulously inventoried existing UI elements and identified recurring patterns. This led to the creation of a component library featuring: -
Atomic Components: Building blocks like colors, typography, and spacing.
Molecules: Combinations of atoms, such as buttons, input fields, and navigation elements.
Organisms: Complex components like forms, cards, and headers.
fig 1.9 Clear Documentation on ZeroHeight
The Journey
Clear Documentation
Each component was meticulously documented with clear naming conventions, usage guidelines, and visual examples. We also included state variations (e.g., hover, active, disabled) for each component.
The Journey
Collaboration and Handoff
We actively involved developers in the process, ensuring a smooth transition from design to development. We provided clear specifications and collaborated closely to build a reusable component library for our front-end framework.
The Journey
Continuous Improvements
We regularly reviewed and improved the system, gathering feedback to ensure it remained robust and effective. This resulted in improved workflows, enhanced user experience, and a stronger brand.
The Challenges
What roadblocks did we face?
The road to building design system was not always a straight path, we did hit a few roadblocks or concerns and decided to make sure the team was onboard with the solutions
Team Alignment
Getting everyone on the same page about the design system's purpose and goals.
Balancing Maintenance & Delivery
Making time for the design system without slowing down product development.
Getting Buy-in
Convincing engineers and stakeholders to use and support the system.
Keeping it Updated
Ensuring the system stays relevant as the product evolves.
The Impact
How did our design system benefit the team?
After analyzing the feedback, we identified the major insights hindering our design and development processes.
The Testimonials
What did our customers and design team have to say?
"I commend the improved visual and interaction consistency across the suite. This unified design enhances usability with predictable component locations and behaviors. The resulting cohesive system streamlines onboarding and minimizes the learning curve, improving overall efficiency and user satisfaction."
-Customer Feedback
"The design system has been a game-changer! I can now focus on solving user problems instead of reinventing basic UI elements. It's significantly improved my efficiency."
-Designer Feedback
The Conclusion
Wrapping up…
In conclusion, the implementation of this design system has significantly enhanced our design and development processes. By fostering collaboration, promoting consistency, and empowering our teams with a shared language, we have created a foundation for building exceptional user experiences that truly reflect our brand identity.