Post by 
July 17, 2025 | 
When you’re handed a dashboard that tries to do everything – rule management, live traffic inspection, analytics, alerting, and more – all in a single view, the overwhelm sets in fast. Add millions of WAF log entries piling up every second, plus an “Export” button that turns frustration into confusion, and you’ve got a recipe for a UX nightmare. This is where our journey began: untangling excessive features, taming the log deluge, and turning clunky exports into seamless workflows.
Here’s how we transformed that chaos into clarity through empathy, iteration, and relentless focus on the user experience.
The Call: “We need a friendlier dashboard.”
It was late January when the Slack message popped up: “Our ops team loves the technology under the hood, but the dashboard? Not so much.” Underneath the compliment lay frustration – too many clicks, inconsistent layouts, and a style system that felt cobbled together. We knew we could help, but the real question was how.
Redesign with empathy
We didn’t start by drafting Vue.js components in isolation. Instead, we spent a week mapping every user flow – logging in, spinning up rules, and digging into DDoS logs. That meant:
- One-on-one interviews with security engineers
- Screen-share sessions with support staff (“Where do you click first?”)
- Whiteboard workshops to pin down the minimal set of controls you need
By the end of that phase, we had a simple rule: clarity over cleverness. If an action didn’t have an obvious place in the UI, it didn’t get drafted.
Phase 1: Building blocks in Vue.js
With a new design system in hand – typography rules, color palettes, component specs – we kicked off a month-long sprint purely focused on components. Two senior frontend developers architected a library of buttons, form fields, tables, and modals. A junior developer worked alongside, building out helpers and animations. Every afternoon, the team gathered for a “show-and-tell”:
“Today I’ll demo how we can resize that pane without a page reload.”
“Check out the new paging control that keeps your place in the table.”
These demos did more than spotlight progress; they invited real-time feedback. On more than one occasion, a tiny tweak-like shifting a label from the top to the left of a field – made a world of difference in comprehension.
Phase 2: Integration and iteration
By early March, the component library was ready, but the real work lay in weaving it into the existing dashboard codebase. Here, the drama of proxy servers and authentication delays added unexpected hurdles. Instead of hiding behind Jira tickets, we kept communication open:
- Daily standups where blockers were aired
- Slack threads are dedicated to each page, so questions and screenshots never get lost
- Weekly retrospectives to ask, “What slowed us down this week?” and “How can we avoid that next time?”
The result? What was estimated as a three-week integration shrank to ten days once everyone adopted the same language – both in design tokens and in communication style.
The payoff: A seamless, modular dashboard
By May, the new interface rolled out. Users who had once groaned at every click were now giving thumbs-up emojis in Slack. Here’s what they got:
- Modular components that can be mixed and matched for future features.
- Consistent styling that makes every page feel like part of the same story.
- Performance optimizations so even large log exports load in half the time.
Behind the scenes, our team emerged with a playbook for any UI revamp:
- Listen first: Stakeholder interviews uncover hidden frustrations.
- Build small: Library-driven development makes iteration painless.
- Communicate often: Transparent updates diffuse most blockers.
Retrospect regularly: Short feedback loops keep the project agile.
Lessons for your next UI overhaul
When a project feels unwieldy or behind schedule, remember: design and development are one partnership. Give every stakeholder a microphone, break work into bite-sized releases, and lead with empathy. That simple shift transforms chaos into clarity – and keeps both users and timelines smiling.
