WEBSITE DESIGN · HEALTH & SLEEP · DTC · 2024

SnoreBuds

From the client's low-fidelity wireframes and a single designed page to a complete website, with their brand style guide applied consistently across every screen.

SERVES
Snorers + their partners
DURATION
2 months
YIELD
8 pages · desktop & mobile
DIFFICULTY
Medium

A patented anti-snore device from Dr. Kevin Stock, a dentist in sleep medicine, after more than ten years of development. The client arrived with low-fidelity wireframes, a brand style guide and one designed homepage. Everything else still had to be designed, including how to explain a device that works with your own breath.

Results

  • Designed pages — 1 → 8
  • Sections from scratch — Snore Study + how-to
  • Style guide — on every screen
  • Breakpoints — desktop & mobile
  • Site — still live

STEP 01

One page in, a whole site out

The client handed over low-fidelity wireframes and a single designed homepage. I took that page's language, plus their brand style guide, and carried it consistently across every screen: product, instructions, research, healthcare providers and the legal pages, on desktop and mobile.

Visual reference: from one page to eight

STEP 02

Make the wireframe fit the words

Most of the design work was here. The wireframes set the order, but not the room the real copy needed, and the client had a lot to say: seven alternatives to compare, reviews, a doctor's story, a long FAQ.

Each section was reshaped in high fidelity to hold what they wanted to say without losing the structure they'd planned.

Visual reference: wireframe → high fidelity

STEP 03

Draw what can't be seen

SnoreBuds works with your own breath and a small dial, which is hard to picture. So every concept got a visual: a Snore Strength dial you can read in one glance, a simple diagram of how the nasal dilator and EPAP work together, and before/after snore recordings that show the difference instead of claiming it.

Visual reference: dial, diagram & recordings

STEP 04

Build the Snore Study from scratch

There was no wireframe for this one. The Snore Study page presents the product's research and invites customers into it: headline results, how sleep scores change, how to record your own before and after, and the rewards for sharing your data.

It turns "trust us" into something people can read, check and join.

Visual reference: the Snore Study page

STEP 05

Teach it in three steps

Getting used to SnoreBuds can take a few nights, so the instructions got their own page: size, strength, sleep, with video tutorials and the sizing guide close at hand.

Visual reference: instructions page

STEP 06

A door for healthcare providers

Doctors recommend SnoreBuds too, so providers got their own contact page, with doctor reviews and quick routes to email or chat. The legal pages follow the same system, so even the fine print looks like SnoreBuds.

Visual reference: healthcare providers & legal

website designdesign systemUX & architecturehealth & wellnessregulated industryecommerceshopify