Mega Menu
- Role
- Product / UX Designer — concept into production
- Team
- Shopify developers, merchandising
- Platform
- Shopify (Liquid) — desktop & mobile web
3
Ways into the catalogue
6
Colours surfaced in the nav
DFYNE's marketing is entirely influencer-led, and drops are collection drops. So I rebuilt the navigation around how customers actually arrive — knowing a collection, knowing a colour, or knowing a garment.
Decisions
The calls that shaped this, what each one was chosen over, and what it cost.
- 01
Six best-selling colours in the nav, not six the business wanted to shift
Instead ofMerchandising wanted the slot used to push colours that were not selling.
A navigation slot full of unpopular colours would both look bad and perform badly — it would advertise the least wanted stock in the most valuable position on the page. The best-sellers selection held, and use of the colour links rose after launch.
CostThe navigation now does nothing for the stock the business most wants to move. The need behind the request was real — it is the problem I solved later on Quick Add, with a merchandiser-curated slot in the cart, where commercial pressure sits closer to intent and further from first impressions.
- 02
Kept the category and collection split I inherited
Instead ofRebuild the structure — the expected move when you pick up someone else's navigation.
It was already sound, and the research I ran afterwards backed it. Rebuilding a working structure to put my name on it would have been vanity rather than design. The job was to add the door it was missing, not to replace the ones that worked.
CostLess of the finished menu is visibly mine. The headline change is an addition, which is a harder thing to take credit for than a redesign.
- 03
Colour stayed a top-level route on mobile
Instead ofCollapse it back into the filter panel on the small screen, which is what a mega menu pattern normally does.
Promoting colour was the decision that took the most arguing for. Conceding it on the breakpoint carrying most of the traffic would have conceded the point entirely — the argument was only worth making if it held at both sizes.
CostThe mobile drawer is longer, and colour competes for space with the editorial tiles that lead it.
- 04
Scoped to what Shopify could actually ship
Instead ofDesign to the ideal and hand it over for someone else to cost.
Working knowledge of the Liquid back end meant designs were briefed to developers in their own terms and could be project-managed from concept into production, rather than stalling at handover.
CostThe ceiling was set by the platform rather than by the problem. The fuller Collections direction tested well in-house and did not get taken forward.
What I was working inside
- Shopify. The menu is driven by Liquid and the collection data rather than hand-built markup, so it had to be one template fed by data — not two menus maintained separately and drifting apart.
- I designed and project-managed; the build was the Shopify developers'. Scoping to what was buildable was part of the design work, not a compromise made after it.
- A drop cadence. New collections land regularly, so anything built has to absorb the next one without being rebuilt.
- Merchandising has a legitimate commercial claim on the most valuable slots in the navigation, so decisions about them are negotiated rather than designed in isolation.
The problem
- A large share of customers arrive having just watched a hundred influencers discuss a named collection — or having seen a new colourway land.
- Nothing in the menu led the eye. It signalled neither what was new, what was selling, nor where to start — at a brand where a new collection or colourway is the entire marketing event.
- The gap was the third way people actually arrive: chasing a colourway, with no route to one until they had landed on a listing page and opened the filters.
BEFORE — MOBILE MENU
How I approached it
- 1
Quantitative first
Heatmaps and session recordings in Microsoft Clarity, to see how the existing navigation and filters were actually being used before proposing anything. The finding that mattered: customers were reaching for the colour filter specifically.
- 2
Read the customer against the marketing
DFYNE customers are deeply invested in the colour palette — new colour drops and returning retired colours are core marketing events, not merchandising detail. Combined with collection-led influencer drops, that pointed at a menu organised around how people arrive rather than how the catalogue is filed.
- 3
In-house testing with non-users
Sessions with people from HR, Warehouse and Finance — deliberately colleagues who do not use the website day to day, so the navigation had to work without insider knowledge of the range names.
- 4
Scoped to what Shopify could actually ship
Working knowledge of the Liquid back end meant designs were scoped to what was buildable and briefed to developers in their own terms. I project-managed the feature from conception into production.
What I inherited
The structure was already sound. The problem was that the menu looked identical whether a collection had just dropped or nothing had changed in months.
The menu I picked up already separated Shop by Category from Shop by Collection, and labelled both. That was the right call and I kept it — the research I ran later backed it, and rebuilding a working structure to put my name on it would have been vanity rather than design.
What it lacked was any acknowledgement of the drop. Four quick links, two labelled columns, white space where the right-hand half of the panel is now — a plain list of names, the same on every visit. Nothing said what was new, what was selling, or where to start, at a brand where a new collection or colourway is the entire marketing event.
And there was no colour anywhere in the navigation, on either breakpoint. A customer chasing a colourway — a large group, at a brand that markets colour drops — had to land on a listing page and open the filter panel before they could act on the thing that brought them.
BEFORE — DESKTOP MENU
Before & after
The old menu was a competent list. The new one is a response to how customers actually arrive — and the parts that already worked were kept rather than rebuilt.
Before
- Category and collection already split — the part worth keeping
- A plain text panel: no imagery, nothing signalling what was new or selling
- No colour anywhere in the navigation, on either breakpoint
- Colour reachable only after landing on a listing page and opening the filter panel
- No route for a customer who arrived knowing nothing
After
- Category and collection split retained, and validated by the research I ran
- Two editorial tiles per menu, so the menu leads the eye at the current drop instead of presenting a flat list
- Three labelled doors matching how customers arrive: garment, collection, colour
- Colour promoted out of the filter panel into the navigation, turning a two-step journey into one
- Explore Womens / Explore Mens into dedicated landing pages, for the customer who arrived knowing none of the above
One menu, three ways in
The menu answers three different questions at once. A customer who wants a garment type uses Shop by Category. A customer who followed a drop uses Shop by Collection. A customer shopping a colourway uses the colour list. Each is labelled, and each lands on a listing page that already reflects the choice.
The category/collection split was already there when I picked this up, and plenty of activewear navigation still blends the two into one list that assumes you know Impact is a range and Shorts is a garment. Research backed the inherited structure — customers shop by garment type, or by collection when they do not yet know what they want — so the job was not to rebuild it. It was to add the door it was missing.
Putting a filter in the navigation
Colour is a listing-page filter, and I moved it into the menu. At DFYNE that is not a small call: new colour drops and the return of retired colours are core marketing events, and customers follow the palette closely. Colour is brand, not just a facet.
Session recordings and heatmaps showed customers reaching for the colour filter specifically — not filters in general. That is a journey costing a step it should not: land on a listing page, open the filter panel, then choose a colour. Promoting colour into the navigation collapses three actions into one.
The six are best sellers. Merchandising wanted the slot used to push colours that were not moving; I argued that a nav slot full of unpopular colours would both look bad and perform badly, and the best-sellers selection held. After launch, use of the colour links rose noticeably.
A fixed skeleton, variable contents
The mens menu carries nine categories and five collections against the womens menu's eleven and nine. The layout does not reflow to absorb the difference — the columns hold their positions and the shorter lists simply end earlier.
Someone who has learned the womens menu can therefore use the mens menu without re-reading it. It also means the menu is driven by data rather than built twice, which is the cheaper of the two things to maintain — and, working in Liquid, the one more likely to survive contact with the next drop.
The three doors survive the small screen
Colour stayed a top-level route on mobile rather than collapsing back into a filter panel — the argument was only worth making if it held at both breakpoints.
A mega menu is a desktop pattern, and the easy version of this story is that the desktop design won and mobile quietly reverted. It did not. On mobile the drawer carries Shop by Category, Shop by Collection and Colour as three peer accordions — the same three doors, at the same level, in the same order.
That matters because the colour decision was the one that took the most arguing for. Promoting it into the navigation on desktop and then dropping it back into the filter panel on mobile would have conceded the point on the breakpoint where most of the traffic is.
What does change is the order of priority. On desktop the editorial tiles sit to the right, at the end of the reading order. On mobile they move to the top, directly under the gender toggle — so the current drop is the first thing in the drawer. For a brand whose customers arrive because an influencer showed them a collection, leading with the drop on the smaller screen is the right trade, and the links are one scroll away rather than gone.
The gender switch becomes a toggle in the drawer header, so moving between womens and mens does not cost a close-and-reopen. The category lists are identical to desktop — eleven and nine, same order — because both breakpoints read the same data rather than being maintained twice.
AFTER — MOBILE DRAWER
The direction that didn't ship
A third top-level item — Collections — where hovering a range told you what it was built for, in the same language the influencer used.
There was a further version, and it is in the prototype above: hover COLLECTIONS in the header to open it. A top-level Collections item holding both womens and mens ranges, where choosing one surfaces that collection's DNA — the in-house term for what the clothing is actually built for.
Hover Defy and it reads *lightweight soft-touch fabric, train without limits* — lightweight, mid-to-high waistband, high-stretch. Hover Impact and both the imagery and the answer change: *ultimate support for your toughest sessions* — supportive, mid-to-low waistband, contour zones. Attributes rather than adjectives, and a different answer per range, so the menu tells you which collection is built for how you actually train.
It reuses the marketing material already made for each collection and already seeded with influencers, so the menu speaks in the language the customer just heard it in. It also adds a *What's for you?* column — Leggings Guide, Shorts Guide, Sports Bra Guide — for the customer who knows the garment but not which range fits how they train.
This is the same insight as the shipped menu, taken to its end. If customers arrive knowing a collection name because an influencer put it there, meeting them with a link is the minimum; meeting them with what the collection *is* closes the loop.
It tested well in-house and was not taken forward at the time. I still think it is the right direction, and it is the first thing I would revisit.
Try it
What it did
- A marked uptick in use of the colour links in the menu — the decision that took the most arguing for is the one customers reached for.
- More visits to the collections surfaced in the menu hero tiles, which is what promoting current drops into the navigation was for.
- These are directional observations rather than instrumented results. I no longer have access to the analytics to quantify them, and I would rather report the direction honestly than attach a number I cannot stand behind.