Wix Musician Template

UX/UI · 2018

My first project as a product designer at Wix: the full specification and design of a one-page template for musicians, anchored by a complete music player. The template shipped to Wix's gallery, the starting point for a community of 200+ million users.

Role
Product designer: specification, UX, and visual design
Timeline
2018 · first project at Wix
Platform
Web · Wix template gallery
Headline
Shipped to the gallery serving 200M+ Wix users
Context & problem

The brief

For most Wix users, a template is the product: it must look professional pre-filled, and survive being re-skinned by people with no design training. The target user was an independent artist-producer who needs one page to do two jobs: sell music and brand the artist. The brief used Travis Scott as the reference, a young hip-hop and electronic musician known for his own beats.

What I owned

I owned the project end-to-end: defining the specification (the sections, the behaviours, the player's full interaction model) and designing the template itself. The one-pager covers navigation, shop links, the music player, video, tour dates, bio and gallery, booking and contact, and mailing-list signup.

The key interaction: a player that sells

Interaction model

The music player carried the template's two goals at once: listening and selling. I specified the complete interaction model: track info and album art, full transport controls, a four-track list, share actions per track and per album, buy actions per track and per album, and a lyrics pop-up. The player collapses between two views, showing or hiding the album cover and track list, so it works both as a hero element and as a compact companion.

Visual system

Visually, I committed to a single saturated electric blue with oversized condensed typography: a system bold enough to brand an artist before any customization, and structurally simple enough to survive whatever a musician throws at it. Designing a template means designing for someone else's content; the demo content is the argument, the structure is the product.

Specifications
Wix Musician Template specification Wix Musician Template specification Wix Musician Template specification Wix Musician Template specification Wix Musician Template specification
Demo
Wix Musician Template demo
← Back Next →