← Back
Client Amapiano Groove
Role UI & Visual Design Lead
Year 2025

Amapiano Groove: Audio-Driven UI and Visual Metaphors.

1. Concept & The Creative Spark

Amapiano is a genre defined by heavy log-drum basslines, airy synth layers, and polyrhythmic percussion originating in South Africa. Conventional streaming interfaces treat music as static metadata, a song title, an artist name, and a linear timeline scrubber. This concept set out to redesign the streaming playback experience around audio kinetics: making the music's structural density visible, tactile, and interactive.

Role: Sole Product & Visual Designer (Self-initiated concept). Scope: Concept exploration, interactive prototype, audio visualisation system, and complete motion spec.

Design hypothesis: If the visual rhythm of the UI matches the rhythmic signature of Amapiano's log drum pattern, the interface becomes culturally resonant rather than generically digital.

2. The Paradigm Shift

Standard music app UI treats audio as content inside a container. Spotify shows you a cover art tile. Apple Music gives you a waveform scrubber. Neither approach makes audio the primary navigation surface.

"The waveform isn't a playback indicator. It's the menu."

Audio nodes, interactive SVG circles whose radius and opacity mapped to the frequency spectrum of the track, replaced traditional track lists. Tapping a node entered a full-screen waveform canvas. The UI generated in real-time from the audio's harmonic fingerprint.

3. Systems Architecture

The interaction system was built around three types of visual data derived from audio frequency analysis:

  • Low-frequency (bass/log drum): drove node radius, larger nodes surfaced bass-heavy tracks.
  • Mid-frequency (piano): drove node cluster position, melodically similar tracks grouped spatially.
  • High-frequency (hi-hats): drove ambient particle opacity behind each node cluster.
3 Frequency layers
24fps UI animation target
16 Prototype screens

Component Architecture

All node components were built in Figma with interactive properties controlling size, opacity, and colour temperature (warmer tones = higher energy tracks). Each node component used a shared frequency-mapping variable that could be overridden per track type during production handoff.

Amapiano Audio UI wave components and node clusters

4. Outcomes & Metrics

Concept prototype tested with 8 Amapiano listeners across Johannesburg and London:

  • 7 of 8 participants described the interface as "something I haven't seen before", a primary success criterion for novelty.
  • Average exploration time per session was 4.8 minutes, 2.3× longer than the Spotify benchmark for equivalent track discovery tasks.
  • Cultural resonance rating: 4.6/5 among participants who identified as active Amapiano listeners.
"The closest design reference for this UI was traditional African visual pattern-making, organic, rhythmic, non-hierarchical."