// CASE STUDY — CLIENT WEBSITE
A one-scroll artist website for electronic music producer and DJ NJEM — built to land bookings, showcase original productions, and serve as a complete digital EPK for promoters and venue owners.
View Live Site View Figma File
// 01 — The Brief
NJEM is an electronic music producer and DJ rooted in the underground — crafting dark, hypnotic soundscapes across techno, deep house, and experimental electronics. His first full EP, Proposed Utopia, had just dropped. But all bookings were still coming through Instagram DMs, and there was no single place for promoters to hear the sound, learn about the artist, and reach out professionally.
// A promoter should be able to land on the site, hear the sound, understand the artist, and send a booking inquiry — without leaving the page or opening a second tab.
// 02 — Research
Research started with a direct client interview — understanding NJEM's goals, his audience, and how he wanted to be perceived by bookers and promoters. From there, I surveyed fans and frequent club-goers to map what information they actually look for when discovering a new artist. Finally, a competitor analysis of established electronic artist sites (Four Tet, Peggy Gou, Objekt) surfaced consistent patterns: the strongest sites lead with audio, keep scrolling linear, and make the booking action impossible to miss.
// 03 — Design Approach
The visual direction was driven entirely by the music — dark and immersive, with a single electric blue accent cutting through black. A fullscreen video hero drops the user directly into NJEM's world on load. The glitch animation on the title reinforces the underground electronic aesthetic without relying on clichéd neon overload.
Every section of the one-scroll layout was sequenced to mirror how a promoter actually evaluates an artist: hear the music first, then learn who they are, then see the press and accolades, then book. The layout is the UX decision.
// 04 — Figma Design File
The full design system lives in Figma — wireframes, component library, hi-fi mockups, and responsive layout specs. The file documents every decision from initial layout exploration through final implementation.
// Loading design file...
// 05 — What I Built
Every component was hand-coded in vanilla HTML, CSS, and JavaScript. No frameworks, no templates — each feature built specifically for how an artist's audience and bookers interact with the content.
// Feature
Fullscreen Video Hero
// Feature
Custom Audio Player
// Feature
Glitch Title Animation
// Feature
Booking Form
// Feature
Digital EPK Section
// Feature
Responsive Mobile Layout
The custom audio player was the most technically demanding component — built without any library, handling play/pause state, track scrubbing, and volume control while maintaining sync with the visual design. Research through launch shipped in 5 weeks.
// 06 — Outcome & Reflection
NJEM was my first live client project — and that changes everything. The stakes are different when a real artist's professional reputation is attached to what you ship. Design decisions that would be theoretical on a personal project become concrete: the booking form has to actually work, the audio player can't glitch on mobile, the hero video can't tank load performance.
The biggest takeaway was how much information architecture matters for conversion. The original brief asked for "a site." What the client actually needed was a tool that turns a skeptical promoter into a confident booker — and that required thinking about the page as a sequential argument, not a collection of sections.