Back

MindsDB new interface

2022 · Mindsdb, Design system, Interaction design

Upon joining the Mindsdb team, one of my top priorities was to review and redesign the existing design system and GUI. The old design system, hastily built for the MVP product by a single designer, was inconsistent, not scalable, and outdated. I collaborated with our engineers under the leadership of David, the design lead, to develop a better, organized, and scalable design system.

Problem

The old Mindsdb design system was built on a single Figma page. Lacking proper guides and organization, the old design system reflected the challenges of its early days when a single designer juggled both management and design responsibilities. Despite the simplicity and minimal number of system components, it was very hard to find or track changes in one file.
MindsDB old desgin system in one file

The design system proved to be neither scalable nor complete when introducing new features such as chatbots, LLM integrations, payment plans, and additional settings. This led to frequent breaks in design rules, the addition of new components, and the creation of new variants. Repeatedly, discrepancies between the frontend implementation and the final design arose, resulting in numerous post-implementation issues. Despite detailed component descriptions, the absence of a robust design system with foundational components was the root cause of these gaps.

Challenge

The primary challenge was the constrained timeline for implementing the new design system, compelling us to choose between creating a system from scratch or adopting an existing one. We questioned our team's capability to build a robust system and the time available to establish clear, consistent naming conventions that would enhance communication and streamline our workflow.

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.
Mindsdb foundation design system

Molecules: Combinations of atoms, such as form fields and navigation items.
Mindsdb foundation design system - molecules

Organisms: More complex components, like headers, side-nav, and content cards.
Mindsdb foundation design system - molecules

Templates: Screen layouts that designers can use as a reference or to edit and update for new designs.
Mindsdb foundation design system - templates

We adopted WCAG guidelines to ensure that our colors and fonts provide sufficient contrast for a usable and accessible experience.
Mindsdb foundation design system 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
The documentation search bar within the SQL editor was underutilized by users due to its inaccuracy and inefficiency.
The implementation of a non-responsive design caused content overflow outside element borders and resulted in elements with insufficient height.
There were sizing issues, with elements that should have resized to fit content ('hug content') being incorrectly positioned
A strange overflow space appeared while scrolling.
The options for adding files, whether by uploading or importing via URL, were inaccessible and difficult to find for users unfamiliar with the feature.
The 'Remember Me' checkbox on the login page was poorly arranged.
There was no warning or error message when users entered an incomplete email address in the sign-up page's email field.
The execution time was not displayed, and the 'Run' button behaved incorrectly.
Credit card inputs were not handled accurately.
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.
Mindsdb Icons

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.
Mindsdb Integrations

To avoid any issues during the handoff to developers, I wrote the code and asked them to integrate it, ensuring it matched our requirements and design.
colors handoff to developers for implementation
tailwindcss config to developers for implementation
Typography to developers for implementation

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.
mindsdb GUI

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:
  1. Consistency : Ensured visual and functional harmony.
  2. Efficiency : Streamlined design and development processes.
  3. Scalability : Laid a robust foundation for future growth.