Athlete Styles

Role: Product / UX Designer — first member of the digital team
Team: Social media, marketing, Shopify developers
Platform: Shopify — homepage, fit sheet and PDP

4M+

Monthly sessions

48%

Of product views focused

Targeting AOV and items

A homepage feature that lets customers shop real athlete fits while giving DFYNE a more natural path into cross-collection discovery and set building.

Decisions

The calls that shaped this, what each one was chosen over, and what it cost.

01
Put the athletes on the homepage, not behind navigation
Instead ofA dedicated shop-the-look page, or an embedded social feed, reached from the menu.
The brand's whole positioning is community — DFYNE wants to sit between gym-goers and the people they look up to. The relationship with an athlete already runs both ways in every other channel: each promotes the other. The website was the one place that did not work like that, and it read as though the social account belonged to a different company. Putting real athlete fits at the front door made the community the first thing a customer meets rather than something filed away behind a menu. It also gave merchandising a route to product a customer would never reach by sifting the catalogue.
CostHomepage space is the most contested real estate in the business. The feature has to keep earning its slot against campaign priorities, which means its performance needs watching rather than assuming.
02
Athlete credit stays on the page
Instead ofRunning the footage unattributed, keeping the homepage entirely self-contained.
The original proposal ran in both directions: DFYNE surfaces the athlete's content, and the athlete's audience finds its way back to DFYNE. Leadership was clear that the homepage should not send traffic off-site, so outbound links were out of scope. I made the case for retaining the handles themselves — visible attribution is what makes the surface read as community rather than advertising, and naming the people the brand works with is worth more to it than the click it might cost. The handles stayed.
CostAttribution without a link gives the athlete exposure but not traffic, which is a weaker incentive to keep supplying strong content. Outbound linking is worth revisiting once the feature has a performance record to argue from.
03
Sell the fit, or any single piece of it
Instead ofThe forced bundle — add the whole outfit as one unit, which is what almost every shop-the-look pattern I audited does.
A bundle collapses the moment reality intervenes. One item is out of stock and the whole look is unbuyable; a customer is an XXS on top and an XS on the bottom and the pattern has no answer. Selling each garment independently, sized on its own, means the fit still works as a suggestion when the customer only wants the leggings.
CostIt is more taps than a single add-everything button, and it gives up the neat merchandising story of the outfit as one purchase.
04
One athlete per post
Instead ofGrouping several athletes or looks into a single homepage post.
The sheet has one job: make it obvious what the customer is looking at and what they can buy from it. One person, one outfit, and every garment in the list belongs to that outfit. Two athletes in a post means two wardrobes in one list, and the customer has to work out which items go together before they can shop any of them.
CostIt constrains the content teams, and the rule lived in the curation guidelines rather than in the build. Combined posts have appeared since launch — the lesson being that a constraint the interface depends on is safer enforced by the interface.

What I was working inside

The feature was proposed as a two-way partnership — DFYNE surfaces the athlete's content, the athlete's audience comes back to DFYNE. Keeping customers on-site was the higher commercial priority, so the outbound half was deferred and what shipped is the DFYNE-facing side of it.
The social and marketing teams would own the content day to day and had no framework for deciding what belonged on a homepage. I wrote that framework with them — what makes a post simple, current and shoppable — because a feature this dependent on curation degrades quietly when the people filling it are working without a brief.
I handed the surface over at launch, and curation has drifted from the guidelines since. A fair reminder that the rules an interface relies on are safer built into it than written alongside it.

The problem

DFYNE's positioning is community — the brand wants to sit between gym-goers and the athletes they look up to. Every channel worked that way except the website, which read as though the social account belonged to a different company.
The athletes were already doing the discovery and the persuading on social, and the site gave a customer no way to act on it. There was no route to shop what a specific athlete was wearing, and the same few athletes surfaced regardless of who was doing the selling.
Product attention was heavily concentrated: 48% of product views went to Impact alone.
The competitive review found the same failure in nearly every shop-the-look pattern — they force the whole outfit, which collapses the moment stock or sizing differs across items.

How I approached it

Competitive audit

Mapped shop-the-look patterns and identified forced bundle logic as the core failure.

Curation guidelines

Worked closely with the social and marketing teams, who would own the content, and wrote the rules for what makes a post good: simple, fresh, one athlete.

Tested in house, team by team

Walked the working flow round the different teams across the business, refining what held up and what did not before it reached a customer.

Interaction refinement

Iterated on product switching and independent sizing to reduce friction inside the fit modal.

Athletes get a place on the homepage

The athletes were already doing the persuading on social. The website gave a customer no way to act on it.

Athlete Styles / Shop the Look sits on the homepage as a carousel of real athlete footage — gym video rather than studio photography, each clip credited to the athlete's own Instagram handle, each with a Shop the Fit control on it.

The roster is mixed rather than a single demographic: the carousel runs womens and mens athletes side by side, so the surface is the community rather than one audience segment.

HOMEPAGE

Real athlete footage, credited by handle, with Shop the Fit on every clip.

What I changed

Athlete content enters the homepage shopping flow.
Customers can shop items from an athlete fit individually.
Curation broadens athlete representation.
Real fits create cross-collection exposure.

Before & after

The feature closes the gap between social discovery and ecommerce by turning athlete content into a shoppable, flexible buying flow.

Before

Athlete content lived on social, with no route from a look to the products in it
Shop-the-look patterns elsewhere force the whole outfit, sized as one
The same few athletes surfaced on site regardless of who was selling
48% of product views concentrated on a single range

After

Athlete footage sits on the homepage with Shop the Fit on every clip
Every garment is sized and bought independently, and the thumbnails tick off as you go
See full product keeps the PDP one tap away, carrying the athlete's own size across
Curated fits put ranges in front of customers who would not have gone looking for them

Buy the fit, or any part of it

Most shop-the-look patterns make you take the whole outfit. That breaks the moment one item is out of stock or you are a different size on top and bottom.

Opening a fit gives every garment in it, one at a time, each with its own price, rating and size row. Sizing happens per item — XXS on the bra, XS on the jogger — because a customer is rarely one size throughout.

The thumbnail strip along the top doubles as progress: once an item is sized and added it carries a tick with the chosen size, and a Clear all appears. You can see what you have done and what is left without leaving the sheet.

SHOP THE FIT

Each item sized independently. The thumbnails tick off as you go, and the cart fills behind.

The shortcut is never a dead end

See full product sits on every image in the sheet. Taking it lands on the full product page — every colourway, the fit guidance, the *what's my size* help and the reviews — rather than trapping the customer in a reduced view of a garment they are not sure about.

The product page keeps the context: it opens with a Shop Dynamic bar and a wearing S badge on the athlete's own image, so the connection between the look and the garment survives the jump.

INTO THE PDP

The full product page, arrived at from the fit — colourways, fit guidance and the size the athlete is wearing.

When a garment needs more than a size

A quick-buy sheet is easy when every product has one choice to make. The catalogue does not work like that.

Most items need a size and nothing else, and the button reads Select a size until one is picked. Others carry a second parameter — the Impact Flares come in Regular and Long — so the sheet has to ask twice without turning into a form.

The chosen combination is stated back as Regular · L with a clear control beside it, and only then does the button become Add to cart with the price on it. The commitment is never made until every choice the garment needs has actually been made.

MORE PARAMETERS

Size alone for most garments; size plus leg length for the flares — the CTA only commits once the choice is complete.

What it did

Increase average order value and items per transaction through social-led discovery.
Give DFYNE a more diverse and useful community surface on the homepage.
Improve sizing context and browsing paths for customers.
Create a stronger incentive loop around athlete content quality and visibility.