[ Brand Case Study ] Information Architecture · UX

Doublet

Defining the Missing Information Architecture and User Journeys

While the agency's deliverables established a strong visual direction, they did not address user journeys or the underlying business goals driving the site's content and features. The result was a set of component and layout concepts disconnected from how users would actually navigate the site or what outcomes the business needed it to support.

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

[ doublet — system_collage ]

[ 01 — The Problem ]

[ 02 — My Approach ]

Research, Information Architecture & User Journeys

Leading a UX team of two additional designers, brought on to meet a tight deadline, I began by analyzing all agency materials alongside existing research, gathering input directly from business stakeholders to understand the site's actual goals and content needs. From this, I defined the information architecture for the new website, established its structural foundation, and formed new user journeys, translating them into low-fidelity concepts before any visual design work began.

SCH.01 // ia_definition rev_1.0 · ▣

fig.01 — Concept illustration: loose layout concepts, given a defined information architecture and user journeys before visual design.

Feature & Layout Design

I then designed the site's features using the agency's component concepts, and composed the full set of unique, responsive page layouts, built for desktop, tablet, and mobile, that would form the master template for market adoption. Given the site's primarily informational purpose, several page types, such as product detail and article pages, shared substantial structural overlap, which I addressed directly in the layout design.

SCH.02 // market_rollout rev_1.0 · ▣

fig.02 — Master template fan-out: one layout system adopted across 30+ local market websites.

Doublet product listing layout from the master template set

fig.03 — Layout from the master template set.

fig.04 — Doublet homepage with the COVID alert module, from the final layout set.

Workshops & Remote Delivery

Throughout, I ran workshops with the brand team to finalize features and assets, ensuring brand vision, design innovation, and usability stayed aligned, and supported development, QA, and UAT. The entire project was delivered under fully remote conditions during the COVID-19 outbreak, requiring close team coordination and an agile workflow to stay on schedule.

[ Responsive_Delivery ]

All ~20 page layouts were built for desktop, tablet, and mobile.

Desktop · 1440

Tablet · 834

Mobile · 390

[ 03 — Outcome ]

Defined the information architecture and user journeys the original agency deliverables had omitted entirely

Delivered approximately 20 unique, responsive page layouts forming a master template grounded in research and business goals, not visual concepts alone

Achieved on-time delivery of both the master template and the first market deployment, despite a fully remote project during COVID-19

The master template served as the baseline for over 30 additional local market websites

Led a small UX team through a structurally complex, deadline-driven project under significant external constraints

Final Doublet homepage layout from the master template

fig.04 — A final layout from the master template behind the 30+ market rollout.

Next case study

D-brand

→