Gear4music.ie
Sound without compromise — a dark-first redesign of Ireland's largest online music retailer.
Role
Lead UX / UI Designer
Category
Web Redesign
Year
2024–25
Sound without
compro-mise.
A complete visual and UX redesign of Ireland's largest online music retailer — bringing clarity, confidence, and craft to a sprawling 250,000-product catalogue.
250K+
Products catalogued
12
Top-level categories
24
Supported brands
4.8s
Load time on legacy site
Overview
A complete visual and UX redesign of Ireland's largest online music retailer — bringing clarity, confidence, and craft to a sprawling 250,000-product catalogue. I led research, information architecture, visual design, and a working prototype across an 8-week sprint.
The Problem
The legacy site buried its catalogue behind competing banners, sidebar filters, and an unranked search — users abandoned the search step in 38% of sessions. Mobile was just the desktop layout squeezed smaller, with tap targets averaging 28px, well below the accessibility floor, and no consistent brand identity to build trust in a purchase.
A look inside
What Was Broken
The legacy site had a catalogue of problems as large as its product range.
Visual Overload
Banner promotions, sidebar filters, sticky upsells and competing CTAs created cognitive paralysis before a user could locate an instrument category.
Broken Discovery
The search bar returned unranked flat results with no category pre-filtering. Users abandoned the funnel at the search step in 38% of sessions.
Trust Signals Missing
No visible returns policy, brand logos buried in a footer table, and a checkout that felt dated compared to direct-to-consumer competitors like Andertons.
Mobile Parity Gap
The desktop layout was compressed into mobile viewports rather than redesigned. Tap targets averaged 28px — well below the 44px accessibility floor.
Brand Identity Absent
No consistent colour palette, three competing typefaces in the navigation alone, and a logo that differed between header, email, and app icon.
Performance Debt
Unoptimised hero images and third-party scripts pushed page load speed to 4.8 seconds, directly correlating with a 22% bounce rate on product landing pages.
What Users Said
Five rounds of usability testing with 18 participants across skill levels and device types.
“I can never find where to start — there's just too much going on.”
Beginner Guitarist, Age 24
Navigation hierarchy must collapse surface area for new visitors.
“I know exactly what I want but the search always shows me the wrong thing first.”
Professional Sound Engineer, Age 38
Category-first search filtering is critical for expert users.
“Does this company even ship to Ireland? I can't see it anywhere.”
Parent Buying a Gift, Age 44
Trust and localisation signals should appear above the fold.
“The photos look like they were taken in 2009. Makes me doubt the quality.”
Studio Producer, Age 31
Photography quality directly affects perceived product and brand quality.
Design Question
How might we help musicians of all levels discover the right instrument — quickly, confidently, and without friction?
Lo-Fi to Hi-Fi
Four key screens drive the entire purchase journey. Each was tested at low fidelity before visual design began.
Homepage
Auto-advancing hero, category grid, product rails, brand grid, footer
Browse Categories
Search Overlay
Full-screen with category browse, drill-down subcategory, then product grid
Product Detail
Hero image, price, specs, Add to Basket, delivery/returns trust strip
Slide Menu
Utility links — Support, Company, Legal — slide in from the left
Nav Reduced To 4 Icons
Logo, Search, Basket, Menu. Eliminated exposed category mega-nav which competed with hero content and confused mobile users.
Search = Discovery
Redesigned search as a browse-first experience: show 8 illustrated category tiles first, drill to subcategories, then products. Reduces dead-end searches.
Zero-Chrome Basket
Cart state lives in an animated badge only. No sidebar drawer — fewer UI layers, less cognitive load. Confirmation via toast.
The Palette
Dark-first. Every color chosen for contrast, warmth, and clear semantic role.
Obsidian
#0D0D0D
Page Background
Charcoal Surface
#161616
Card / Panel
Raised Surface
#1E1E1E
Secondary Surface
Burnt Sienna
#C8561A
Primary / Brand
Warm Amber
#D4962A
Accent
Warm White
#F0EFEA
Foreground
Subdued
#8A8A82
Muted Foreground
Hairline
#1F1F1F
Border
Contrast Ratios — WCAG AA
Aa 16.5:1
Warm White on Obsidian
PASSAa 4.6:1
Burnt Sienna on Obsidian
PASSAa 5.8:1
Warm Amber on Obsidian
PASSAa 14.1:1
Warm White on Card
PASSAa 4.7:1
Subdued on Obsidian
PASSAa 4.5:1
White on Burnt Sienna
PASSType Hierarchy
Three families with one purpose each. No redundancy, no decoration.
Big Shoulders Display
STRATOCASTER
Figtree
Free UK & Ireland delivery
DM Mono
NEW · €1,299.00
Building Blocks
12 core components covering every interaction state in the purchase journey.
Primary Button
Ghost Button
Product Card
Sale Badge
Cart Badge
Search Overlay
Slide Menu
Hero Carousel
Category Tile
Brand Logo Grid
Toast Notification
Stat Counter
Live Demos
Buttons
Product Card
Fender
Fender Stratocaster
Yamaha
Yamaha P-145B
Roland
Roland TD-17KV
Shure
Shure SM7B
Badges & States
Toast Notification
Added to Basket
Fender Stratocaster · €1,299
The Finished Site
Real, exported screens from the finished build, running end to end rather than sitting still.
Homepage
Hero, featured-brand strip, New Arrivals, On Sale, trust banner, and footer — the full scroll, looping.
Category — Electric Guitars
24 products with Sale, Best Seller, and New badges — pricing shown the same way on every single card.
Checkout, Made Honest
The old checkout kept the true cost a secret until the very last screen — shipping and fees showed up as a surprise right before payment. The rebuild keeps a running order summary — subtotal, delivery, total — visible on every single step, next to a clear 4-step progress bar. Nothing hidden, nothing sprung on you at the till.
01 — Basket
Subtotal, delivery, and total — visible immediately
02 — Contact
Step 1 of 4
03 — Address
Step 2 of 4
04 — Delivery
Step 3 of 4 — every option's cost shown upfront
05 — Payment
Step 4 of 4 — total restated before paying
06 — Confirmation
Processing → Dispatching → Delivered
01 — Basket
Subtotal, delivery, and total — visible immediately
02 — Contact
Step 1 of 4
03 — Address
Step 2 of 4
04 — Delivery
Step 3 of 4 — every option's cost shown upfront
05 — Payment
Step 4 of 4 — total restated before paying
06 — Confirmation
Processing → Dispatching → Delivered
The Shopping Journey
From browsing to basket, every screen carries the same pricing, badges, and CTA pattern — so trust builds quietly the whole way through, not just at checkout.
01 / 04
Browse
The “Own the Night” campaign hero leads with a full-bleed pro-audio shot, one clear CTA, and a scrolling brand strip underneath.
What Changed
Projected improvements based on industry benchmarks and usability testing outcomes.
Before · Legacy Site
After · Redesign
Dark-First
Lower eye strain in studio and stage environments where musicians actually shop.
Search = Browse
The search overlay functions as the primary navigation tool, not a keyword box.
Signal Over Noise
Every element earns its place. Promotional clutter replaced by confident hierarchy.
Craft at Scroll
Micro-animations and hover states reward attention without distracting from the product.
Reflection
Music deserves a storefront that takes it seriously.
The gear4music redesign isn't about aesthetics for aesthetics' sake. It's about giving musicians a digital experience as considered as the instruments they're looking for. Every decision — from the condensed display typeface to the full-screen search — traces back to a real user need uncovered in research.
The dark canvas isn't a trend choice. It's a practical one: professional music environments are low-light, and a screen that doesn't fight the room keeps the focus where it belongs — on the gear.
Outcome
A projected page load speed drop from 4.8s to under 1.2s, mobile tap-target compliance up from 42% to 100%, and a usability task-completion rate that rose from 61% to 94% — all backed by a documented 12-component design system.
