Why Design System?
Imagine the design system as your trusty sidekick in the world of design. It's like having a seasoned guide that keeps everything looking and feeling the same, no matter how wild the design landscape gets.
It make sure everything looks like it belongs together. No more design chaos – it's all in harmony.
As your product grows, the design system stretches and grows with it. It's like the superhero cape for your evolving product.
It turns design teams into a well-practiced band. Everyone's playing the same tune, making collaboration feel like a jam session.
With pre-set components and patterns, decision-making becomes a party. No more endless debates – the design system is the DJ, and it's got the perfect playlist.
New team members? Easy peasy. The design system is the ultimate crash course, making sure everyone's dancing to the same design rhythm from day one.
In short, it's like the secret sauce in top-notch companies, each adding their unique flavor to keep designs on point and scalable across their ever-evolving products.
Challenges
Whenever we kicked off a new project or hit a different phase, it felt like starting from square one.
Picture this, setting up a brand-new components library every time. It meant going back to the drawing board, redesigning the same components repeatedly, and tweaking the style each time to match the new functionality.
We found ourselves stuck in a loop:
Recreating the same old components like déjà vu.
Juggling between past and present by gathering all the old use cases and crafting new ones for each component.
Navigating through design inconsistencies, outdated interfaces, and scattered resources across teams felt like a bit of a design jungle. It made keeping things consistent and efficient a real challenge, slowing down the groove and success of our products in the organisation.
Problems We Faced
We should make sure our web & mobile apps are accessible for everyone. It's important that our components and it's HTML code follows the WCAG accessibility standards, but here's the hitch: our developers have different levels of know-how. Some just getting the hang of it, while others are practically accessibility wizards, scoring above 80% in understanding. This mix of expertise makes it tough, especially when we're working on specific components. It could mean our final products might not quite hit the mark when it comes to what users expect.
Why Design For Our Organisation?
Even though I've utilised design systems in my previous works, this was my first experience working directly on developing an actual design system. Started with extensive research, scouring various online resources including Medium articles, design guidelines and design systems crafted by industry giants like Google, Apple, IBM, Airbnb, Atlassian, Ant Design and few among others. Additionally, I sought insights from fellow designers who had encountered similar challenges.
The questions driving our endeavour were fundamental:
Why do we need one, and why does it need to be updated?
What problems can we address with this design system?
What is the purpose behind building this?
What does success entail? (for our customers, teams, the business, etc.)
Who stands to benefit from this?
What is the scope of this project?
These inquiries served as guiding lights, steering us towards crafting a design system that not only meets our needs but also aligns with industry standards and best practices.
Component Libraries Saving Time & Money
The Process
With a dedicated team of designers and engineers with a singular aim to define a coherent structure and set of guidelines for our components. Our overarching objective was to forge a collection of elements that seamlessly harmonised within a broader system. Following extensive exploration of various methodologies, we arrived at the conclusion that the Atomic Design approach would provide a robust framework for our system.
I created a mind map to list the components used on our platforms and organized them into an initial structure of atoms, molecules, and organisms. This helped to visualize our design system's foundational elements and their relationships clearly.
Foundation & Principles
Kicking off our design system journey, we began with atoms – the fundamental building blocks that will underpin our entire design ecosystem. Our focus narrowed in on key elements typography, colors, and spacing.
Typography
Now that we've laid the groundwork, it's time to dive into the design foundation, starting with typography. This crucial element sets the tone for our entire visual language.
First off, we need to select the typefaces. We'll carefully choose fonts that reflect our brand identity and resonate with our audience. We'll consider factors like readability, personality, and versatility.
Next, we'll determine the appropriate font sizes for various elements. This includes headings, body text, and any other typographic elements. We'll ensure consistency across different screen sizes and platforms, prioritising legibility and accessibility.
Additionally, we'll define the font weights to establish hierarchy and emphasis within our content. From bold headlines to lighter body text, each weight serves a specific purpose in guiding the user's attention.
By crafting our typography, we lay a solid foundation for our design system, setting the stage for a cohesive and engaging user experience.
Colors
Colors breathe life into our design, evoking emotions and reinforcing brand identity. By defining a color palette, we infuse our digital experiences with personality and visual cohesion, enhancing user engagement and brand recognition.
In our product, blue emerges as the dominant color, embodying our brand identity and guiding users through our interface with familiarity and trust. As such, blue will be designated as a primary color, anchoring our design palette and instilling a sense of cohesion across our digital ecosystem.
Furthermore, call-to-action buttons, pivotal in driving user interaction and engagement, will draw from our primary color palette. By aligning these buttons with our primary colors, we reinforce their prominence and effectiveness in guiding user actions and navigating our interface seamlessly.
Grid
By following a structured grid system, we maintain harmony and coherence across all elements of our design.
Each component, from text blocks to images, should seamlessly integrate within the predetermined grid framework. Consistent spacing, margins, and proportions uphold visual balance and guide users through the content intuitively.
Creating Components
By crafting a single master component, we pave the way for efficiency and consistency throughout our design process. Any changes made to this master component ripple across all related copies, allowing designers to implement updates seamlessly by adjusting specific properties and values.
For the creation process, we ensured that each of our components embodies the following characteristics:
Accessibility
We prioritize ensuring that all users, regardless of ability, can interact with and navigate our digital experiences effectively. From color contrast to keyboard navigation, we adhere to accessibility standards to ensure inclusivity and usability for all individuals. High color contrast isn't just about aesthetics; it's a crucial element that aids users who are partially or completely color-blind, enabling them to discern differences between colors effectively.
Intuitive
Our components are designed with a focus on intuitiveness, ensuring that users can easily understand and interact with them without the need for extensive instructions or guidance. We prioritize clear visual cues, familiar patterns, and logical behavior to create a seamless user experience. By anticipating user expectations and preferences, we aim to minimize cognitive load and friction, allowing users to accomplish tasks effortlessly and efficiently.
Aesthetic
Documentation
Creating comprehensive component documentation is essential for an effective library, enabling everyone to make consistent decisions quickly and efficiently. We've developed detailed documentation that covers every aspect of our design system. It's organised, consistent, and easy to use, providing clear guidance on how to use each component effectively and maintain consistency across projects. This documentation serves as a valuable resource for designers and developers alike, ensuring that our design system remains robust and accessible to all team members.
Figma Component File
We maintained separate Figma components file. This file serves as a shared library of assets that our team can easily access and utilize while working on their designs. With this shared library, team members can simply drag and drop components into their design projects, streamlining the design process and ensuring consistency across all our digital assets.
Achievements & Take Aways
The process of addressing this issue has served as a significant learning experience for us. While we may not be experts in building design systems, we've embarked on a journey into UX Design. Throughout this case study, we've embraced the principles and techniques, learning them on the fly as we navigated through the challenges.
Conducted a comprehensive audit of components across the product, leading to their design and implementation in the library.
Delivered components for major elements of the product, enabling interaction designers to access them as a library, thereby enhancing designers' productivity.
Implemented a design system that significantly improved the consistency and performance of the product.
Organised education and testing sessions for designers, empowering them to effectively utilize the design system in their work.