Tade Go

Turning a generic Bootstrap dashboard into a scalable brand-native system

TADE GO is an official partner of Yandex Go, operating in Belarus, Georgia, and Turkey, providing couriers and taxi drivers with a dashboard to track performance, payouts, and delivery activity. As a core product used daily, it directly impacts how drivers understand their earnings and performance — making consistency critical across regions and languages.

I joined the project as the only product designer shortly after a brand redesign to integrate the new identity into an existing dashboard built on a generic Bootstrap template — without rebuilding it from scratch. Instead of treating it as a visual update, I transformed the Bootstrap-based UI into a modular, reusable design system.

Problem

The existing dashboard relied on DashLite (a generic bootstrap-based admin template) with no underlying design system — leading to inconsistent patterns and uncontrolled variations across the interface.

Components lacked defined roles — enabling inconsistent usage across the product
No design system existed outside of code — nothing to reference or build from
Each update required manual fixes due to a lack of shared foundation

These issues became more pronounced in a multilingual setup — where components behaved differently depending on content, making the interface harder to learn and trust.

Old bootstrap dashboard

Solution

I defined clear roles for components, reduced unnecessary variation, and made them reusable across the product. This created a system that holds across languages and layouts, with predictable behavior regardless of content. The visual layer was aligned with the brand through consistent rules. Light and dark modes were built into the system using semantic tokens, allowing themes to switch without duplicating components. As a result, the interface became consistent by default, easier to maintain, and able to evolve without added complexity.

DARK MODE

Survey data from the client’s users showed a strong preference for dark mode, so I incorporated it directly into the system rather than treating it as an afterthought.

Dark mode was built as part of the system rather than as a separate layer. Using Figma variables, I defined semantic color roles that could switch at the token level without duplicating components. This ensured visual consistency and predictable component behavior across both themes.