Setlist Media: Designing a Music Publication from Concept to Launch
Design Process
Brand Identity
When I came onto the project, I inherited a Style Guide that defined the visual language: dark backgrounds with teal accents and white typography, PODIUM Soft Variable as the primary typeface, and a logo built to work across contexts.
My job wasn't to create the brand; it was to take that foundation and build something real with it. That meant translating the Style Guide into an actual design system: applying it consistently across page layouts, defining component patterns, and ensuring it translated faithfully into a live WordPress environment. Working from a pre-defined brand also sharpened my ability to design within constraints.
Results
Live publication serving the Fresno and Central Valley music community
A complete, documented design system (Style Guide) used consistently across all pages
A scalable content architecture supporting blog, video, gallery, and collaboration workflows
Gained full proficiency in WordPress + Elementor Pro through hands-on implementation
Received positive feedback from local artists and community members on the site's feel and credibility
165 site sessions and 67 unique visitors in the first 30 days
Blog page achieved a 90.91% engagement rate — the highest of any content page
Reflection
This project pushed me into unfamiliar territory on purpose. I came in as the designer, but I also had to become the developer, the content strategist, and the brand manager, all without prior WordPress experience.
The biggest lesson was learning to hold the design vision firmly while staying flexible on implementation details. Elementor Pro doesn't always give you pixel-perfect control, and I had to make judgment calls about where to compromise and where to push harder. In most cases, getting the hierarchy and spacing right mattered more than matching the Figma file exactly.
I'm also proud of the fact that I built a real system, not just a pretty site. The Style Guide, the taxonomy structure, and the video page templates are all things the team can maintain and grow without starting over. That's the part that feels like genuine product thinking, not just visual design.
If I were to expand this project, I'd prioritize:
User research with defined personas (local artist vs. casual listener vs. promoter)
A dedicated events calendar page with filtering by venue or genre
Deeper use of the existing Google Analytics setup to define content performance benchmarks and inform editorial direction
Overview
Setlist Media is a Fresno-based music publication covering the artists, events, and culture of California's Central Valley. As co-founder and sole product designer, I led the end-to-end design process, from establishing the brand identity and visual design system in Figma to building a fully functional, responsive website on WordPress using Elementor Pro.
The site lives at setlistmedia.com and serves as the editorial and community hub for the local music scene, featuring a blog, video series, photo gallery, and artist collaboration opportunities.
My Role: Co-Founder · Product Designer · Front-End Implementation
Tools: Figma, WordPress, Elementor Pro
Timeline: December 2025 - April 2026
Status: Live
The Challenge
The Central Valley has a rich and active music community, but very little dedicated media coverage. Most artists, promoters, and fans rely on scattered social media posts to find out what's happening locally. Setlist Media was founded to fill that gap, but a publication without a strong design foundation wouldn't earn the credibility the community deserved.
When I joined as a co-founder, the site was a basic Hostinger template. It had no defined visual identity, no content hierarchy, and no design system. The structure didn't reflect the music blog experience the team envisioned, and it wasn't built to scale as content grew.
The core challenge was threefold:
Build a brand identity from loose guidelines that felt authentic to the local music scene
Design a content-forward site architecture that could support multiple content types (editorial, video, gallery)
Implement the design myself in WordPress with no prior Elementor Pro experience
Development
I implemented the entire front end in WordPress using Elementor Pro, a tool I had minimal experience with at the start of this project. Rather than treat this as a limitation, I used it as a structured learning process: building from simple page layouts to dynamic template configurations as my confidence grew.
Key implementation work included:
Building custom page templates in Elementor that matched Figma layouts at both breakpoints
Configuring WordPress taxonomy for blog category filtering
Setting up the video page with three distinct section layouts for each content series
Managing post templates so that new blog and video content automatically inherits the correct design
Iterating on mobile layouts based on real-device testing, adjusting spacing, font sizes, and tap targets throughout
By the end of the project, I was comfortable managing the full WordPress backend, publishing posts, updating layouts, and troubleshooting front-end issues independently.
Understanding audience
Talked with local artists and concert-goers to understand what they wanted from local music media, coverage that felt legitimate, not like a fan blog.
Artists
Promoters
Fans
Competitive analysis
Studied music publications for content hierarchy, navigation patterns, and video integration. Dark-mode aesthetics and strong typography consistently built editorial credibility.
Billboard
Stereogum
New York Times
Existing site audit
The original template had no content hierarchy, inconsistent spacing, and no design system. A fresh start at the system level was the right call.
No AI
No Design System
Template
Couldn't Scale
Research & Discovery
What I learned before designing
Information Architecture
The site needed to support five distinct content areas without feeling cluttered:
Blog — Editorial content with a filter (Reviews, Interviews, Events, Tutorials)
Video — Three series: Mic Check (live performances), Artist IRL (interviews/podcast), Events (coverage)
Gallery — Photo documentation of local shows and events
About Us — Publication story and team
Collaborate — A pathway for artists and partners to work with Setlist
I mapped the IA around two user intents: discovery (browsing what's happening) and depth (digging into a specific artist or event). The blog filter and video category structure were both designed to support those flows without requiring a search bar.
Wireframes & Layout Design
All layouts were designed in Figma, covering both desktop and mobile breakpoints. Key design decisions included:
Leading with editorial content on the homepage to establish credibility on the first impression
Treating the video page as a content hub with clear section breaks between the three series
Designing the blog archive to lead with recent posts, followed by a filterable grid
Keeping mobile layouts content-first, with navigation collapsed and CTAs accessible without scrolling
Before
After
