DUX Design System
The DUX design system was established to help BetDEX and other products on the Monaco Protocol scale quickly via an easily accessible design system.
Principal Designer
ROLE
2 Years
DUration
Figma
PLATFORMS
The challenge
The team initially faced the challenge of lacking a brand identity or product, necessitating the development of a comprehensive design system from scratch. Despite the vast potential scope, the small design team, limited by time and resources, took ownership, drawing on their expertise to craft a system that balanced structure and flexibility. It aimed to create a consistent visual language while allowing for adaptability. Early communication of the design system's value was essential to secure support and alignment from the broader business.
The aim
Our immediate goal was to develop a scalable design system for BetDEX's exchange product. Furthermore we wanted to release the system and its components to fellow builders on the Monaco Protocol.
We aimed to create a comprehensive design token system, covering colours, typography, spacing, and other attributes for consistent and efficient design. Achieving full parity with development libraries, by integrating Zeroheight and Storybook for documentation and component management, was vital for seamless collaboration between design and development. Successfully implementing these strategies would ensure BetDEX Labs a robust design system that supports rapid iteration, improves efficiency, and ensures a cohesive user experience across all products.
System Structure
The DUX Design System structure, influenced by a tailored version of Atomic Design, organizes into foundations, platform-based libraries, and local design systems.
Foundations are the essential elements underpinning all BetDEX products, including base styles and design tokens for colour and text, ensuring a unique and consistent design language.
Platform-based libraries, like DUX Web, build on these foundations by combining basic elements into more complex, reusable components and elements for broader application.
Local design systems cater to specific products or audiences, such as DUX Exchange, housing unique patterns and data visualisations that, while shareable, are not universally applied across all products.
Component Structure
The DUX design system categorises its library into Elements, Components, Patterns, and Data Visualisations, each serving distinct functions.
Elements are the foundational blocks used to convey specific data or information, crafted from the system's foundations. They are not usually interactive but can be combined to form more intricate structures, like alerts and buttons.
Components are a step up, integrating foundations and elements to create larger, functional units that can be both informational and operational, such as a stepper.
Patterns involve the assembly of multiple components to form cohesive units with a definite purpose, like a sign-up form. This level often sees components repeated to fulfill specific objectives.
Data Visualisations are treated separately due to their complexity, combining foundations, elements, components, and patterns uniquely to suit different screen sizes and devices. Some designs, such as line or bar charts, are specifically tailored for data visualisation, underlining their distinct role within the system.
Result
The structured foundation and extensive component libraries significantly expedited the development process, allowing for more efficient and effective work by providing ready-to-use components and consistent patterns.
Efficient collaboration between the design and development teams was facilitated through clear component structures and documentation, streamlining implementation and focusing efforts on functionality over UI tasks.
This consistency extended to the product's design across all interfaces, improving usability and brand coherence. Crucially, the integration of the design system into our workflow fostered a rapid development culture, enabling swift feature updates and iterations.
