Search
- Role
- Product / UX Designer — concept into production
- Team
- Shopify developers, merchandising
- Platform
- Shopify (Liquid) — desktop & mobile web
0
Products the old search showed before you committed
3
Ways a query is understood
DFYNE's search asked you to guess. You typed, saw nothing, and had to commit to a full page load to find out whether the thing you wanted existed. I rebuilt it to answer while you type — in the same three terms customers actually think in: garment, collection, colour.
Decisions
The calls that shaped this, what each one was chosen over, and what it cost.
- 01
The answer goes in the panel, not behind a page load
Instead ofLeave the panel as a doorway and improve the results page it led to.
The old panel charged the same price — a full navigation — whether the query matched forty products or none, so the rational move for a customer was not to ask. Answering in place removes the cost of asking, which is the thing that was suppressing the behaviour.
CostThe panel now loads product imagery on every keystroke, so it is considerably heavier than a list of links and has to be throttled to stay quick.
- 02
Suggestions complete into collection names
Instead ofTreat the query as plain text and match it against product titles.
Marketing is collection-led, so a large share of customers arrive holding a range name they heard from an influencer. Completing 'shorts' into impact, dynamic, defy and vision shorts turns a half-remembered name into a route — and teaches the customer who only knew the garment that four ranges make one.
CostThe suggestion vocabulary has to be kept current. A range that has not been added is invisible to the customer arriving with its name.
- 03
Every result card names its colourway
Instead ofLeave colour to the filters, the way the listing pages do.
At DFYNE a returning colourway is a marketing event, not a product attribute. Hibiscus is the reason for the purchase, so the word belongs at the point of decision rather than two clicks behind it.
CostCards are taller and carry more text, which costs roughly a row of visible results at each density.
- 04
Two result densities rather than one
Instead ofPick a single grid and commit to it.
Scanning and deciding are different jobs. A customer who already knows the product wants as many as will fit; one who is choosing wants the garment big enough to judge the fit and the colour.
CostA control the customer has to notice, and a preference the interface has to remember. It is an unusual thing to ship in a search panel and it has to earn its place every time.
What I was working inside
- Shopify, and the same Liquid back end as the navigation work — so the panel had to be fed by the catalogue data rather than a hand-curated list that would go stale at the next drop.
- I designed and project-managed; the build was the Shopify developers'.
- The panel had to work at both breakpoints from the start. Most of the traffic is on a phone, where a half-width panel is not an option and the whole screen is the only honest answer.
The problem
- The old search was a redirect wearing a search box. Typing "leggin" on mobile produced one line — Show all results for "leggin" — above an entirely empty screen. No product, no image, no count, no indication anything matched at all.
- Finding that out cost a full page load. The customer had to commit to a navigation to learn whether the thing they wanted existed, and then navigate back if it did not.
- The popular-search pills were the only content the panel ever held, and they navigated away too — so the panel could not answer a question, only forward one.
- It also had nothing to say about the two things DFYNE customers actually shop by. A collection name typed into it was just a string, and a colourway was invisible until you reached a listing page and opened the filters.
BEFORE — DESKTOP
What it was doing before
You could type six letters into DFYNE's search and be shown nothing at all — not a product, not a count, not a no.
The panel dropped from the top of the page with a search field and a row of popular-search pills. The pills were reasonable — Shorts, Impact, Leggings, Flares, Sports Bras — and they mixed garment types with collection names, which is how customers arrive. But they were links. Tapping one left the page.
The field itself did nothing until you submitted. Type "leggin" and the panel showed a single line — Show all results for "leggin" — and then several hundred pixels of white. No image, no product name, no result count. The interface had the answer and declined to show it.
That is a search that cannot fail informatively. If the query matched nothing, you learned that after a page load. If it matched forty things, you also learned that after a page load. The cost of asking was the same either way, so the rational move was not to ask.
BEFORE — MOBILE
Before & after
The panel used to be a doorway to a results page. It is now the results page — the same panel, answering rather than forwarding.
Before
- Typing produced no products, no images and no count — just a link to a page you had not seen yet
- Finding out whether anything matched cost a full page load
- Popular-search pills were the only content, and they navigated away
- A collection name was matched as plain text, with nothing to say it was a range
- Colourways were invisible until a listing page and an open filter panel
After
- Results appear beside the suggestions as you type, without leaving the page
- Suggestions complete into collection names — impact shorts, dynamic shorts, defy shorts, vision shorts
- Every result card carries its colourway by name: Hibiscus, Espresso, Copper, Winter Berry
- Compound queries resolve — "pink leggings" returns pink leggings, across collections
- The empty state offers editorial tiles and popular searches rather than a blank panel
Answer while they type
The panel keeps its place on the page and fills the other half with the answer.
On desktop the panel now takes the right half of the window and splits in two: suggestions on the left, live product results on the right. The page behind stays where it was, so a search is no longer a departure — you can look, decide it was not what you meant, and carry on.
Results update on each keystroke and carry the things that decide a click: the product image, the name, the colourway and the price. A Show all results link stays at the foot of the suggestions for anyone who does want the full listing page, so nothing was taken away — the page load simply stopped being the only route to an answer.
Mobile takes the whole screen, because half a phone is not a useful column, but the order is identical: suggestions, then results, then the link out.
It is in the prototype below: click the search icon in the header to open it, then type a garment, a collection name or a colour.
Suggestions that know a range from a garment
Type shorts and the suggestions are not variations on the word. They are *impact shorts, dynamic shorts, defy shorts, vision shorts* — the garment crossed with every collection that makes one, with the matched term left in plain weight so the completion reads as the new information.
This is the mega menu's argument in a different control. DFYNE's marketing is collection-led, so a large share of customers arrive holding a range name they heard from an influencer. A search that treats *Impact* as an ordinary string throws that away; one that completes it turns a half-remembered name into a route.
It also works in the other direction. Someone who only knows they want shorts is shown, for free, that shorts come in four ranges — which is the catalogue teaching itself without a landing page.
Colour arrives in the results, not the filters
"pink leggings" is a colour and a garment in one query, and the search resolves both rather than matching neither.
Every result card names its colourway under the product title — Hibiscus, Light Rose Pink, Espresso, Copper, Graphite, Winter Berry. At a brand where a returning colourway is a marketing event, that word is not a spec, it is the reason for the purchase, and it belongs where the decision is made.
The suggestions handle the compound query too. pink leggings offers *leggings pink*, *baby pink leggings* and *impact leggings light rose pink* — the same three axes again, recombined: garment, colour, and the collection that happens to make it in that colour.
The alternative was the journey the old site had, and the one the mega menu also removed: land on a listing page, open the filter panel, find colour, apply it. Search collapses that into the sentence the customer would have said out loud.
Two densities, because looking and hunting are different
The results grid has a two-up and a three-up state, switched by a control beside the result count. It is an unusual thing to ship in a search panel and it earns its place: a customer who knows the product wants to scan as many as fit, and a customer who is deciding wants the garment big enough to judge.
The rest of the panel does not move when the density changes. The suggestion column holds its width and position, so the toggle changes the answer's resolution without rearranging the question.
The empty state has a job
An open search box with nothing typed is the most common state the panel is ever in, and the old one filled it with five pills. The new one splits it: Popular searches keeps the pills, and Popular right now fills the other half with four editorial tiles — One Piece, Shorts, Quarter Zips, T-Shirts & Tops.
Two of those tiles are womens and two are mens, so the panel does not assume which side of the catalogue the customer is on before they have typed a character.
The pills still mix garment with collection — Shorts, Impact, Leggings, Flares, Sports Bras, Tops — which is the same admission the mega menu makes: people do not arrive with a taxonomy, they arrive with a word.
The same panel on a phone
Mobile takes the full screen rather than a half-panel, and keeps the order — suggestions, the link out, then results. The density toggle survives, which matters more here than on desktop: two-up on a phone is a genuinely different browsing speed from three-up.
The field keeps a Clear action inside it rather than making the customer hold backspace, which is the difference between refining a query and abandoning one.
AFTER — MOBILE
Try it
What it did
- Directional, and I would rather say so: I no longer have access to the analytics to put a number on this one.
- The change that is measurable in principle is the cheapest to state — the old panel could not show a result without a page load, and the new one shows six before you have finished the word.