Quick Add
- Role
- Product / UX Designer — first member of the digital team
- Team
- Shopify developers, campaign managers, buying & merchandising
- Platform
- Shopify (Liquid) — mobile-first
+13%
Average order value
+20%
Items per order
1
Page to build a full set
Average order value up 13%, items per order up 20%. Influencers were selling DFYNE in full sets; the website sold it one garment at a time. So I moved set-building onto the collection page — and gave merchandising a place to put the stock nobody was seeing.
Decisions
The calls that shaped this, what each one was chosen over, and what it cost.
- 01
Built for the set, not the garment
Instead ofA conventional quick-add: a faster route to buying the one thing you were already looking at.
The marketing is almost entirely influencer-led, and what the influencers show is full sets — top, shorts, leggings, bra. That was understood inside the marketing department and had never reached digital. Every competitor I audited had built the single-item shortcut; none had built for the way this brand's customers were actually being sold to.
CostIt is a heavier interaction than a one-tap add, and it asks more of a customer who genuinely only wants one thing.
- 02
Complete the Set is curated by merchandising, not by an algorithm
Instead ofRecommendations generated from purchase data, or hard-coded set relationships maintained by developers.
Built with the developers and the campaign managers so the ecommerce team can choose what appears in those slots. That handed buying and merchandising a platform to put underselling product in front of millions of customers at the point of highest intent — a route they had nowhere else on the site. It is also where an earlier argument landed: on the mega menu I refused merchandising the six colour slots, because a navigation full of stock nobody wants looks bad and performs badly. The need was legitimate; the navigation was the wrong place for it. This is the right one.
CostThe quality of the feature now depends on whoever is curating it. A neglected slot degrades quietly, and there is no algorithm underneath to catch it.
- 03
Suggest a colourway that complements rather than matches
Instead ofShow the same colour across the set, which is how the brand merchandised.
Watching influencer accounts, the thing they were doing that DFYNE never pushed was mixing colours — a bra in one shade against shorts in another. Customers were already styling the brand that way. The set suggestions follow what the customer was doing rather than what the brand was saying.
CostIt puts a styling opinion in the cart, and a wrong pairing is more conspicuous than no pairing at all.
The whole flow
Six screens, one page. The old journey was a product page per garment, and the point of showing this end to end is that you can see how short it is without scrolling for a minute to find out.
01
Add from the grid
A plus on every card. No product page needed to start.
02
The sheet opens
The primary button reads Select a size and is disabled — the instruction is the control, so nothing can be tapped and fail.
03
Pick a size
The same button becomes Add to Cart. View Product stays underneath for anyone who wants the full page.
04
Added — and the set appears
Want the matching set? sits inside the confirmation, above the subtotal. Merchandising chooses what shows here.
05
Size the next one in place
The picker opens inside the slot the product occupies. No new screen, no lost position.
06
Two items, one fewer to go
The set counter drops from 1/3 to 1/2 and the subtotal moves with it. It reads as completing a set, not working through a list.
What I was working inside
- I was the first member of the digital team. Nobody at DFYNE had worked with digital before, so a real part of this job was building the relationships and showing why bringing digital into campaign planning produces a better experience — not just shipping the feature.
- The audience is overwhelmingly 18-to-25 year old women in Australia and America, on a phone. 67% are returning customers, so the flow had to reward people who already knew the range rather than explain it to them.
- Shopify and Liquid, built with the developers rather than by me — so the curation had to be something the ecommerce team could operate without a deploy.
The problem
- Customers arrive on collection pages with strong intent — especially on drop days, when a matching set can sell out while you are still assembling it.
- Building that set meant opening a product page, choosing a size, adding to cart, then repeating the whole sequence across several more.
- Every extra page load was another chance to lose the thread, on an audience that is overwhelmingly on a phone.
- The collection pages had steep drop-off, and the product cards offered no way in at all: no quick-add, no swatches, no sizes.
- The product page is built for consideration. For someone who already knew what they wanted, it was adding delay rather than helping them buy.
How I approached it
- 1
Started with who actually buys
18-to-25 year old women in Australia and America, on a phone, 67% of them returning. Not one-off purchasers — customers who live in the brand and already know the range.
- 2
Read the marketing against the site
The influencer partnerships were selling full sets — top, shorts, leggings, bra. That was common knowledge in the marketing department and had never reached digital. Being the first digital hire, part of the work was getting into those conversations at all.
- 3
Competitive audit
Mapped quick-add patterns across 15 plus brands. Everyone had built a faster route to a single product; nobody was solving for the set.
- 4
Working prototypes
Interactive prototypes that simulated a real purchase flow, rather than static mockups of a modal — so a test session could fail at the point a real customer would.
- 5
Extensive in-house testing
Repeated sessions with colleagues from across the business, deliberately including people who do not use the website day to day, so the flow had to hold up without insider knowledge of the range. Nothing collapsed in those sessions; what they did was let me keep cutting with some confidence that the flow still held.
- 6
Iterative reduction
Stripped the UI back from a mini-homepage concept to only the information needed to decide and move on. The set-building idea appeared around the third iteration — the feature the case study is named for was not in the brief, it emerged from cutting.
- 7
Measured it after launch
Comparative CRO analysis on the live feature rather than stopping at the qualitative sessions — which is where the 13% and 20% come from.
The marketing knew. Digital didn't.
Influencers were selling DFYNE in full sets. The website sold it one garment at a time, and nobody had joined those two facts up.
DFYNE's customer is an 18-to-25 year old woman in Australia or America, and 67% of them are returning customers. These are not one-off purchases — they are people who live in the brand and already know the range.
The marketing is extremely heavy on influencer partnerships, and what those influencers show is the full set: the top, the shorts, the leggings, the sports bra. That was well understood inside the marketing department. It had never made its way to digital.
I was the first member of the digital team. Nobody at DFYNE had worked with digital before, so part of this job was building those relationships from nothing and showing why bringing digital into campaign planning makes a better experience for the customer. Quick Add is what that argument looked like once it was built.
What I changed
- Reframed quick-add as a set-building tool rather than a shortcut for single-item purchase.
- Reduced the UI to only the information needed to make a decision quickly.
- Made size selection progressive so users committed to one product at a time instead of processing the whole set at once.
- Kept the full set-building flow on the collection page so users could preserve momentum.
Before & after
The strongest change was turning quick-add from a single-item shortcut into a coordinated set-building flow.
Before
- Open product page
- Select colour and size
- Add to cart
- Scroll to related products
- Click through to next PDP
- Repeat for each item in the set
After
- Tap "Add" on the collection page
- Select size
- Item added and matching set surfaces
- Repeat inline for each item
- Checkout from one page
Only what it takes to decide
The first version of this was closer to a mini-homepage in a sheet. Nothing about it failed in testing — it was simply more than the decision required, and it got stripped back across several iterations to the things someone actually needs in order to say yes: the garment from a couple of angles, the name, the colourway, the price, and the sizes.
Add to Cart is the primary action and View Product sits under it, so the full page is still one tap away for anyone who wants the detail. The shortcut never becomes a dead end.
The confirmation is the cross-sell
The moment a customer has just said yes is the moment they are most willing to say it again — so the set lives inside the confirmation rather than somewhere after it.
Want the matching set? sits directly beneath the item that was just added, above the running subtotal. It is not a recommendation strip further down the page; it is the same sheet, continuing.
It was not in the original concept. The first iterations were a faster route to a single product, which is what every brand I audited had built. Complete the Set arrived around the third iteration — once the sheet had been reduced far enough that there was room to ask a second question without the first one getting crowded.
What appears in those slots is chosen by the ecommerce team. Working with the developers and the campaign managers, I built it so buying and merchandising can decide what gets promoted there — which handed them a way to put underselling product in front of millions of customers, at the point of highest intent, with no other route to that audience anywhere on the site.
The suggestion is a complementary colourway rather than a matching one — the Raspberry bra against Blossom shorts. That came from watching influencer accounts: they were mixing colours, which DFYNE never pushed as a brand. The set follows what customers were already doing rather than what the brand was saying.
One size decision at a time
Adding a second item does not send the customer anywhere. The size picker opens in place, inside the slot the product occupies, and closes again once chosen.
That keeps the decision small. Sizing a whole outfit at once is four decisions held in the head simultaneously; sizing one item, then the next, is the same work broken into pieces a person can actually finish.
The set gets shorter as you build it
With two items in the basket, the sheet lists both, the subtotal updates, and the set counter drops from 1/3 to 1/2 — what is left to add, rather than what was offered at the start.
It reads as a set being completed rather than a list being sold, which is the difference between the feature the brand needed and the one every competitor had already built.
THE FLOW, END TO END
Try it
What it did
- Average order value rose 13% year on year.
- Average items per order rose 20%, from 2.0 to 2.4 per transaction.
- A matching outfit could be assembled from a single page, in a handful of interactions.
- Broader commercial factors move those figures too, and I would not claim the feature alone did it. But the lift is in items per order rather than spend per item — which is exactly what a set-building flow should move, and the reason I think the thesis held.