Dreamville Records x Daily Paper

I was responsible for both UX and UI design for a limited-edition capsule site created for the collaboration between a global fashion brand and a renowned U.S. record label. The project aimed to create a dedicated storytelling-driven experience to support a capsule collection rooted in culture, music, and fashion.To deliver a high-performance, design-forward experience free from legacy limitations, we used Shopify Hydrogen in a headless architecture. This gave me full control over layout, interactions, and performance tuning — enabling a site that merged editorial storytelling with seamless commerce.

Type

UX Design, Strategy

Platform

Figma, Shopify

Industry

Music (Hip-Hop), Fashion

Programming Language

Liquid, Hydrogen

Date

09.2021

Scroll pictures to see more -->

Objectives

This was Daily Paper’s first stand-alone website dedicated to a collection. The client needed more than a product grid - they needed a brand experience that could:
Build anticipation through early-access sign-up and countdown UX
Communicate the cultural inspiration behind the collection
Drive traffic into three regional stores (US, UK, Worldwide) at launch
Sell through fast without compromising visual storytelling
My role included:
Structuring user journeys pre- and post-launch
Designing all screens, content modules, and component systems
Creating an adaptable design system that honored both brand identities
Collaborating with the development team to ensure feasibility and speed in Hydrogen

Research & UX Planning

I approached the UX design through targeted, behavior-based research:
Reviewed past capsule drops and product launches to understand user flow
Evaluated landing pages from peer campaigns across fashion/music collabs
Identified optimal scroll lengths, form structures, and CTAs for mobile lead generation
Defined mobile-first interaction models using Figma prototyping
Using Hydrogen’s flexibility, I mapped out a two-phase UX structure:
Pre-launch: Early-access form, teaser content, launch countdown
Post-launch: Instant store routing, campaign content, and seamless shop access

Experience Design Strategy

To support both the marketing goals and user needs, I structured the site around three UX pillars:

1. Conversion Through Anticipation (Early-access sign-up flow for mobile and desktop users):

Autofocus logic, one-field-first design, and real-time feedback
A clear confirmation state with messaging tied to launch countdown
Integrated hand-off for marketing automation

2. Scroll-Based Storytelling (a visual rhythm that guided users through the story of the collection):

Large-format campaign imagery
Text layering to add narrative context
A layout system that built curiosity with scroll pacing, microinteractions, and vertical stacking logic

3. Smooth Post-Launch Transition:

Utilising the dailypaperclothing.com built and tested webshop for smooth purchasing
I implemented visual CTAs linked to products, not just editorial banners
The design allowed for real-time product availability without page reloads — critical during high-volume drops

Visual Language & UI System

As the UI designer, I created a visual identity that harmonized both Daily Paper and Dreamville branding. My design direction was influenced by:
Music editorial layouts
Bold, brutalist grids used in fashion media
Typographic balance between headline energy and product clarity
UI Highlights:
Modular layout system built in Figma for reusability
Responsive design for seamless mobile → desktop scaling
Subtle motion cues (e.g., fade-ins, scroll triggers) to add polish without performance drag
Accessibility-informed color and contrast handling for CTA visibility

Headless + Hydrogen

Hydrogen’s React-based environment allowed the dev team and I to push UX beyond traditional Shopify constraints:
We structured content to load dynamically without interrupting flow
Visual transitions remained fast, smooth, and intuitive across all devices
Because I worked directly with the team implementing Hydrogen, I was able to fine-tune interaction logic during QA to ensure launch-day performance held up under load

Results & Performance

Although I wasn’t involved in analytics or ad strategy, I was informed of strong results tied to the UX and UI structure I delivered:
2,500+ early-access signups before launch
70%+ sell-through rate of all products
A high number of returning visitors across US, UK, and Worldwide stores
Positive user feedback on page speed, clarity, and storytelling
Creation of a new campaign site model adopted by the brand for future collaborations

Reflection

This project required fast, coordinated decision-making and deep ownership of the user experience from both functional and visual sides. Designing in a headless environment gave me the flexibility to craft a flow-first site, while shaping a layout system that communicated identity and urgency at once.

What I learned:
Hydrogen opens up UX potential Shopify’s old templating limitations no longer define experience quality.
Story-led commerce requires restraint. I learned where to slow the scroll and where to push action.
Visual design and UX are inseparable in capsule launches. I used UI to build emotion and clarity in equal measure.
Performance is a design concern. Everything from image resolution to interaction delay was evaluated through a UX lens.