Top Widgets Redesign
Budget Dashboard
Budget Dashboard is a centralized tool that helps PPC managers and agencies view, and monitor, simplifying how they spot optimization opportunities and manage ad spend efficiently. Its modular design, comparison charts, layout prioritization, and side-tray configurations, lets advertisers instantly catch pacing issues and adjust targets.
Team
PM, Eng., QA
My Role
UI/UX Designer
Duration
2 weeks
Tools
Figma, Lovable, Claude
Overview
Challenge
To design a dashboard that helped users act, not just observe. Despite its polished visual design, the original dashboard was failing users where it mattered most — widgets were data-heavy and unprioritized, forcing users to hunt for what mattered instead of grasping it at a glance. Related data points lived in isolation, leaving users unable to connect metrics meant to tell a single story. The visual layer looked right; the structure underneath didn't.
Original Dashboard ↓
Solution
Redesigned the widgets for the first page fold to eliminate the mental strain of manually connecting fragmented, data-heavy information. High-priority metrics were arranged to read sequentially across the first row, with deeper contextual insights following in the second — giving users a logical, guided path through the data instead of a scattered one.
Research
The research surfaced a clear gap between the dashboard's visual polish and its actual usability. Product analytics and support ticket data pointed to the same root cause: confusion and disengagement were driven by information architecture.
Cognitive Load
Analytics showed users spending 27% longer than expected scanning data-heavy widgets, often revisiting the same metrics to figure out what mattered first.
Disconnected Data
Support Team Strain
Design
Architecting a Sequential Narrative
For the updated layout, stripped away visual clutter to transform the first row into a clean, scalable metric summary. By arranging the KPIs logically from left to right (Target → Spend → Remaining → Projected → Pacing), users can now read their budget health instantly like a cohesive sentence, effectively turning a "this is too much" data problem into a highly intuitive, frictionless experience.
Unlike the initial version, which relied on heavy, isolated visual components—like donut and gauge charts—this refined architecture no longer forces the user to manually bridge the gaps between connected data points.
Establishing Visual and Contextual Balance
For the updated layout, introduced a fully balanced, proportional structure to the second row and strategically reordered the secondary widgets so they sit perfectly within the user's initial viewport (above the fold). This deliberate placement ensures that users can effortlessly scan between the primary metrics in the first row and the supporting data in the second row, allowing them to make quick decisions without breaking their flow.
Unlike the initial version, which suffered from a fragmented layout and left an awkward empty space on the extreme right that broke the screen's visual harmony, this new structure feels complete and grounded.
Fullscreen View ↓
Outcomes
Restructured the information architecture into a sequential narrative, significantly reducing user friction across the dashboard.
Clarification requests to the customer success team dropped 19% within the first month post-launch.
Users were finally able to consume complex metrics independently, leading to a 20% increase in daily active engagement as they could make faster optimization decisions.
