Designing an Immersive Catalog for Urge to Dance

Live Demo

1. Project Overview & The Hook

2. The Challenge: Defining the Digital Stage

The electronic music landscape demands an immersive digital identity that goes beyond simple link-in-bios. For founders Maksim and Aron, the challenge was to create a brand hub that honored their core philosophy: “It all begins with an urge. To explore. To create. TO DANCE.”

The pain points to address were:

1. Translational Friction: How to visually capture the moody, energetic, and hypnotic aesthetic of Melodic House and Indie Dance online.
2. Scalability & Maintenance: The site needed to handle rapid catalog growth without requiring constant developer intervention.
3. Discovery vs. Acquisition: Balancing the “Urge to Explore” (time on site) with the need to drive traffic to revenue streams (Bandcamp/Beatport/Spotify).

3. UX Methodology & Strategy

The project followed a user-centered design approach, focused on establishing a strong information architecture for a mobile-first audience.

A. Discovery & Definition

• Competitive Analysis: I analyzed the digital presence of genre leaders (e.g., Anjunadeep‘s clean catalog, Afterlife‘s moody aesthetic) to identify design patterns and feature gaps. The key takeaway was the need for high-impact visuals combined with dead-simple navigation.
• User Persona: “The Digital Digger”
  • Goal: Quickly identify a track heard in a club or on social media and access the full-quality stream or download link.
  • Pain Point: Frustration with slow-loading sites and cluttered menus when using their phone on the go.
  • Implication: Prioritize load speed, massive touch targets, and a linear, mobile-first information architecture.

B. Core UX Principles Applied

4. The Solution: Framer, CMS, and Design System

The final product is a modern, performance-first website where the design is intrinsically linked to the content system.

A. Technical Architecture (Framer CMS)

• Dynamic CMS Implementation: The entire catalog is managed via two dedicated, interconnected Framer CMS Clusters:
  1. Releases Cluster: Stores track titles, cover art, descriptions, and all third-party stream links (Spotify, Beatport, etc.).
  2. Artists Cluster: Stores artist bios, photographs, and social links.

• Scalability via Overrides: Framer’s component overrides were used extensively. The main “Release Card” component is reusable across the Homepage and Catalog. The CMS simply injects the data, ensuring global consistency.
• Benefit: Achieved a true No-Code Content Management handover. The label team can publish a new EP in minutes without ever touching the design canvas.

B. The Design System

5. Impact, Results, & Key Learnings

The project successfully delivered a powerful platform that meets both the aesthetic and functional demands of a growing electronic music label.

Measurable Success (Core KPIs):

We have built this product from the ground up so we have set measurables that we follow:

• Content Velocity:
  • Maintain sub-5-minute publishing workflow per release
  • Release deployment efficiency: <5 minutes per asset

• Engagement:
  • Session duration and page-level dwell time
  • User engagement depth (time-on-site, pages per session)

• Conversion:
  • Bandcamp referral conversion rate (highest-margin platform)
  • Drive Bandcamp traffic (optimal profit margin vs. streaming)

Project Takeaways

The Urge to Dance project reinforced the power of design system thinking. By treating the CMS structure and the visual components as a single ecosystem in Framer, we were able to deliver a robust, future-proof product in a fraction of the time a traditional build would require.