All projects

BEATZY – E-COMMERCE LANDING PAGE

Concept project

A landing page for wireless earbuds that sells the feeling, not the spec sheet.

Client
Self-initiated
Service provided
Landing page – Concept
Duration
1 week
Year
2026
Tools
Figma, Figma Sites
Platform
Web (desktop design, published with Figma Sites)
Visit website
Beatzy – E-commerce landing page: A landing page that sells the feeling, not the spec sheet

BACKGROUND & CONTEXT

  • Audio product pages tend to look the same: white backgrounds, a product on a plinth and a grid of specs.
  • Specs matter, but people buy earbuds for how they feel on a commute, at the gym or at a party.
  • A self-set brief: design a landing page for a Ghanaian earbud brand that feels like the product sounds, without losing the shop.

TARGET USERS

  • Young buyers in Ghana: shopping on a laptop or phone, deciding on style, comfort and price in cedis

  • Gift buyers: deciding which colour and model, and whether reviews can be trusted

THE GOAL

Make a product page feel like the product sounds, while keeping price, choice and checkout one scroll away.

MY PROCESS

  1. Visual direction
  2. Page structure
  3. Components & states
  4. UI
  5. Figma Sites build

KEY DECISIONS

  1. Lead with a feeling: 'Feel the Beat' over an outlined 'Wireless, Limitless.', with the product breaking the type
  2. A bento grid where each card sells one benefit: all-day comfort, noise isolation, the two finishes and the grip stem
  3. One neon gradient (magenta to purple) on a near-black base, used for headings and highlights only
  4. Keep the shop visible: product cards with prices in GHS and an add-to-cart button on each
  5. Reviews that sound local: names, faces and a tro-tro commute, not anonymous stars

THE SOLUTION

  • Hero: oversized display type, the product on a pink plinth, and log-in and sign-up in the navigation.
  • Choose your sound: a five-card bento grid, each card one benefit with its own image.
  • Customer favourites: a carousel of product cards from GHS 180 to GHS 220.
  • Proof and close: testimonials on a magenta band, a giant outlined wordmark and a footer with shop, support and site links.

KEY FEATURES

  1. Editorial hero
  2. Bento benefit grid
  3. Product cards in GHS
  4. Testimonial carousel
  5. Neon gradient system
  6. Hover & active states

DESIGN SYSTEM & ACCESSIBILITY

  • A small component set: navigation, nav buttons and buttons with default, hover and active states, product cards, testimonials and four header variants.
  • Dark base #111 with one gradient, so the loud colour has room to work; gradient headings sit at display size, where they pass contrast.
  • Next round: small white text over the brightest pink areas drops to about 3:1, the outlined hero text is decorative only, and carousels need position dots.
View gallery (8 images)Hide gallery
Beatzy hero: Feel the Beat over outlined Wireless, Limitless, with earbuds on a pink plinth(opens full size in a new tab)
The hero sells a feeling first: the product breaks through the type.
Beatzy page structure in seven sections, from hero to footer(opens full size in a new tab)
Seven sections: feeling first, shop second, proof third.
Bento grid of five benefit cards: all-day comfort, black edition, white edition, noise isolation and grip stem(opens full size in a new tab)
Each card sells one benefit, sized by how much it matters.
Customer favourites carousel with four earbud models priced in GHS(opens full size in a new tab)
The shop never disappears: prices in cedis and an add-to-cart on every card.
Testimonials with three customer photos and reviews on a magenta band(opens full size in a new tab)
Reviews that sound like the people buying.
Beatzy component sheet, labelled: four header variants, the navigation bar, nav buttons and buttons with their states, a product card and a testimonial card(opens full size in a new tab)
Every interactive part has its states designed.
Beatzy colour palette and type(opens full size in a new tab)
One gradient on a dark base: the colour does the shouting so the layout doesn't have to.
Contrast checks for Beatzy's dark base, gradient headings and small text on pink(opens full size in a new tab)
Big type passes; small text on bright pink is the fix.

BY THE NUMBERS

From concept to a live site
1 week
Published with Figma Sites
Live
To add any product to the cart
1 tap

OUTCOME

  • A visual-direction piece that shows range beyond product UI, while staying a working shop page.
  • A component set with interaction states, published as a live site with Figma Sites.
  • A pattern I reuse: let one bold colour do the emotional work and keep the layout calm.

What I learned

Restraint in layout is what lets a loud palette work.

Visit website