MDB Design System
Industry
Tech, Artificial Intelligence
My role
Product designer, UI/UX designer
Company
Mindsdb
Background
Back in 2022, we ran into a bunch of design headaches. Our product just wasn't vibing with the design system we had in place, and every time we handed off a design, it took forever to build. Plus, we kept having to deal with a ton of little issues, like fixing stuff that didn't match up or just wasn't working right. So, we started digging into it: Was our design system the problem? Was it the codebase? Or was it a lack of communication?
Challenges
The tight timeline was our main issue. We had to pick: build a new design system or use an existing one. We doubted our team could pull it off fast and worried about time for clear naming to boost communication and workflow.
Single Figma Page Chaos
The old MindsDB design system was crammed into one Figma page, lacking proper guides and organization, mirroring the struggles of its early days when a lone designer handled both management and design.
Hard-to-Track Simplicity
Despite its basic structure and limited components, finding or tracking changes in a single file was a nightmare.
Not Built to Grow
The design system couldn’t scale or adapt to new features like chatbots, LLM integrations, payment plans, and extra settings, making it incomplete.
Breaking the Rules
Adding new features led to constant design rule breaches, new components, and extra variants popping up.
Design-Code Disconnect
Frontend implementation often didn’t match the final design, causing a slew of post-launch fixes.
Hard-to-Track Simplicity
Despite its basic structure and limited components, finding or tracking changes in a single file was a nightmare.
Missing Foundations
Even with detailed component descriptions, the lack of a solid design system with core components was the real reason behind these gaps.
Process
I developed a comprehensive library of UI components, organized into atoms, molecules, organisms, and templates, which served as the cornerstone of the design system.
Atoms
Fundamental building blocks, including colors, icons, and typography.
Molecules
Combinations of atoms, such as form fields and navigation items.
Organisms
More complex components, like headers, side-nav, and content cards.
Templates
Screen layouts that designers can use as a reference or to edit and update for new designs.
Accessibility
We stuck to WCAG guidelines to make sure our colors and fonts had enough contrast, creating a user-friendly and accessible experience.
Tokens
Following the Tailwind CSS naming convention, we did not extensively use design tokens at this stage, limiting their application to the global level and occasionally the alias level.
Icons
Because AI icons are limited, we used a standard library and created custom icons for missing AI terms. For example, 'Model' had multiple representations like spark, bot head, magic wand, or box, showing the lack of standard AI icons.
Integrations icons & logos
I focused on the quality of integration icons, which were often only available as pixelated PNG or JPEG files. To address this, I collected or created them in SVG, significantly enhancing the interface's overall aesthetics.
Handoff
After setting up the specs and tokens, I tapped into my web development skills to write the code myself. To dodge any handoff hiccups, I handed it over to the developers for integration, making sure it lined up perfectly with our design and requirements.
Outcome
Integrate the new design system into the GUI, fix UX/UI issues, and improve the overall user journey. Each part of the GUI has its own improvement story.
Conclusion & Impact
By establishing a cohesive, efficient, and scalable design system, we significantly enhanced the user experience across all platforms. This system yielded tangible results and impact:
- Consistency : Ensured visual and functional harmony.
- Efficiency : Streamlined the design and development process, cutting down the time it took to get things done.
- Scalability : Laid a robust foundation for future growth.