Crafting design systems that elevate businesses
Missed out on the previous episodes?
Why would you need a design system?
Do any of these challenges sound familiar? See if you recognize your brand among them and discover why a design system could be the key to turning these issues around.
UI looks messy and unpolished without common design components, leading to user confusion?
This can make your product confusing and weaken its identity.
Is developer time being wasted on basics instead of innovation? When a foundation is in place and components are pre-tested, engineers can focus on creating features that truly make a difference
Lacking clear guidelines, teams may diverge in their approach, resulting in a brand that appears inconsistent and diluted in its messaging and aesthetic.
Design systems enable products to scale rapidly while maintaining consistency
Envision a tool that slashes full day work to merely ten minutes. The efficiency gains are not just substantial, they're transformative.
Dev speed
Costs
Scalability
Consistency
Initial investment
With a common vocabulary, guidelines, and best practices in place, team alignment is ensured. The time saved by eliminating repetitive tasks can be allocated to improving the product's user experience or polishing existing functionalities
Strategy. Roadmap. Execution.
Discovery - a deep dive into where you're at and where you need to be
Review existing brand guidelines, including logos, color palettes, typography, and tone of voice. Understanding the brand's identity is crucial.
Establish design principles
Develop a set of guiding principles that reflect the brand's values and design ethos. These principles will guide design decisions within the system.
Develop a brand new visual language or enhance your existing one
We create design tokens for colors, typography, spacing, shadows and border radius to ensure consistency and ease of updates.
Additionally, we develop new collections of icons, images, and illustrations, or harmonize your existing assets, to further refine and unify your brand's visual narrative.
Build the component library & guidelines for usage
We document each component, including its purpose, usage, and variations. Design Tokens: Use design tokens for styles (colors, fonts, spacings) to ensure consistency and ease of updates.Best Practices: Provide guidelines on how to use components together to create intuitive and consistent interfaces.
Implement and educate
Workshops and Training: Organize workshops to educate designers and developers on how to use the design system.
Continuously evolve
Monitor Usage: Use analytics and feedback to understand how the design system is being used and identify areas for improvement.
Questions? Answers.
Examples of successful design systems in the industry include IBM's transition to Carbon and Airbnb's Design Language System (DLS).
In IBM's case, their adoption of Carbon resulted in significant improvements, including a 5% increase in conversion rates and over 50% of customers successfully completing purchases (Source). This success underscores the importance of a unified design system in driving better product experiences and enhancing conversion rates.
Similarly, Airbnb's implementation of the DLS led to faster development cycles and reduced quality assurance efforts."The DLS empowered engineers and designers to work more cohesively, resulting in streamlined contributions and a shared understanding of visual style."
This success demonstrates how a well-implemented design system can accelerate product development and foster innovation within large organizations.
How does a design system differ from a UI library or a style guide? A design system goes beyond a UI library or style guide, offering a comprehensive framework that addresses the unique needs and complexities of a specific business, like Econt. While a UI library may provide visual-based components, they often lack the flexibility required for specialized use cases. For instance, Econt's core business decisions, such as choosing shipment details, demand tailored solutions not readily available in generic UI libraries. In such cases, developers are tasked with crafting solutions using standard components like checkboxes, underscoring the constraints of pre-packaged solutions in meeting intricate business needs.
The estimated timeline for developing a design system ranges from 3 to 9 months, depending on factors like the scope of services, products, and desired features. Our approach focuses on efficiency, breaking the project into manageable sections for agile development and continuous feedback. For example, our recent project with Econt involved crafting 72 React web components and 55 React Native mobile components, completed within a swift six-month timeframe. Read more
Our approach is to focus on efficient resource allocation, to prioritize essential features, and leverage cost-effective tools and platforms.Read our blog post on how we built the design system of Econt, a leading logistics company in Bulgaria, on a budget.
Consider factors like increased productivity, faster time-to-market, and improved user satisfaction. A design system greatly streamlines all processes. For instance think about developing a profile page or settings page: previously, it might have taken a week from scratch, involving both internal and external teams. This often led to inconsistencies and delays. However, with the design system in place, utilizing pre-built components and guidelines, the same task could be completed much faster, perhaps in just one day. The resultant enhancement of internal efficiency, collaboration, and user experiences straightforwardly drives a higher ROI.