Authentication Banner System Design

A scalable authentication entry system that standardized access patterns across 1,000+ pages.

Impact

Localization runtime: 120h → 3h

Design-to-dev cycle: 4 weeks → 1 week

Same-day publishing via CMS

Zero engineering support for routine updates

Understanding the Real Pain Points

Why are we solving this?

A "simple banner update" sounds simple, but it's actually a recurring organizational bottleneck in reality.

Every quarterly update triggered new engineering work
Different design teams submitted different design files, resulting in inconsistent layouts across page types
Localization alone required ~5 days (120 hours) per iteration, thus small content changes often restarted the entire delivery cycle

As a result, engineering capacity was repeatedly consumed by low-leverage work, delaying higher-impact initiatives and increasing internal business operational cost.

Business Evaluation & Product Requirements

How to define a scalable banner model?

To solve the problem at scale, the solution had to support:

Integrate with Experience Manager (CMS) so non-technical teams could publish independently
Maintain design consistency across diverse page types (home, search, product, checkout, etc.)
Support requirements for legal, variable experience patterns, accessibility, localization, and edge cases
Model design needs to be approved by 15+ stakeholders across 10 teams, each with distinct design principles

This shifted the problem from "designing a banner" to designing a system that could survive organizational and technical complexity.

Design Strategy & Explorations

How I approached a complex system problem?

Instead of starting with visuals, I focused on:

Identifying repeatable patterns
Defining guardrails instead of fixed layouts
Designing not just for the ideal scenario, but also for edge cases
Creating multiple design explorations to stress-test the system before finalizing design proposal

The guiding principle was: If the system works for the worst-case scenario, it will scale effortlessly for everything else.

Design × Technology Trade-offs

Navigating constraints, not fighting them

Several proposed designs were not technically feasible due to CMS platform limitations. Rather than treating this as a blocker, I worked closely with engineers to:

Understand technical constraints early
Evaluate alternative design approaches
Make informed trade-offs that preserved usability and scalability

The final solution represents a balanced outcome, where design intent and technical reality reinforced each other.

Layout resilience for variable content

Improved layout resilience by restructuring CTA placement to prevent wrapping and maintain usability across smaller screens, longer localized content, and accessibility settings.

This ensured:

Visual stability across devices even with localization
Improved touch targets on small devices
Preserved trust by avoiding broken UI states

Governed flexibility for authentication entry

Enabled governed flexibility by defining configurable banner layouts that support diverse use cases while preserving consistency, accessibility, and compliance.

This eliminated the need for custom engineering work while maintaining consistency and flexibility.