Designing a sound shop around listening: brand, site and audio player

Most sound-pack shops look like loud sale pages: fake discounts, generic stock covers and sound lists you can't really listen through. The buyers are film editors, game developers and producers. They need to audition a lot of sounds quickly, and they need to trust the licence before they spend anything.

The mark is a circle holding a waveform, with a gold compass needle pointing north: sound and direction in one shape. I explored about 40 directions before settling on it, among them compasses, needles, topographic lines and a mountain range.

The design system holds the tokens, the type scale, the logos and the component guidelines. I built it from the website code rather than beside it, so what the guidelines describe is what the site runs. The site itself is calm, editorial and dark, designed as ten page types from sketches A to J:

• Home
• Catalogue
• Pack page
• Field notes
• Berlin recording map
• About
• Free sampler
• Licence & FAQ
• Custom sound design
• Mobile

Every sound can be played where it is listed, with a waveform in each row. Hover a waveform to see the time, click it and playback starts exactly there. A sticky player bar keeps playing while you move between pages, so a buyer can keep one sound running while browsing for the next. On a phone it becomes a mini player that opens into a full-screen one.

• Three ways to list sounds — rows, tiles, or one big waveform.
• Keyboard control — Space plays and pauses, the up and down arrows move between sounds, the left and right arrows skip 5 seconds, L loops, M mutes and Esc stops.
• Listening first on the pack page — built around playback, not around the Buy button.

The shop is built but not open, so the live site is a single launch page: a full-screen night photo under a dark-blue tint, one headline, and an email field. The sign-up uses double opt-in through Brevo, hosted in the EU. A custom confirmation email and a “You're on the list” page finish the flow.

The ideas came first: the name, the brand direction and the concept for the site were worked out by hand. Claude then took over the groundwork around them, doing the research and writing quick drafts to react to. Every draft was reviewed, edited or thrown away.

The page and player screens were prototyped quickly in Claude Design. A prototype like that is fast to make and cheap to discard, which made it easy to try layouts for the pages and the audio player before committing to one.