Case Study · Yubi

Revitalizing an Internal Tool with AI

When a critical internal tool was bleeding money and frustrating its users, I saw an opportunity. With zero available developers and a locked backend, I stepped beyond the traditional design role — using my front-end skills and an AI-powered IDE to single-handedly ship a complete UI revamp over a weekend.

Lead Product Designer + AI-Enabled FE Dev One weekend
The HITL Orders tool — why designers should code
The rebuilt Human-in-the-Loop review tool, brought fully in line with our design system.
~30%
Reduction in average case-handling time
24+
Components migrated, eliminating technical debt
~20%
Lower server usage cost

The challenge: inefficiency baked into the system

Our AI-powered Bank Statement Analyzer relied on a Human-in-the-Loop (HITL) tool for quality control. But this critical internal platform had been built as a quick MVP — and it showed.

The HITL tool · before
The disconnected HITL experience
Our design system
Our unified design system in action

The MVP tool (left) followed none of our design system — the unified system it should have matched is on the right.

Fragmented identity
It followed none of our internal design system, creating a jarring experience, raising cognitive load, and accruing maintenance debt.
Complicated UX
High-friction workflows that required constant page refreshes and a broken scrolling model for basic tasks.
Usability issues
Broken layouts on smaller screens, z-index glitches, broken avatars and links, unexpected dropdown behavior.
No real-time feedback
Lack of live updates forced disruptive 5-second refreshes — breeding "refresh anxiety" and a flood of needless API calls.
Compromised layout on smaller screens
Z-index issues caused visual distraction
Broken avatars and links across pages
Unexpected dropdown behavior raised interaction cost
Death by a thousand cuts — compromised small-screen layouts, z-index glitches, broken avatars and links, and unpredictable dropdowns.
This wasn't just a "bad UI." It was a direct hit to operational efficiency — slowing analysts down, raising error risk, and making the platform actively expensive to run.

The solution: a weekend of focused development

With clear goals and a hard constraint — don't touch the backend — I moved from wireframes straight to a front-end revamp, treating it as a weekend hackathon and pairing with an AI-powered IDE (Windsurf) to move fast without cutting corners.

The redesigned tool — full overview
From wireframes to a shipped front-end revamp over a weekend.

A foundational component overhaul

To kill the inconsistencies, I executed a complete front-end overhaul rather than a cosmetic patch — upgrading 14 core components (tables, modals, dropdowns, date-pickers and more) to their latest versions to inherit accessibility improvements, and replacing 10+ legacy one-off elements with official, reusable design-system components.

Proactive notifications (an unasked-for need)

I went past the original scope to design an intelligent notification system that works for the user. It polls for updates based on activity — every 15s when active, 30s when idle, 60s when the tab is out of focus — delivering timely alerts and ambient tab-title status without any manual effort. No more refresh anxiety.

Proactive in-app notifications
Ambient tab-title status updates
Real-time toasts plus ambient tab-title status replaced the old "hit F5 and hope" loop.

Streamlined workflows

I replaced jarring full-page reloads with in-context modals, keeping users in flow and cutting the primary task time from ~45 seconds to under 15.


The impact

The revamped tool went out to a team of 15 analysts with an immediate, measurable effect.

Faster turnaround
Streamlined flows and a more responsive UI cut average case-handling time by an estimated 30%.
Real cost savings
Intelligent polling reduced backend API calls by 45% and server cost by ~20%.
Better analytics
Adding rejection reasons reduced stuck orders and surfaced why files were being rejected.
Recognition from the engineering manager
Recognition for the HITL revamp
Recognition from the engineering and product teams for the revamp.

Reflection

This project reinforced my belief in the maker mindset. Being able to not just design but also build the solution let me execute the revamp with zero engineering overhead — a powerful model for designer-led innovation on internal tools. It's a testament to how a deep understanding of the full product lifecycle, from research to front-end implementation, can unlock immediate, measurable value.

If anyone debates the importance of a design system — show them this case study.

Next case study

From Fragmented Tools to a Unified Fraud Prevention Platform Lead Designer · 6 wks

When the research team was let go, I won back a line to users by redesigning the sales team's decks — then unified four disjointed risk products into one decision engine, validated with clients before a line of production code.