Enhanced DDoS Portal Redesign
Turning Delays Into Design Wins
I stepped in as interim design lead on a stalled redesign, four months behind schedule, mentoring a contract designer on accessible Material UI standards, restructuring the IA, and realigning flows to real user workflows during a 5-week coverage gap. The redesign later launched with strong results: task completion improved 25%, and support tickets dropped 30%.
Client
AT&T Cybersecurity
Role
Lead Designer
Team
2 Contract Designers,
Product Managers, Engineering & Stakeholders
Timeframe
5 Weeks
Skills
Interface Design, Design Component Library, Figma, Mockups, Accessibility Compliance, Cross-Functional Collaboration, Communication, Attention to Detail, Empathy
Customized Home Page for Non-Reactive Users
A final solution screen shot of the DDoS portal home page for Non-Reactive users showing Traffic Analytics, Active Mitigations and Recent Alerts panels.
Context
The Product
AT&T Cybersecurity’s USM platform provided multiple essential security capabilities in a single SaaS solution, including threat detection, incident response, and compliance management.
The Problem
When a DDoS (Distributed Denial of Service) attack happens, customers need immediate understanding. Instead, AT&T Cybersecurity's DDoS customers were juggling three separate portals to interpret their traffic, alerts, mitigations, analytics, protected zones, reports, admin tools, and documentation.
Each portal looked and behaved differently, which added friction during already high-pressure moments.
Our MSS operations team confirmed the impact: about 70% of support calls were tied to portal confusion.
My Role
My role was interim design lead for the contract designers. I also helped establish some initial designs and templates. I led design on the two Non-Reactive and Reactive users' portal landing pages, traffic, alerts, and mitigations pages before handing off back to my team. The DDoS portal redesign team carried the work forward, completing the protected zones, traffic analytics, reports, admin tools, and documentation sections.
Goals/Project Duties
Onboard the team
Get the few contract designers up to speed on our design library, branding guidelines, product requirements, and platform patterns.
Guide design reviews
Lead design reviews so the work reflected what both users and the product required. Also check accessibility contrasts while I was there.
Stakeholder meetings
Clarify design goals and help the team meet deadlines.
Sections of mui component library
Challenges & Constraints
The squad had reached a standstill. The contract designer still needed more info and guidance on the brand and product system design.
There were a lot of challenges and constraints:
Short timeline
Highly technical content
No access to current products
Lean research
Lean user testing
New design library without much documentation
Constrained confined deliverables
Lots of ambiguity!
Preliminary Research & Findings
Three separate portals to unify everything into one cohesive experience
Working under a tight timeline, we conducted guerrilla UX research to quickly surface the core issues. The DDoS experience lived across three disconnected portals with inconsistent navigation and patterns. Users described it as fragmented and unintuitive. They bounced between tools to find basic information, lacked a reliable starting point, and struggled to interpret key data. Support teams saw the same problems through recurring questions.
Users needed one stable, predictable portal they could rely on. The goal became clear: unify everything into a cohesive experience.
What Failed and What Was Chosen
Portal home page for Non-Reactive Customers.
Early round of a wireframe of Portal home for Non-Reactive users which gives equal weight to the Traffic Analytics and Alerts, while Mitigation updates scroll across the top.
Key Decisions
Strategy
Portal unification: Three disconnected portals with inconsistent navigation were consolidated into one cohesive experience. Two distinct home pages served Non-Reactive and Reactive users without fragmenting the experience again.
Design for a Non-Reactive Portal Page
Active Mitigations: Early explorations over-emphasized severity, making panels too prominent and creating cognitive noise. Pulled back the visual weight so it read as status, not alarm.
Traffic Analytics table: Added breathing room and horizontal width to surface all data columns. Removed horizontal scroll as a pattern.
Alerts: Equal spacing created a flat wall of identical visual weight. Reworked it so alerts felt scannable. Removed per-card background color — too much noise at density.
Triage
UX flows: With templates needed immediately and 4 weeks already lost, I prioritized UI mockup delivery over full flow documentation. Flows were deferred to a future phase.
Scope boundary: Stayed in my lane as UI lead — onboarding the contract designer, driving design reviews, delivering accessible templates. Expanding scope would have cost more time than it saved.
Outcomes & Impact
Within a month, the redesigned experience took shape. We reduced cognitive load through a clearer IA, made the content within tabs more concise, and reorganized navigation to remove unnecessary searching. Improved tables, meaningful badges and icons, and improved visual hierarchy. We kept the design consistent, accessible and reduced confusion. There were 2 custom home pages for the portal- one for Non-Reactive users and one for Reactive users.
Usability testing confirmed the improvement
↑
25%
↓
30%
Users completed task flows faster
Support tickets tied to portal confusion
Usability testing confirmed the improvement. Users completed task flows 25% faster. Support tickets tied to portal confusion declined by 30%. Customers found the visuals more trustworthy and aligned with the broader platform, and product leaders highlighted the strengthened consistency and usability.
Customized Home Page for Non-Reactive Users
A final solution screen shot of the DDoS portal home page for Non-Reactive users showing Traffic Analytics, Active Mitigations and Recent Alerts panels.
A Final Design of the other customized home page for Reactive users
A final solution screen shot of the DDoS portal home page for Reactive users showing Traffic Analytics, Active Mitigations and Recent Alerts panels.
A Final Design of Traffic Details
A final solution screen shot of Traffic Details.
Reflection & Growth
Despite the challenges and constraints, I relied on cross-functional collaboration and clear communication to keep the project moving during a critical gap, helping set it back on schedule during a critical staffing gap, before returning to my core team. A new contract UX designer later continued the work through launch.
With more time, I would have explored different chart generators like D3. I would have also liked to explore providing specialized dashboards to multiple archetypes using AI to strategize and produce more options.
Award
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 56 57" xmlns="http://www.w3.org/2000/svg"><g d="M 47.945 0.583 C 43.865 0.298 37.379 0 28.125 0 C 18.871 0 12.385 0.298 8.305 0.583 C 4.222 0.867 0.977 3.948 0.615 8.073 C 0.303 11.618 0 16.968 0 24.375 C 0 31.782 0.303 37.132 0.614 40.676 C 0.977 44.802 4.222 47.883 8.304 48.167 C 12.109 48.432 18.004 48.71 26.283 48.746 L 26.268 48.732 C 24.872 47.339 23.99 45.515 23.764 43.556 C 22.585 42.065 21.875 40.177 21.875 38.125 C 21.875 36.073 22.584 34.185 23.765 32.695 C 23.99 30.736 24.872 28.911 26.268 27.518 C 27.661 26.122 29.485 25.24 31.444 25.014 C 32.935 23.835 34.823 23.125 36.875 23.125 C 38.927 23.125 40.815 23.834 42.305 25.015 C 44.264 25.24 46.089 26.122 47.482 27.518 C 48.878 28.911 49.76 30.735 49.986 32.694 C 51.166 34.184 51.875 36.073 51.875 38.125 C 51.875 40.177 51.166 42.065 49.985 43.555 C 49.79 45.252 49.101 46.854 48.003 48.163 C 52.058 47.853 55.275 44.783 55.636 40.676 C 55.947 37.132 56.25 31.782 56.25 24.375 C 56.25 16.968 55.947 11.618 55.636 8.074 C 55.273 3.948 52.028 0.867 47.946 0.583 Z M 13 15.5 L 39.25 15.5 C 40.631 15.5 41.75 14.381 41.75 13 C 41.75 11.619 40.631 10.5 39.25 10.5 L 13 10.5 C 11.619 10.5 10.5 11.619 10.5 13 C 10.5 14.381 11.619 15.5 13 15.5 Z M 13 20.5 C 11.619 20.5 10.5 21.619 10.5 23 C 10.5 24.381 11.619 25.5 13 25.5 L 20.5 25.5 C 21.881 25.5 23 24.381 23 23 C 23 21.619 21.881 20.5 20.5 20.5 Z M 25.5 38 C 25.498 39.511 26.182 40.942 27.358 41.89 C 27.197 43.393 27.725 44.888 28.795 45.955 C 29.59 46.752 30.632 47.256 31.751 47.385 C 31.758 50.052 31.842 52.719 32.001 55.381 C 32.064 56.431 33.323 56.911 34.082 56.183 L 36.102 54.247 C 36.465 53.9 37.036 53.9 37.399 54.247 L 39.418 56.183 C 40.178 56.912 41.436 56.431 41.5 55.381 C 41.659 52.719 41.743 50.053 41.75 47.386 C 42.868 47.257 43.91 46.752 44.705 45.955 C 45.775 44.888 46.303 43.393 46.142 41.89 C 47.318 40.942 48.002 39.511 48 38 C 48.002 36.489 47.318 35.058 46.142 34.11 C 46.303 32.607 45.775 31.112 44.705 30.045 C 43.638 28.975 42.143 28.447 40.64 28.608 C 39.692 27.432 38.261 26.748 36.75 26.75 C 35.239 26.748 33.808 27.432 32.86 28.608 C 31.357 28.447 29.862 28.975 28.795 30.045 C 27.725 31.113 27.197 32.607 27.359 34.11 C 26.182 35.058 25.499 36.489 25.5 38 Z M 33.5 38.125 C 33.5 39.851 34.899 41.25 36.625 41.25 C 38.351 41.25 39.75 39.851 39.75 38.125 C 39.75 36.399 38.351 35 36.625 35 C 34.899 35 33.5 36.399 33.5 38.125" fill="transparent" height="56.53243959007315px" id="anwDkWrGy" width="56.25px"><path d="M 47.945 0.583 C 43.865 0.298 37.379 0 28.125 0 C 18.871 0 12.385 0.298 8.305 0.583 C 4.222 0.867 0.977 3.948 0.615 8.073 C 0.303 11.618 0 16.968 0 24.375 C 0 31.782 0.303 37.132 0.614 40.676 C 0.977 44.802 4.222 47.883 8.304 48.167 C 12.109 48.432 18.004 48.71 26.283 48.746 L 26.268 48.732 C 24.872 47.339 23.99 45.515 23.764 43.556 C 22.585 42.065 21.875 40.177 21.875 38.125 C 21.875 36.073 22.584 34.185 23.765 32.695 C 23.99 30.736 24.872 28.911 26.268 27.518 C 27.661 26.122 29.485 25.24 31.444 25.014 C 32.935 23.835 34.823 23.125 36.875 23.125 C 38.927 23.125 40.815 23.834 42.305 25.015 C 44.264 25.24 46.089 26.122 47.482 27.518 C 48.878 28.911 49.76 30.735 49.986 32.694 C 51.166 34.184 51.875 36.073 51.875 38.125 C 51.875 40.177 51.166 42.065 49.985 43.555 C 49.79 45.252 49.101 46.854 48.003 48.163 C 52.058 47.853 55.275 44.783 55.636 40.676 C 55.947 37.132 56.25 31.782 56.25 24.375 C 56.25 16.968 55.947 11.618 55.636 8.074 C 55.273 3.948 52.028 0.867 47.946 0.583 Z" fill="rgb(197, 232, 253)" height="48.746000000000095px" id="lOgE4whl4" width="56.25px"/><path d="M 2.5 5 L 28.75 5 C 30.131 5 31.25 3.881 31.25 2.5 C 31.25 1.119 30.131 0 28.75 0 L 2.5 0 C 1.119 0 0 1.119 0 2.5 C 0 3.881 1.119 5 2.5 5 Z M 2.5 10 C 1.119 10 0 11.119 0 12.5 C 0 13.881 1.119 15 2.5 15 L 10 15 C 11.381 15 12.5 13.881 12.5 12.5 C 12.5 11.119 11.381 10 10 10 Z M 15 27.5 C 14.998 29.011 15.682 30.442 16.858 31.39 C 16.697 32.893 17.225 34.388 18.295 35.455 C 19.09 36.252 20.132 36.756 21.251 36.885 C 21.258 39.552 21.342 42.219 21.501 44.881 C 21.564 45.931 22.823 46.411 23.582 45.683 L 25.602 43.747 C 25.965 43.4 26.536 43.4 26.899 43.747 L 28.918 45.683 C 29.678 46.412 30.936 45.931 31 44.881 C 31.159 42.219 31.243 39.553 31.25 36.886 C 32.368 36.757 33.41 36.252 34.205 35.455 C 35.275 34.388 35.803 32.893 35.642 31.39 C 36.818 30.442 37.502 29.011 37.5 27.5 C 37.502 25.989 36.818 24.558 35.642 23.61 C 35.803 22.107 35.275 20.612 34.205 19.545 C 33.138 18.475 31.643 17.947 30.14 18.108 C 29.192 16.932 27.761 16.248 26.25 16.25 C 24.739 16.248 23.308 16.932 22.36 18.108 C 20.857 17.947 19.362 18.475 18.295 19.545 C 17.225 20.613 16.697 22.107 16.859 23.61 C 15.682 24.558 14.999 25.989 15 27.5 Z" fill="rgb(40, 89, 197)" height="46.03243959007315px" id="VaLxXzbZV" transform="translate(10.5 10.5)" width="37.50000283674674px"/><path d="M 0 3.125 C 0 4.851 1.399 6.25 3.125 6.25 C 4.851 6.25 6.25 4.851 6.25 3.125 C 6.25 1.399 4.851 0 3.125 0 C 1.399 0 0 1.399 0 3.125" fill="rgb(197, 232, 253)" height="6.25px" id="gn5YR9vr8" transform="translate(33.5 35)" width="6.25px"/></g></svg>)
I was awarded “Support of DDoS UX and Going Above and Beyond” for collaboration and accessible design excellence.