GrooveLab
FX
A cinematic platform built for
serious music producers
GrooveLab FX is a professional audio plugin platform — a subscription-based SaaS product offering a curated library of VST, AU, and AAX plugins for music producers, sound designers, and audio engineers. Targeting working professionals who spend thousands of hours in their DAWs, the product needed to feel premium, trustworthy, and unmistakably designed for its audience.
I was brought in to own the project from zero: no brand, no visual language, no frontend. Starting with nothing but a product brief and a feature list, I designed the full brand identity in Figma — logo system, color palette, typography, and component library — then built the entire public-facing frontend in HTML, CSS, and vanilla JavaScript.
The core creative challenge was translating what audio professionals feel in their sessions into a visual experience. Studio darkness. Precision controls. The teal glow of a hardware compressor at 2am. Every design decision was grounded in the aesthetics of real production environments — and every UI component built to match the engineering precision the audience demands from their tools.
The problem with audio software UX
"Most audio plugin websites look like they were built in 2009 — dark, cluttered, and impossible to navigate. GrooveLab needed to prove it was different before anyone clicked a single button."
The audio plugin market is crowded and technically dense. Competing products lead with spec sheets and forum screenshots. The real opportunity was to build a site that felt as carefully engineered as the plugins themselves — precise, immersive, and confidence-inspiring to someone about to invest in professional-grade tools. We had one shot at a first impression with an audience that is notoriously hard to impress.
Professional Credibility
Audio engineers are sceptical buyers. Every design choice needed to signal precision and craft — not generic SaaS templates or marketing fluff.
Dark UI Without Muddiness
A dark aesthetic is table stakes for music software. Executing it with clear hierarchy, contrast ratios, and accessibility is where most sites fail.
Complex Features, Clear Story
The plugin library has 200+ products with deep technical feature sets. The UX needed to make discovery feel effortless, not overwhelming.
Mobile-Ready for a Desktop Audience
Producers browse on phones but buy on desktops. Both contexts needed to convert — with zero compromise to either experience.
Brand to browser — built from scratch
Brand Identity System
A complete visual language for GrooveLab FX — designed to feel like premium audio hardware, not a generic SaaS dashboard. Every element grounded in the aesthetics of serious studio environments.
- Logo design: wordmark + monogram icon system
- Color palette: deep charcoal backgrounds, teal accent (#64FFDA), warm amber highlight
- Typography system: Poppins display, Inter body, Fira Code mono
- Iconography set for plugin categories and control types
- Brand guidelines document for ongoing team consistency
- Figma component library with 60+ reusable UI components
Marketing Website
The conversion-focused public site — designed to acquire new users, explain the product value, and turn curious visitors into paying subscribers. Built in pure HTML/CSS/JS for maximum performance and control.
- Hero section with animated waveform visualizer and plugin preview
- Plugin library browser with live category filter UI
- Pricing section with plan comparison table
- Producer testimonials with photo and genre context
- GSAP ScrollTrigger animations throughout
- Fully responsive: 320px mobile to 2560px ultrawide
Plugin Catalog & Product Pages
Individual product pages for each plugin — built to showcase audio quality through visual design alone, since potential buyers can't audition before subscribing. Each page needed to close the sale independently.
- Plugin UI preview with annotated feature callouts
- Technical spec panel: format, OS, and DAW compatibility
- Audio demo player UI with waveform visualizer
- Related plugins carousel for cross-sell
- One-click trial signup embedded per product
- Star ratings and producer reviews with genre context
Onboarding Flow
A multi-step onboarding experience that collects genre preferences, primary DAW, and use case — then surfaces a personalised plugin collection on first visit. Designed to reduce time-to-value and increase trial-to-paid conversion.
- 3-step wizard with animated progress indicator
- Genre and DAW preference cards with selection states
- Personalised "Your Starter Pack" reveal screen
- Trial countdown banner with clear upgrade path
- Empty state designs for library and history sections
- Responsive subscription management dashboard shell
Designed in Figma, built by hand
Discovery to launch
Discovery & Competitive Audit
I started by immersing myself in the audio plugin market — analysing how established players like Native Instruments, Splice, and Output present their products. I ran five moderated interviews with working producers to understand their plugin buying habits and frustrations. The consistent findings: they distrust over-designed sites, they buy on sound quality and specs, and they judge credibility within seconds. This research defined every design constraint that followed, and became the foundation for the information architecture and brand positioning.
Brand Identity & Visual Direction
Before any UI work began, I established the full visual language. The name GrooveLab suggested two things: the warmth of vinyl and the precision of a laboratory. The resulting identity balances those poles — deep near-black backgrounds (#0D1117) with the cool precision of teal (#64FFDA) as the primary accent, and warm amber as a secondary highlight. The logo system was designed to work at every scale from browser favicon to trade show banner. All assets were built into a Figma component library before a single line of code was written — ensuring pixel-perfect design-to-build fidelity throughout.
UX Architecture & Wireframing
With brand locked, I mapped the full site architecture — six core page types, 24 unique templates, and an onboarding flow. Wireframes prioritised the plugin catalog: how do you browse 200+ plugins without friction? The solution was a sticky filter rail with category, format (VST/AU/AAX), and DAW compatibility toggles — letting producers drill to relevant results in two taps without a full page reload. Every wireframe went through a focused internal feedback loop before moving to high-fidelity design.
High-Fidelity Design & User Testing
High-fidelity design in Figma ran in parallel with an interactive prototype used for two rounds of user testing. Five producers tested each round — primary task: find a reverb plugin for trap production and start a trial. Key findings drove two major iterations: filter labels needed audio-native terminology rather than generic e-commerce language, and the trial CTA needed to appear much earlier on product pages. Both changes were validated before build began, saving significant rework downstream.
Frontend Development
I built the entire frontend in semantic HTML, custom CSS, and vanilla JavaScript — no framework overhead, no build tooling complexity that would slow down handoff. CSS custom properties handled the full design token system: every color, radius, shadow, and spacing value defined once and used everywhere. GSAP ScrollTrigger powered the scroll animations — waveform reveals, card entrances, and counter animations on the results section. The waveform visualizer on plugin pages used the Web Audio API to render live frequency data from demo audio tracks, giving the site an authentic connection to its subject matter.
Accessibility Audit & Launch
Pre-launch QA covered cross-browser testing (Chrome, Firefox, Safari, Edge), device testing from 320px to 2560px wide, and a full WCAG 2.1 AA accessibility audit. The dark palette required particular care — every text/background combination was verified against contrast requirements, and several secondary text colours were adjusted as a result. Core Web Vitals were profiled and optimised: images lazy-loaded, fonts preloaded, and animations disabled via prefers-reduced-motion for users who need it. The site launched on schedule with a Lighthouse performance score of 94.
UI highlights from the final design
Each screen was designed to feel like studio hardware — dark, precise, and purpose-built for professionals. Here's a look at four key interfaces from the finished product.
The plugin catalog browser with real-time category filter pills and a dense grid card layout. Producers can filter by effect type, plugin format, and DAW compatibility without a page reload — reducing discovery friction to under two interactions.
The plugin detail page features a waveform-based audio demo player, hardware-style annotated controls, and a prominent trial CTA — everything a producer needs to make a confident purchase decision without leaving the page.
Step two of the 3-step onboarding wizard: genre preference selection. Selected states use the teal accent as clear visual confirmation. All choices feed into the personalised "Starter Pack" collection revealed on step three — reducing time-to-value for new subscribers.
The pricing section uses a side-by-side plan comparison with the recommended tier highlighted using the teal accent. The "Popular" badge anchors attention without aggressive pressure — validated in user testing as the highest-converting layout variant.
Shipped, measured, validated
Post-launch metrics tracked over the first 90 days confirmed that the design decisions grounded in user research translated directly into measurable improvements in conversion and engagement.