Siroko - Mix & Match

Cart and order summary for a sneaker line with independent per-foot selection.

Role

UX/UI Designer (technical challenge)

Scope

Product flow, selection, cart, order summary

Tools

Figma, generative AI (directed with independent judgment)

Duration

1 week

Siroko was launching a sneaker line where each foot is chosen independently — model, color, and size can differ between left and right. The design challenge wasn’t just allowing the combination: it was making sure no one would accidentally buy something they didn’t want.

01 The challenge

A standard ecommerce cart isn’t built for this. How does the user know which foot they’re working on? How do they confirm, before paying, that they’ve understood exactly what they’re about to receive?

Out of the full purchase flow, I chose to solve three points in depth — the ones where ambiguity actually costs the most:

Foot-by-foot selection — the most complex and unique moment in the product

The cart — where certainty about what’s being bought is most easily lost

The order summary — the last chance to confirm before paying

02 Product page

Three ways to buy, without making the user hunt for them:

Buy as a pair — the easy, most common path, in solid black, carrying the same visual weight as the line’s core value proposition

Mix & Match — choose per foot, with the same visual weight as buying a pair: not a secondary option hidden away

Buy a single foot — the least common case, styled as a text link so it doesn’t compete visually with the other two, but still reachable from the first scroll

This screen doesn’t force a color or size choice yet — that happens in the next step, specific to each path (pair, mix & match, or single foot). Folding that decision in here would have overloaded the PDP with three different flows at once.

03 Mix & Match selection

One foot at a time, in two steps: left first, then right. Each step has only color and size to decide — nothing else competing for attention, so nothing gets picked wrong and needs correcting later in the cart.

04 Cart

This is where certainty about what’s being bought is most easily lost. With each foot chosen separately, it has to stay clear at every moment that left and right belong to the same order — even when they’re different colors, different sizes, or only one was bought.

I designed for all three possible cases, from the easy path to the one most prone to error:

Case 1 · Mix & Match pair — same family, different colors and sizes per foot, presented as a single two-column card

Case 2 · Single foot — no “1 of 2” counter, no empty slot for the other foot: a complete order in its own right

Case 3 · Pair + loose piece — the case most likely to cause confusion, flagged with an explicit notice (“Your cart includes 1 pair and 1 single piece”)

05 Order summary

A second pass on the summary: same order, with more explicit verification before payment and less text to mentally reconstruct. A “Here’s exactly what you’ll receive” block breaks down each foot separately, ahead of the line-item detail and totals.

06 Discarded decisions

Two decisions where more than one reasonable solution existed:

Grouping the pair: single card vs. separate rows. I discarded two standard cart rows linked by a reference note (“linked to: Pair #A213”). The link has to be read, not seen — it takes an extra beat to understand they belong together, and it’s easy to delete one row without registering that it breaks the pair. The two-column card makes the pair visible without requiring any reading.

Combined thumbnail vs. two independent thumbnails. I discarded a single “lifestyle” photo of the worn pair. When the colors per foot are very different, one combined image makes it harder to tell which color belongs to which foot, and an “edit” button over a shared image is ambiguous. Two thumbnails keep each foot as an independently editable unit.

07 Accessibility — WCAG 2.1 AA

With particular focus on the left/right pattern:

Use of color (1.4.1): left/right never relies on color alone — fixed position + full text label + directional icon

Sequence (1.3.2): the source-code order is left → right, matching the visual order

Contrast (1.4.3): black on white and white on black, exceeding 4.5:1

Target size (2.5.5): edit/delete at a 44px minimum, primary CTAs at 52px

Visible focus (2.4.7): a 3px outline on every interactive element

08 Use of AI

Where I used it: building my own brief out of Siroko’s brief, analyzing competitors and context (including categories outside footwear, like eyewear, to see how they handle product personalization mid-checkout), and generating and comparing high-fidelity wireframes.

Where I pushed back on it: the first AI proposals weren’t accessible enough — left and right foot weren’t clear at a glance. I discarded those versions and redirected the process toward a pattern where the left/right distinction was obvious through position, text, and icon — not color alone — before continuing to iterate with AI on that foundation.

On the design system: I didn’t start from the delivered base components. I worked from siroko.com’s look and feel with AI to generate my own high-fidelity wireframes, more aligned with the brand personality I wanted to convey.

09 Takeaway

The real challenge of Mix & Match wasn’t enabling the combination — any selector can do that. It was designing every moment of the flow so the ambiguity between “left” and “right” disappeared before it could become a purchase error. That meant treating the cart and the summary not as confirmation screens, but as the order’s last lines of defense.