ORB × PUMA
A self-initiated concept for an Oracle Red Bull Racing × PUMA streetwear drop page, built to sell the drop without losing the people it doesn't fit.
Self-initiated concept. Not affiliated with the brands shown.
- Type
- E-commerce drop page
- Role
- Product Designer
- Timeline
- 5 weeks, concept to prototype
- Tools
- Figma, Figma Prototyping
one button wins
an ordinary way in
dates, not ‘limited time’
somewhere to go after sold out
Overview
ORB × PUMA is the landing page for a limited streetwear collaboration between Oracle Red Bull Racing and PUMA. I designed it as a drop page: one hero moment, a shop module right under it, a dated race-week promo, and a catalog tail so shoppers who miss the drop still have somewhere to go.
Problem
A drop page carries two jobs that pull against each other. It has to build urgency around a scarce release, and it still has to work as an ordinary storefront for anyone who isn't sold on the hype yet. Most drop pages pick one job and drop the other: all hype with no path back to the catalog, or a generic product grid with a banner taped on top.
Process
- 01I built the hero on race photography instead of studio product shots: Max Verstappen mid-celebration next to the car, under a condensed MADE TO WIN headline. The page opens on a win before it asks for a sale.
- 02I gave the hero one button. Shop the drop is the only filled control; the partnership story became a text link under it. My first version had two equal buttons, and it read like I hadn't decided which one mattered.
- 03I put a four-tile Shop the drop grid straight under the hero: best sellers, women, men, the full drop. Each tile says what's inside, so a visitor who isn't sold on the hype still has an ordinary way in.
- 04I tied the race-week promo to a date range, Nov 15 to Nov 29, instead of a generic ‘limited time’ label, and repeated the same dates in the announcement bar and under the hero.
- 05I extended the page past the drop under a plain question, Missed your size?, with winter pieces, sneakers, and gifts. Someone who came for the collab and finds their size gone still has somewhere to buy before they leave.
The hero button, twice
v1: two equal buttons, no decision
v2: one button, the story as a link
Design system
Two systems share the page, and the color tells a visitor which one they're in. Team navy (#121f45) carries every collab surface: the hero, the race-week promo. The catalog sections run on PUMA's retail basics: white ground, grey photo backdrops, black type. Red (#db0a40) is reserved for the act-now layer, the drop buttons, the dates, the live dot, and never decorates; dates set on navy use a lighter red (#ff4d6d) so they still read. Headlines are set in a heavy condensed sans in caps; body copy and links use a plain grotesque. Buttons are 6px rounded rectangles with an arrow; secondary actions are underlined text, never a second button.
- Team navy#121f45
- Act now#db0a40
- Act now on navy#ff4d6d
- Ink#0b0d12
- Catalog grey#f0f0f0
- White#ffffff
Outcome
I designed and prototyped a full desktop drop page: announcement bar, nav with both brand marks, hero, shop grid, race-week promo, catalog tail, gifts, and footer, with every button routed to a real destination. Before build, I'd A/B the one-button hero against the two-button version to check how many people still find the partnership story as a text link.
Reflection
Cutting the second hero button was the right call for the shop, and I'm less sure it was right for the story. I wanted a path into the sponsorship story, and that path is now a text link most people will scroll past. I think that's the honest priority for a drop page, but I made the call on instinct and on the drop pages I've bought from, not on data. The A/B test in the outcome is there because I could be wrong about how many people come for the story rather than the jacket.