tl;dr
A mobile-first, one-page site for Pacemaker Audio — designed to build trust, showcase proof, and make booking effortless.
Overview
Pacemaker Audio is a recording studio and guitar tech service rooted in the hardcore/DIY scene. While its offline reputation was strong, its online presence lagged behind. Musicians relied on Instagram DMs and word-of-mouth, making bookings slow and unclear. My goal was to design a responsive site that reflected Pacemaker’s identity and simplified booking.
Problem
Competitors used outdated sites and clunky booking flows. Musicians needed clarity, proof, and speed—but existing options buried key info and made booking frustrating.
solution
I designed a responsive, one-page website with sticky quicklinks that:
Clearly separates recording vs guitar services
Highlights proof (gear, credits, testimonials)
Streamlines booking into <2 minutes on mobile
Matches Pacemaker’s gritty, authentic identity
Project Type
Mobile-First Responsive Website
Role
UX/UI Designer, UX/UI Researcher, Interaction Designer, and Brand Designer
Timeline
3 weeks
Tools
Figma, FigJam, Optimal, ChatGpt, Fatham, Calendy, Zoom, and Google Workspace
To design a site that truly serves Pacemaker’s community, I looked outward at the local competition and inward at the voices of the musicians themselves. The goal was to understand what builds trust online — and what stops people from hitting “book.”
How Other Recording Studios + Guitar Repair Shops Show Up
I reviewed four local studio and guitar service sites to see how they present themselves. While each had strengths, most fell short where it mattered most: mobile-friendliness, service clarity, and quick booking.
Positives: Strong local reputation
Negatives: No mobile-friendly site
Positives: Clear gear list
Negatives: No online booking tools
Positives: Scene credibility
Negatives: Vague service descriptions
Positives: Transparent pricing
Negatives: Outdated design & poor UX
Key takeaway: Musicians are left to piece things together — Instagram here, email chains there — instead of getting what they need in one place.
User Interviews
6 participants
30-45 min each
Mix of DIY artists + scene veterans
I asked local musicians how they discover studios and techs, what makes them trust a service, and what frustrates them about booking. Their answers highlighted the tension between authenticity and ease of use.
What was said….
“I always check Instagram first — the website has to prove it’s real.”
“If I can’t see the gear list or hear past projects, I won’t book.”
“Booking online should be fast. I don’t want to wait a week for an email back.”
When I clustered interview insights, four themes emerged:
Discovery starts at word of mouth and/or on Instagram— but the website has to back it up.
Booking should be quick and mobile-first — no endless forms or slow email threads.
Trust comes from proof — gear lists, credits, and real audio/video samples.
Vibe matters — musicians want to feel the space aligns with their scene.
Trust + Transparency + Speed = Confidence
Both competitor research and musician interviews showed the same gap: artists want a website that feels authentic to the scene, shows proof up front, and makes booking easy from any device.
Show Proof
Gear, credits, and samples visible at a glance
Trancparency
Clear services, optional pricing context
Make it Fast
Streamlined, mobile-friendly booking
Keep It Real
Tone and design that reflect the hardcore/DIY community
After gathering insights from local musicians and competitor sites, I translated those findings into a problem statement, project goals, and perspectives that reflected Pacemaker’s role in the hardcore and DIY scene.
Defining the Problem
Musicians in the hardcore and DIY community need recording and guitar services they can trust — with clear info and quick ways to book. Most competitors rely on outdated sites or social media, leaving artists guessing about gear, pricing, or availability. Pacemaker needed a responsive website that shows credibility up front and makes booking as seamless as hitting “record.”
Project Goals
Musician Goals
See services clearly (recording, guitar setup, repairs)
Build trust through transparent info and past work
Book sessions quickly on mobile without waiting for emails
Get a sense of the studio’s vibe before committing
Pacemaker Audio Goals
Showcase credibility in the hardcore/DIY scene
Streamline booking to capture more clients
Differentiate with a polished, mobile-first experience
Present both studio and guitar services without confusion
From Research to Definition
IThe competitor review showed musicians hitting dead ends: clunky booking forms, vague services, or sites that hadn’t been updated in years. Interviews reinforced that trust comes from transparency — gear lists, past work, and an authentic tone. These insights shaped the design opportunity: create a site that is both a practical booking tool and proof of Pacemaker’s credibility.
Personas
POV Statements
Alex needs a mobile-friendly way to book recording and guitar services because most local options feel outdated and untrustworthy.
Jordan needs to see proof of gear and past projects because credibility is non-negotiable in the hardcore scene..
The Bridge to Ideation
With the problem clarified and goals aligned, I began exploring solutions: mapping out the site structure, prioritizing features, and sketching flows that would make Pacemaker’s site feel fast, credible, and true to the scene.
With a clear understanding of our users and goals, I moved into design. This stage was about balancing practicality with authenticity: building a responsive site that simplifies booking, proves Pacemaker’s credibility, and still feels rooted in the hardcore/DIY music scene.
What Matters Most
Using the MoSCoW method, I prioritized features based on user needs, business goals, and what would set Pacemaker apart.
MUST HAVE
Mobile-first booking form
Clear service breakdown (studio + guitar)
Gear list and past projects (audio/video proof)
About section with scene credibility
SHOULD HAVE
Integrated calendar for availability
Testimonials from past clients
Guitar tech service request form
COULD HAVE
Bundled recording + guitar packages
Blog for recording tips and project highlights
WON'T HAVE (for now)
Social community/forum features
E-commerce gear shop
Structuring the Site
The sitemap defined how services, booking, and proof of credibility would connect seamlessly.
Core areas:
Home (studio vibe + trust cues)
Services (recording + guitar)
Gear & Projects (proof)
Booking (fast, mobile-first form)
About (scene story + credibility)
Why a One-Page Scroll?
Research showed most Pacemaker clients book on mobile, so a single-page layout kept everything fast, clear, and true to the way musicians browse:
Mobile-first: One scroll, fewer taps, faster to booking.
Trust at a glance: Services, proof, and rates flow in one narrative.
Sticky quicklinks: Anchor nav + “Book Now” CTA always visible.
Low cognitive load: Users never lose context, just jump to what they need.
Scalable: Can grow into multi-page if content expands.
Key Journeys
I mapped the primary actions musicians would take:
Book a Recording Session – From services → select time → booking form → confirmation
Request Guitar Setup/Repair – From services → select guitar option → request form → confirmation
Check Gear & Projects – From home/services → browse proof of gear + recordings
Sketching the Experience
I started with wireframes to test layouts, hierarchy, and flow on both mobile and desktop.
Mobile Focus
One-tap booking CTA
Simplified menus (hamburger navigation)
Prioritized gear/project proof for small screens
Desktop Focus
Expanded service breakdowns
More space for testimonials and visuals
Booking CTA persistent but not overwhelming
Capturing the Vibe
Before moving to hi-fi, I established a brand direction that reflected Pacemaker’s personality: gritty but approachable, rooted in the hardcore scene but clean enough for new clients.
Elements:
Dark, moody palette with contrast accents
Bold sans-serif typography for headers, clean body text for readability
Photography of real gear and sessions, not stock images
Logo/mark that plays into audio + movement
Form Meets Function
With branding in place, I refined designs into hi-fi mockups for mobile and desktop.
Mobile Highlights
Booking flow in <3 taps
Sticky CTA for quick action
Compact proof section with swipable visuals
Desktop Highlights
Expanded hero sections with gear + service highlights
Visible navigation for quick scanning
Space for credibility cues (testimonials, credits, past work)
Refining Before Launch
Early feedback on wireframes and mockups surfaced small but important tweaks:
Larger tap targets for booking on mobile
Clearer labels on guitar service forms
Simplified navigation (merged gear + projects into one “Proof” section)
These refinements made the experience both faster and more trustworthy.
From Design to Validation
With a polished visual system and high-fidelity prototype, I was ready to validate Pacemaker’s site through usability testing — ensuring it worked as seamlessly for musicians as it did on paper.
Since research showed that most Pacemaker clients discover and book on mobile, testing focused on the mobile-first prototype. The goal: validate clarity of services, trust signals, and booking speed.
Objectives
See if users understand the dual-service model (Recording Studio vs Guitar Tech).
Test whether trust cues (bio, testimonials, gear list, samples) build confidence.
Evaluate clarity of past work galleries.
Confirm users can book or request a quote with ease.
5 participants | 30–40 min sessions | Ages 18–45
Moderated, remote think-aloud sessions with task flows:
Identify services
Assess credibility
View Gear
& Past Work
Book a session or request tech work
What was Found
Pricing Info Buried
Testers wanted a quick “Starting at $X/hr” snapshot.
Trust Builders Landed
Gear list + audio boosted confidence; but users wanted more social proof (testimonials/FAQ).
Dual Services Blurred
Recording vs Guitar Tech wasn’t visually distinct.
Mobile-First Issues
Tap targets were too small; some CTAs hard to reach.
One-Page Flow Smooth, But Blurry
Scroll felt natural, but sections needed clearer labels, contrast, and microcopy.
Design Changes Implemented
Surface pricing: Added “Starting at $X/hr” cards + linked rates PDF.
Visually separate services: Color-coded sections: 🎛 Recording Studio (dark) vs 🔧 Guitar Tech (light).
Mobile improvements: Enlarged tap targets to ≥44px; sticky footer with “Book Now.”
Trust upgrades: Added testimonial slider + FAQ accordion.
Visual clarity: Improved contrast, relabeled “Services” → “Studio vs Tech,” and tightened nav microcopy.
Suscess metrics
Task Completion: 100% of core flows completed (5/5 Users Completed)
Ease-of-Use Rating: 4.6/5 average
Booking Flow Time: <2 minutes f
Trust Rating: 4.5/5 — boosted by gear list, samples, and testimonials
From Testing to Impact
Focusing on mobile validated the most important flows: fast booking and proof-driven trust. Small adjustments made the experience even smoother, setting the stage for measuring outcomes and planning future opportunities.
Testing confirmed the mobile-first site delivered speed, trust, and clarity — while also surfacing small but powerful refinements.
Final responsive designs — mobile-first, with desktop support.
100% Task Completion
<2 Min Booking Flow
4.6/5 Ease of Use
Design reflects Pacemaker’s hardcore/DIY roots.
TONE IS UX
gritty, authentic content matched the brand voice
PROOF BUILDS TUST
gear, past work, and testimonials anchored credibility
MOBILE-FIRST WORKS
single-scroll design simplified discovery & booking
FUTURE OPPORTUNITIES
Short-Term:
Expand testimonials & FAQ, improve guitar tech gallery with before/after repairs, and continue refining microcopy
Long-Term:
Real-time booking calendar, bundled recording + guitar packages, lightweight e-commerce
Pacemaker already had credibility. The site finally matched it.
