Balancing a Rebellious Punk Brand Identity with Modern Web Usability.
CASE STUDY:
Role: Lead UI Designer & Brand Strategist
Timeline: 3 Weeks
Deliverables: Desktop & Mobile High-Fidelity Prototypes
THE PROBLEM
Trauma Czars is a high-energy punk rock band from Colorado in need of a website. Traditional music websites rely on slick, minimalist templates that completely destroy a punk band's raw, DIY brand authenticity.
The challenge is to design a digital space that feels loud, gritty, and underground, while maintaining flawless e-commerce checkout loops and intuitive navigation.
THE DESIGN:
The visual style uses DIY posters and zines as inspiration. Swapping sterile white spaces for a raw, photocopy paper yellow background and using distressed, stamp-like headers.
Keeping the navigation consistent helps keep the flow of the website simple. Allowing people to navigate the page intuitively.
Using aggressive, decorative display typefaces for major section headings establishes the punk aesthetic.
Design System & Visual Hierarchy
#F1DD4A
Zine Yellow — Mimics cheap, vintage photocopy paper
#000000
Stark Black — Delivers high-contrast graphics and readability
Draconian Typewriter
Inter
THE RESEARCH:
THE AUDIENCE (User Personas):
To balance the band’s raw punk aesthetic with high usability, I conducted a mixed-methods research study. The goal was to understand the mental models of both fans and industry professionals to ensure the design met their distinct needs.
The Underground Gig-Goer (Brenton, 24)
Quote: "I want to support local bands directly and know exactly when the next basement show is."
Pain Point: Sterile, generic web layouts feel fake; social media algorithms hide live gig updates.
The Independent Talent Booker (“Toast”, 38)
Quote: "I need to quickly vet a band’s draw and sound without chasing them across five platforms."
Pain Point: Disorganized bands with hidden email addresses or broken booking links.