[ Brand Case Study ] Accessibility · Feature Design

D-brand

Aligning a Bold New Identity with Accessibility and Closing Functional Gaps

D-brand's rebrand introduced a striking new visual identity, but the agency-delivered designs fell short in two ways: they weren't accessible, and they didn't account for functionality the brand owner added after the agency's work concluded. My task was to bring the new identity fully into compliance while designing the missing functionality from scratch, without diluting what made the rebrand distinctive.

Lead Web Designer, Digital Department Responsive · Desktop / Tablet / Mobile

Product detail page hero in a dark blue theme

[ d-brand — system_collage ]

[ 01 — The Problem ]

Closer examination of the delivered designs surfaced two significant gaps. First, the designs did not meet WCAG 2.1 AA accessibility standards. Second, the brand owner had expanded the website's intended functionality after the agency concluded its design work, leaving several required components entirely undesigned. The deliverable I received was therefore visually complete but functionally and technically insufficient for production deployment.

SCH.01 // gap_closure rev_1.0 · ▣

fig.01 — The delivered design set: visually complete, with undesigned components and an accessibility gap.

[ 02 — My Approach ]

Remediation & Accessibility

I conducted workshops and consultations with the brand team to design the missing components and layouts in full alignment with the new visual style, while ensuring complete accessibility compliance, auditing and revising all agency-provided assets, and adapting new brand digital materials for web use.

SCH.02 // a11y_baseline rev_1.0 · ▣

fig.02 — Audit and revision loop: agency assets brought to WCAG 2.1 AA with the visual identity preserved.

[ Feature Spotlight ]

Product Choice Advisor

The most substantial gap was functional rather than visual: a new product choice advisor, intended to help users select the right product among several similar variants. I led the complete design process for this feature end-to-end, from research and ideation through low- and high-fidelity design to development and execution.

SCH.03 // end_to_end rev_1.0 · ▣

fig.03 — Product choice advisor: one feature carried end-to-end from research to execution.

fig.04 — Product choice advisor: the shipped needs-based flow guiding users to the right variant.

Information Architecture & Page Layouts

In parallel, I defined the information architecture for the new websites and designed approximately 35 unique page layouts, each built responsively for desktop, tablet, and mobile, to support a phased style migration across markets. All resulting designs were approved by the brand owner and validated against WCAG 2.1 AA throughout.

fig.05 — Part of the ~35 responsive layouts: category listing, product line module, and product detail hero.

Development Support & QA

Beyond design delivery, I supported development of the new template, resolved usability issues during implementation, and assisted with QA and user acceptance testing.

[ 03 — Outcome ]

Brought a visually distinctive, agency-led rebrand into full WCAG 2.1 AA compliance, with accessibility built in rather than retrofitted

Designed and shipped a new feature, the product choice advisor, through a complete end-to-end process from research to execution

Delivered approximately 35 unique, fully responsive page layouts, subsequently adopted across roughly 40 local market websites

Closed critical functional gaps left by the original agency scope, while preserving the integrity of the new brand identity

Resolved longstanding usability issues from previous website versions

Next case study

Finishline

→