Product design case study · Amazon · 5 min read

I designed the page.
Then I taught two teams to build it without me.

Amazon ran cultural event pages across the US store. Each one took about two weeks to execute and needed dozens of individual graphics, because every element was produced by hand and assembled by a designer.

A new internal page-building tool was supposed to change that. It wasn’t ready — it couldn’t do several of the things an event page actually needs. I piloted it on two US cultural events, one of them Hispanic Heritage Month, worked with a design technologist to extend it, and then documented the workflow and trained the two stakeholder teams to run it themselves.

The constraint
A new page-building tool that could not build a carousel or set type outside the standard set, and two events already scheduled.
The decision
Fix the tool rather than work around it, then hand it over rather than keep running it.
What I built
The Hispanic Heritage Month page, the missing capabilities specified with a design technologist, and the documented workflow I then taught both stakeholder teams to run.
The outcome
Page execution fell from 14 days to 3, graphics from 56 to 14, and the stakeholder teams’ own effort for an event page from three weeks to one.
Product
Amazon US store
Role
UX/UI designer
Timeline
8 weeks
14 → 3
days to execute an event page.
Speed
56 → 14
graphics needed per page.
Production
3 wks → 1
the stakeholder teams’ own effort.
Handover
2
teams trained to run it without me.
The point

01 The problem

Two weeks of work that happened every time

An event page took around two weeks and 56 separate graphics.

The two weeks went to three things, and no single one of them was the problem. Every graphic was produced by hand. Each one went through an approval cycle. And the page passed between teams on its way to being built, so the waiting was structural rather than anyone’s fault.

The cost wasn’t only the two weeks. It was that the stakeholder teams — the people who owned the events — couldn’t build anything themselves. Each page had to come through design, so each page waited.

02 The pilot

A tool that wasn’t ready for the pages it was meant to build

I was asked to pilot a new internal page-building tool on two US cultural events, one of them Hispanic Heritage Month.

It was missing two things an event page could not do without.

It couldn’t build carousels. An event page has a lot on it — small business owners, their stores, curated content, promotions — and without a way to group things horizontally, all of it goes in a single column. On a phone that is a very long scroll, and most of the page is below the point where people stop.

It couldn’t do typography outside the standard set. A cultural event page has to look like that event and not like every other page in the store, and type is most of how it does that. But custom type is also where accessibility breaks: a typeface chosen for character, at display sizes, over photography, is exactly the case contrast requirements exist for.

So the second one was not a request for a font. It was a request for a font and the means to prove it still passed.

03 Extending it

The fix was in the tool, not around it

The quick route was to build the page the old way and report that the tool wasn’t ready. That would have delivered the page and left the problem exactly where it was.

I specified what was missing and worked with a design technologist to extend the tool, so the capability existed for every page after this one rather than only for mine.

The Featured Sellers carousel on a phone: a quote from the founders of Luna Magic about cosmetics inspired by Latin culture, three dots marking the slides, and a portrait of the two founders.
Fig. 01 — The Featured Sellers quotes, grouped horizontally: one on screen, the rest a swipe away. Without that grouping, every quote is another stretch of the single column. View full screen

04 The page

Nine business owners, read on a phone

The page itself was about people: nine Hispanic small business owners, each with a link to their brand store, alongside a Hispanic storefront and other curated content.

That is a lot for one page, and it had to work on a phone. The risk was the one from section 02 — everything in a single column, and most of it below the point where people stop.

So the wireframes started on mobile, with the Featured Sellers quotes, Explore Categories and Cultura Stories.

Three phone screens of the page: business owners with a Shop now link under each portrait, the Featured Sellers quote carousel, and an Amazon Music card about artists reshaping Latin music.
Fig. 02 — Three screens of the page on a phone: business owners with a link to each store, their own words in the Featured Sellers carousel, and curated content beside them. Each owner gets a screen, not a line in a list. View full screen
The finished Cultura page on a laptop and a phone: the illustrated Cultura banner, Celebrating Hispanic culture, the line Cultura celebrates the individuals who move Hispanic culture forward, because without you/tú there is no cultura, and a yellow Alexa prompt.
Fig. 03 — The same page has to carry nine business owners, their stores and the curated content on a laptop and on a phone. On the phone, anything that cannot sit side by side goes into one long column — which is the case the carousel was for. View full screen

05 Accessibility

The typography I asked for is the typography I had to prove

The custom typography is the reason this testing existed. Having asked for type outside the standard set, checking every background against both text colours at three sizes was the cost of the request, not a separate exercise.

Throughout the design process, I paid special attention to ensure that all visuals and text elements met the level of colour contrast for both normal text and large text.

Contrast table: each background colour checked against Squid Ink and white text, with the ratio and a pass mark at small, medium and large sizes. Verde 3.97 and 3.41. Maya Blue 2.33 and 5.8. Shortbread 11.78 and 1.15. Maíz Yellow 8.79 and 1.54. Rosa 7.51 and 1.8. Carrot 4.38 and 3.09. Roja 3.1 and 4.37. Each pair is marked don’t use, only bold passes, or passes.
Fig. 04 — Every background colour against both text colours, at three sizes. Three of the seven fail with white text at any size, and one fails with dark text, so the table — not the palette — decides where type can go. View full screen

06 The handover

I stayed available. They stopped having to wait for me.

The work wasn’t finished when the page shipped.

I wrote the workflow down, and then taught it live, step by step, to both stakeholder teams. Documentation on its own would not have done it — a written process is read by someone who already knows what they are looking at, and these teams had never built a page before.

I stayed available afterwards for the questions that only come up once someone is doing the work themselves.

But an event page now took them about a week of their own effort instead of three, and nothing had to come through design before it could start. Being available and being a bottleneck are not the same thing, and the second one was what had to go.

07 Reflection

What I learned

  1. The deliverable and the work are not always the same thing

    The page was what I was asked for. The reason it mattered was that the pages after it didn’t have to wait for me.

  2. A tool that isn’t ready is a brief, not an obstacle

    Building the page the old way would have shipped on time and changed nothing. Specifying what was missing cost more and was the actual job.

  3. Handing work over is a design task

    Documenting the workflow and training two teams was not administration after the design. It was the part that turned one page into a way of working.

Next case study · 4 min read Amazon Pharmacy Design System Building a design system for Amazon Pharmacy.