Alexa's design guidance was scattered across wikis, Quip docs, Word files, and engineering pages — a guide that had come to ship the org chart. I designed the information architecture to consolidate six surfaces into one navigable system — a shared structure, a taxonomy for 50+ components, and a wayfinding model that let any team find the right pattern fast. This is that work, as I designed it during my time on Alexa.
Alexa Mobile is the surface documented in full here. The consolidation gave all six verticals one shared structure — switch between them to feel the system.
The problem wasn't the content — it was findability. Guidance lived across wikis, Quip, Word docs, and engineering pages, maintained by teams that didn't talk to each other, so the guide shipped the org chart: duplicated, conflicting, and impossible to search. I designed one shared architecture every surface follows, so learning it once means knowing where anything lives.
One shared structure every vertical follows — learn it once, know it everywhere.
50+ components grouped into predictable families, so patterns are where you'd expect.
Surface switcher, section nav, search, and a decision tree — the right pattern in seconds.
My task was the top-level navigation strategy and the two layers of navigation — then coordinating with each vertical to secure one naming convention so every surface repeats the same five sections. I built the initial framework and scaffold; partners migrated their content into it on the CMS platform.
The top-level move: six Alexa surfaces, one switcher. Pick where you are — the structure underneath stays identical everywhere.
The second layer: the same five sections in the same order on every surface. This is the naming convention I secured across teams — learn it once, navigate all five.
Guidance was authored by contributors across many Amazon orgs with little communication between them. Over time it fragmented — the guide mirrored the org structure instead of the customer's mental model. The brief was to turn it into one resource that defines, communicates, and raises the CX standards for Alexa.
The real work wasn't the layout — it was alignment. Getting contributors across orgs that had never coordinated to agree on one shared structure and a single naming convention, so the guide could stop shipping the org chart.
The first structure wasn't right. Early cuts organized the guide the way the teams were organized — and the feedback was blunt: that's not how designers actually think. The turning point was re-architecting around the customer's task, not the org chart.
An early landing page and navigation — a starting point to react to, not the answer.
Feedback pushed back: the structure mapped the org, not the way designers actually look for things. I reworked the landing and nav around the task.
“This isn't the mental model — it ships the org chart.”
The two-layer model — a surface switcher over shared sections — resolved into the mocks handed off for implementation.
The final mocks handed off for implementation. The details were refined downstream, but the two-layer navigation and shared section structure held — a landing page that routes to surfaces, and an interior page with the repeated left-nav sections.
Original design mocks from my time on Alexa, shown as case-study evidence of the work I delivered.
The final concept mocks, brought together as one continuous system across Alexa Mobile, Multimodal, Smart Home, Fire Tablets, and Fire TV — the resolved structure in motion, not just static frames.
Orientation for anyone defining the Alexa experience — designers, PMs, engineers, and Bar Raisers. A start-here overview and a decision tree that routes teams to the right pattern fast.
A single front door for anyone shaping the Alexa app. It sets the ground rules — what the guide covers, who owns it, and how teams contribute back — so designers, PMs, and engineers start from the same source of truth instead of four scattered sites.
Hover to readA guided path that routes teams to the right pattern fast — answer a few questions about the use case and land on the component or template that fits, with the rationale spelled out. It's the antidote to the old problem: hunting across sites and guessing.
Hover to readThe building blocks shared across every surface — type, color, iconography, and motion. Shown here in brief; color is the one I've expanded, with the real tokens from the library.
Amazon Ember for the interface, Bookerly for long-form reading — with a defined size & style scale.
Neutral fills plus a set of accent hues — where and how color is applied across the UI.
The shared VDNA icon set at 12–72px sizes, with usage guidance for weight and alignment.
Choreography and timing controls — how elements enter, respond, and settle.
The UI rests on a layered neutral scale, with reserved roles for action, status, and tinted card surfaces. These are the actual tokens from the Alexa Mobile UI Library (light mode).
Neutral surface at rest — the card's default state, using neutral60 and neutral30 for a calm, low-emphasis appearance.
Tokens and hex values are the real light-mode color variables from the Alexa Mobile UI Library. The system also ships a full dark-mode set. Color is applied with restraint — neutrals carry the interface; action, status, and tinted card surfaces signal meaning.
The standards that keep the experience usable, inclusive, and global — a mobile-first philosophy, Nielsen's usability heuristics adapted for Alexa, notifications, and right-to-left internationalization.
Design for the thumb and test one-handed. Low information density, clear pressed states, minimal typing — most interactions happen with a single thumb.
Hover to readBuilt for partial attention and shifting modalities — in hand, docked, or in a pocket. Act optimistically, load progressively, and design for interruption.
Hover to readUnlike communal Echo devices, the phone is personal. Use identity to personalize — timely, relevant content — while respecting privacy and control.
Hover to readA clear, consistent mental model of the IA so customers never have to hunt. Features grouped logically; avoid multiple ingresses to the same place.
Hover to readAccommodates growth in content and Alexa capabilities over time — personalization surfaces what's relevant; categories keep an expanding device family tidy.
Hover to readJakob Nielsen's classic usability heuristics, mapped to real Alexa app patterns. Showing three — expand for the full set of ten.
When to notify and how — timely, relevant, and personalized to drive engagement without noise.
Mirrored layouts and flow for right-to-left locales, so the app reads naturally in every market.
Contrast that survives sunlight and dimmed screens, generous touch targets, and assistive-tech support for all customers.
50+ UI components, each documented end to end — anatomy, interaction states, dynamic behavior, copy guidance, redlines, and linked code. Browse the full library, or open the live Slider specification.
Two more areas the guide covered end to end. Summarized here so the focus stays on the consolidation and navigation work above.
The setup journey, split by input method — app-based for screenless devices (Echo Dot) and device-based for screens (Fire Tablet, Fire TV) — standardized on shared templates so every product's first run feels familiar, capped by the ~90-second First Run Video.
Hover to readA sibling discipline — the sonic language behind the assistant. The guide covered sound tenets, aesthetics, and a full production library where every state and alert has a defined cue across three speaker-quality ranges.
Hover to readI delivered the information architecture, the two-layer navigation model, and the scaffold, and partner teams began migrating their content onto it. Mid-implementation, the broader overhaul was deprioritized as funding shifted, and I moved to another team. The guide today lives under the Amazon Brand Portal and continues to evolve.
The IA, the navigation model, and the section scaffold were validated and handed off — teams started onboarding their surfaces onto one shared structure.
The larger overhaul lost dedicated funding before it was fully migrated. I transitioned to another team as the effort wound down.
It now lives under the Brand Portal. Without sustained ownership, some of the fragmentation the framework was built to solve has crept back in.
A fragmented guide is a funding-and-ownership problem as much as an information-architecture one.
The right structure only holds if it's resourced to be maintained — without that, even a sound system fragments again. That was the root risk I'd flagged going in, and watching it play out confirmed the real work isn't just designing the model; it's securing the ownership that keeps it alive.
