Paused

Vibing with Ev

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.

Role

  • Product Designer

Scope

  • UX/UI design

  • Design System

  • Motion

Tools

  • Figma

  • Jitter

Year

  • 2025

/* Problem */

The existing dashboard relied on DashLite, a generic Bootstrap-based admin template, with no underlying design system. This led to inconsistent patterns, uncontrolled variations, and unclear behavior across the interface.

Components lacked defined roles, so similar actions looked and behaved differently across the product. No design system existed outside of code, leaving the team without a shared reference for design and development. Each update required manual fixes because there was no reusable foundation.

For users, this made key workflows harder to understand and often led them to contact support for guidance.

/* Solution */

I built a mobile app where AI acts as the missing context layer. Instead of relying on users to remember why they saved something, it uses an AI vision model that structurally parses each screenshot: extracting objects, reading embedded text, inferring source and intent, and generating searchable metadata.

The result is users can retrace the meaning and intent behind what they saved even months later - even if they only remember a vague detail and describe it in their own words.

New system

The system covers color tokens, typography, spacing, and core UI components - all documented in Figma and built to work within Bootstrap's existing architecture.

Every component has a defined role, a light and dark variant, and behaves consistently across English, Russian, and Turkish layouts.

Dark mode

Survey data from the client’s users showed a strong preference for dark mode.

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.

Motion

Motion was used selectively to strengthen brand recognition and add a more human layer to the product. The animated login screen turned a high-frequency touchpoint into a clear brand moment, while the birthday greeting introduced lightweight personalization without interfering with core workflows.

Outcome & Reflections

/* Outcomes */

I introduced a shared component foundation that made the interface consistent by default. Components now behave predictably across languages and layouts, reducing manual fixes and making the product easier to extend.

Impact:
Reduced support call volume by 21%.

/* What I learned*/

I’ll add this soon :)

This is just a snapshot of the entire design process

Reach out to e.astapable@gmail.com for the full story

Email Me