Unified Frontend System
Role
Senior Product Designer → Design System Lead
Duration
12 months
Company
Expera (Tashkent)
Challenge
I joined the team six months after the project had started. By that point development was already running up to 3 months behind schedule. The mission was to turn a fragmented collection of internal banking tools into one modern, unified frontend platform for bank operators and employees. The pressure was real: we had to move fast, build a solid design foundation without slowing down the engineers, and create an interface that would actually feel comfortable for people who had spent years on clunky legacy systems and were very set in their ways.
Objectives
- Consolidate all operator workflows into a single cohesive B2E platform
- Build a custom design system on top of the existing developer UI framework to speed up delivery
- Dramatically improve readability and reduce cognitive load for long shifts
- Create smooth, automated design-to-code handoff processes
Process
1. Design System Foundation
- Took the existing UI framework, completely overhauled the styling, and layered a robust multi-level tokenization system on top of it.
- Using heavy automation, mass-updated hundreds of components and variants in just a couple of weeks — unblocking the dev team and quickly closing the design gap.
- Agreed with frontend leads not to rip up what they had already built, preserving development momentum.
2. Research with a Tough Audience
- Bank operators almost never complain and genuinely believe "everything is fine" — standard user interviews didn't work.
- Leaned hard on business analysts — former operators themselves — and ran deep-dive sessions with them as domain experts.
- Conducted periodic on-site observations at branches to see real workflows in action.
3. Design System Lead & Tooling
- Once the Retail Banking module stabilized, stepped into the Design System Lead role.
- Built three custom Figma plugins with Cursor.ai in a matter of weeks to close the design-dev gap.
Custom Figma Plugins
To finally close the eternal design-dev gap, I built three custom Figma plugins:
- JSON Token Exporter — exports tokens in the exact format developers needed, eliminating manual handoff errors.
- Built-in Status Tracker — tracks component and screen status directly inside Figma files.
- "Design Linter" — automatically audits components and semantic properties for consistency.
I also ran internal workshops to teach the wider team how to work with the design system and documentation properly.
Key Outcomes
- On-time Delivery: Turned a project that was up to 3 months behind into on-time delivery. The Retail Banking module went live exactly on schedule, and we immediately moved on to Corporate Banking.
- Operator Comfort: Made the interface noticeably easier and less tiring for 8-10 hour shifts: larger typography, smart whitespace, and contrast boosted to WCAG AA 4.5:1 — all while keeping every critical piece of data visible.
- Automation: Plugins eliminated manual handoff errors and saved hours every week for both designers and developers.
- Data-driven: Set up full UI telemetry and event tracking before beta so we could hit the ground running with data-driven iterations.
Conclusion
In one year I helped transform a delayed, fragmented effort into a clean, modern, and genuinely usable unified frontend system. I didn't just draw screens — I built the processes, tools, and design foundation that keep delivering value long after I move on. Bank operators finally got a single workspace that respects their reality and makes their daily work noticeably better.