Role

Product Designer

Industry

Ecommerce

Client

Andertons

Date & Duration

2025 | 3 months

Research, UX redesign & component library

Andertons is one of the most recognized music retailers in the UK, with a strong reputation among professionals and hobbyists. Their e-commerce site, however, had grown organically over the years and started showing limitations: it was optimized for experts who already knew what they wanted, but was intimidating for beginners exploring music for the first time.

The project was driven by a clear business need: to modernize the online experience, attract new audiences, and remain competitive in a market where players set a very high bar.

Andertons New Landing Page
Andertons New Landing Page
Andertons New Landing Page

The Challenge

We identified three key challenges:

  1. Complex navigation: The mega-menu and product categories were overwhelming, with technical terms that alienated beginners.

  2. Lack of guidance: Users had little contextual help, making it difficult to discover products or compare options.

  3. Tight deadlines: The client expected significant progress in a short timeline and had high expectations for both strategy and execution.

One stakeholder said clearly: “We’re great at talking to experts, but we lose people who are just starting.”


Business impact
Improving navigation and beginner-friendly flows was critical to increase product discovery and conversion rate, while reducing cart abandonment. By clarifying the shopping journey, the redesign aimed to directly influence revenue per session and customer acquisition.

The Process

1. Discovery & Research

  • Conducted stakeholder interviews with the CEO, Marketing Manager, and E-commerce Manager to align on vision and pain points.

  • Performed a heuristic audit of the current site, mapping frictions across key flows.

  • Benchmarked competitors and inspiration sources outside the music industry to see how storytelling and guidance could improve.

  • Defined three archetypes that became central to our design decisions.

2. Information Architecture & Design

  • Redesigned the sitemap, focusing on clarity and guided paths for beginners while preserving depth for advanced users.

  • Created wireframes for the main pages, embedding entry points for discovery and education.

  • Built a basic component library in Figma, ensuring consistency and speeding up collaboration with developers.

3. Collaboration

  • Ran weekly working sessions with stakeholders to review progress and adjust priorities quickly.

  • Balanced quick wins (low-effort, high-impact changes) with longer-term structural improvements.

User Flow and Benchmarking
User Flow and Benchmarking
User Flow and Benchmarking

Results

  • Delivered +10 core templates validated with stakeholders.

  • Established the first component library of 60+ elements, accelerating design cycles by 30%.

  • Research revealed 3 key archetypes, which became part of the company’s internal strategy discussions.

  • Stakeholder alignment was achieved in under 6 weeks, despite high expectations and short timelines.

While metrics will come with full implementation, the project has already created a shared vision and tangible design assets that positioned Andertons for the next phase.

New Interface Design: AI Quizz
New Interface Design: AI Quizz
New Interface Design: AI Quizz
New Guide Page
New Guide Page
New Guide Page
New Category Page Mobile
New Category Page Mobile
New Category Page Mobile
New Category Page Mobile
New Category Page Mobile
New Category Page Mobile
New Category Page Desktop
New Category Page Desktop
New Category Page Desktop

Learnings

  • Time pressure forces prioritization: Choosing the most impactful templates and components was key to delivering value within the deadlines.

  • Language matters: Adapting tone and navigation to different levels of expertise is just as critical as visual design.

  • Stakeholder alignment is a design outcome: Clear deliverables and facilitated discussions were as valuable as the wireframes themselves.

  • The image featured in the carousel #1
  • The image featured in the carousel #2
  • The image featured in the carousel #3
  • The image featured in the carousel #4
  • The image featured in the carousel #1
  • The image featured in the carousel #2
  • The image featured in the carousel #3
  • The image featured in the carousel #4
  • The image featured in the carousel #1
  • The image featured in the carousel #2
  • The image featured in the carousel #3
  • The image featured in the carousel #4