Omar M. Hammouda

Case study 07 of 10 · Brand site · Independent concept project

W*nder

A CBD brand site that teaches before it sells.

2 min read

W*nder case study cover
Role
Sole UX/UI designer, end to end
Type
Independent concept project
Year
2020
Platform
Responsive web
Scope
Competitor analysis, flows, design system, hi-fi UI, usability scenarios
Industry
CBD wellness beverages
Authorship

W*nder is a real CBD sparkling beverage brand, and this is an unsolicited concept study with no affiliation, commission, or endorsement. The brand identity and product belong to their owners, while the competitor research, flows, screens, and design system on this page are entirely my own exploration and nothing here was adopted or shipped.

The hard part

Selling a product some visitors still associate with a stigma, where every screen has to earn trust before it can ask for a purchase.

Look for

How lab-test transparency is treated as a first-class navigation destination, not a compliance footnote.

You cannot sell CBD to someone who does not trust it

For a first-time CBD buyer, the real barrier is not price or flavor, it is doubt, so the site has to educate and prove safety before it pitches. W*nder is a sparkling CBD beverage brand built around transparency, with every batch tested by an independent lab. The site's job was to turn that testing into something a hesitant visitor can actually find, read, and believe.

  • Lab results on competitor sites are buried or missing, so shoppers cannot verify what they are drinking.
  • New users lack basic education on what CBD is, what it does, and whether it is safe.
  • Lingering cannabis stigma means conventional weed-adjacent branding actively undermines credibility.

Desk research compared Charlotte's Web, Medterra, and Joy Organics on lab-result transparency, educational depth, and navigation clarity to locate the gaps W*nder could own.

Proof, then education, then the sale

The homepage and lab-results page run the same sequence: a warm, un-cannabis identity up front, evidence in the middle, and after the hero's Drink Up button, calls to action that mostly route to education or proof rather than straight to the cart.

W*nder homepage hero with four brightly colored CBD cans floating around the headline Works like a w*nder and a Drink Up button.
The hero leads with the four cans and a plain-language promise. Drink Up is the only CTA, so the first read stays uncluttered.
Trust section with the headline Trust us, it works, circular badges for CBD content, zero THC, and purity, and a See the Proof button.
Dosage and purity sit in circled callouts beside a See the Proof CTA, turning the trust claim into a link a skeptic can follow.
Educational section with the phrase We know CBD stacked in four typographic styles next to the question But what exactly is it and a Get to Know CBD button.
Repeating We know CBD in four type treatments sets up the beginner's question and routes it to the education page, not the shop.
Brand mission section titled The 420 Rule with copy about reinvesting profits in affected communities and a green cannabis leaf inside a thin circle.
The 420 Rule gives the brand a social mission tied to cannabis prohibition, with a restrained leaf mark that avoids weed-culture cliches.
Lab results page hero on a burnt orange background with outlined type asking Is your CBD legitimate and safe and the subhead It's the wild west in CBD.
The lab-results page opens by naming the industry's problem, the wild west of CBD, so publishing every batch reads as the answer.
Four W*nder can variants in orange, yellow, green, and navy, each with a View Test link underneath.
Every variant carries its own View Test link, so proof is per product, one click from the can, not a generic quality page.

The test I designed but did not run

Find the lab resultsLearn what CBD isCheck what a batch is tested forPick a variant for your needBuy with confidence

A moderated walkthrough of these five tasks could establish whether a hesitant first-time buyer can reach the lab results, understand what a batch is tested for, and arrive at a purchase without help. It could not establish whether the design converts doubt into trust in the product itself, and because no sessions were held, both questions remain open.

This chapter documents a usability test plan for a concept, not a record of sessions: no participants were recruited, and nothing on this page is validated by real usage.

Appendix: foundations and system

The system underneath the pages: a palette built to feel calm rather than clinical, and the grid that keeps educational content readable.

Color sheet showing the Squid's Ink primary and three secondary ramps, Blue Metallic, Bronze Satin, and Viridis, each in eight tonal steps with hex values, plus neutrals.
Blue Metallic, Bronze Satin, and Viridis ramps in eight steps each give the warm-but-credible range every section draws from.
Grid system spec for a 1440px desktop layout showing 12 pink columns with labeled margin, column, and gutter widths.
A 12-column desktop grid with generous margins keeps long educational copy from sprawling edge to edge.

All case studies

Next storyMorgan & Morgan →