Mosswood Cycles

·

Direct-to-consumer bikes

Website

A bike shop that loads before the rider gives up

A bike shop that loads before the rider gives up

Mosswood’s product pages took four seconds to load on a phone and hid the size guide. I redesigned them and rebuilt the store’s front end.

Mosswood’s product pages took four seconds to load on a phone and hid the size guide. I redesigned them and rebuilt the store’s front end.

Year

2025

Role

Design and headless front end

Duration

12 weeks

A Mosswood product page on a phone: the Ridgeline GR gravel bike at $1,995, with the rider’s size, M, shown right beside the price
A Mosswood product page on a phone: the Ridgeline GR gravel bike at $1,995, with the rider’s size, M, shown right beside the price
A Mosswood product page on a phone: the Ridgeline GR gravel bike at $1,995, with the rider’s size, M, shown right beside the price

01 · The brief

What they asked for

What they asked for

Our bikes cost $2,000. People research for weeks on their phones, and our product pages are slow and bury the size guide.

Constraints

  • Keep Shopify for orders and inventory

  • Launch before the spring season, 12 weeks out

  • Use the existing photo library, no new shoot

A spreadsheet of support chats sorted by topic, with “Which size?” highlighted as the largest group
A spreadsheet of support chats sorted by topic, with “Which size?” highlighted as the largest group
A spreadsheet of support chats sorted by topic, with “Which size?” highlighted as the largest group
A printed mobile wireframe of a bike product page, marked up in purple: the 14-photo carousel crossed out for ‘one photo, then the specs’, and the size guide circled with an arrow moving it next to the price, because fit is 41% of chats.
A printed mobile wireframe of a bike product page, marked up in purple: the 14-photo carousel crossed out for ‘one photo, then the specs’, and the size guide circled with an arrow moving it next to the price, because fit is 41% of chats.
A printed mobile wireframe of a bike product page, marked up in purple: the 14-photo carousel crossed out for ‘one photo, then the specs’, and the size guide circled with an arrow moving it next to the price, because fit is 41% of chats.

02 · Design

What I decided, and why

01

Put the size guide next to the price.

Fit was the first question in 41% of support chats.

02

One photo, then the specs.

The 14-image carousel was the heaviest part of the page and the least used.

03

Compare two bikes side by side.

Riders kept two tabs open. Now they don’t have to.

03 · Build

How it was built

How it was built

Stack

Next.js, TypeScript, Shopify Storefront API, Vercel

What the team kept

Their developer owns the repo. Products and stock stay in Shopify, so the shop team has nothing new to learn.

Two phones side by side comparing the old and new product page loading, the new one finished first
Two phones side by side comparing the old and new product page loading, the new one finished first
Two phones side by side comparing the old and new product page loading, the new one finished first

04 · Result

What changed

+24%

checkout starts from product pages, first 60 days vs. the previous 60

1.2 s

Largest Contentful Paint on a mid-range phone, down from 4.1 s

−38%

fit questions in support chat, first quarter

Visit the live site

The site finally feels like the bikes: quick, and nothing extra.

Tomás Reyes

Founder, Mosswood Cycles

The site finally feels like the bikes: quick, and nothing extra.

Tomás Reyes

Founder, Mosswood Cycles

The site finally feels like the bikes: quick, and nothing extra.

Tomás Reyes

Founder, Mosswood Cycles

Next project

One system for four museum products

Ambry

·

2025

Open project

A column of Ambry interface components in muted museum tones: a record card for a glazed bowl, filter chips, a search field with a toggle, and buttons
A column of Ambry interface components in muted museum tones: a record card for a glazed bowl, filter chips, a search field with a toggle, and buttons
A column of Ambry interface components in muted museum tones: a record card for a glazed bowl, filter chips, a search field with a toggle, and buttons

Contact

Have a project with a date on it?

Tell me what you’re building and when it needs to ship. I’ll reply with whether I can help, and how.

A new email to hello@rhealind.com asking to talk about a project with a June launch, beside a March 2027 calendar whose first week is highlighted as 'Booking from', and a tag reading 'Replies within 1 business day'.

hello@rhealind.com

Email me

Booking from March 2027

Replies within 1 business day

Pacific Time

Contact

Have a project with a date on it?

Tell me what you’re building and when it needs to ship. I’ll reply with whether I can help, and how.

A new email to hello@rhealind.com asking to talk about a project with a June launch, beside a March 2027 calendar whose first week is highlighted as 'Booking from', and a tag reading 'Replies within 1 business day'.

hello@rhealind.com

Email me

Booking from March 2027

Replies within 1 business day

Pacific Time

Contact

Have a project with a date on it?

Tell me what you’re building and when it needs to ship. I’ll reply with whether I can help, and how.

A new email to hello@rhealind.com asking to talk about a project with a June launch, beside a March 2027 calendar whose first week is highlighted as 'Booking from', and a tag reading 'Replies within 1 business day'.

hello@rhealind.com

Email me

Booking from March 2027

Replies within 1 business day

Pacific Time

Remix FREE

Create a free website with Framer, the website builder loved by startups, designers and agencies.