UltimateEars.com

e-commerce web experience
Client
Ultimate Ears
Role
Design Lead (Visual design + UX)
Project type
B2C e-commerce and brand experience
Release date
2018

The Ultimate Ears website redesign project transformed the brand's digital presence into an engaging, conversion-focused e-commerce platform that embodied their bold, irreverent identity. As the lead designer I reimagined the entire user experience to showcase their iconic speakers while creating an intuitive shopping journey.

This content has been optimized for larger screens, please view this page on desktop for best experience.
Project Overview

The Challenge:

Ultimate Ears had established itself as a leader in portable audio products with distinctive, nearly indestructible speakers and a vibrant brand personality but its digital presence wasn't effectively communicating this unique positioning or optimizing the customer journey.

The Goal:

  • Translate the brand's irreverent, lifestyle-focused identity into a cohesive digital experience
  • Implement bold typography and photography that matches the refreshed brand direction
  • Improve the product discovery and comparison process
  • Develop a responsive, modular platform that delivered a best in class e-commerce experience across all devices

Research & Insights

We conducted extensive research to understand the target audience's lifestyle aspirations and how Ultimate Ears products fit into their world. This included competitive analysis, user interviews and reviewing analytics data from the existing site to identify pain points and opportunities for improvement. Here are some of the key research findings:
  • 73% of customers valued durability and water resistance as key decision factors when purchasing portable speakers
  • The existing website failed to effectively communicate the distinctive sound quality that set Ultimate Ears apart from competitors
  • Mobile users spent 40% less time on the site compared to desktop users indicating a suboptimal mobile experience
  • Users struggled to understand product differences when comparing multiple speaker models
  • Lifestyle imagery resonated more strongly with target demographics than technical specifications alone
  • Social proof and user-generated content significantly influenced purchase decisions
To ground our design decisions we identified two core personas representing distinct customer segments.
The Urban Adventurer
A socially active professional who prioritizes experiences over possessions. Values products that keep up with their spontaneous lifestyle (emphasizing durability and style equally). They shop primarily on mobile and are heavily influenced by authentic lifestyle imagery and peer recommendations.
The Discerning Enthusiast
A music lover with disposable income who appreciates quality sound and thoughtful design. Jordan researches extensively before purchasing comparing specifications and reading reviews. They value brands with personality but require clear information about performance and compatibility.
Competitive Analysis
We conducted a thorough assessment of competing audio brands to identify market gaps and differentiation opportunities for Ultimate Ears. By examining how competitors communicated their value propositions and structured their e-commerce experiences we gained valuable insights that shaped our strategic approach:
  • Most competitors emphasized technical specifications over lifestyle benefits creating an opportunity for more emotionally resonant messaging
  • Competitor product comparison tools were often complex and specification-heavy intimidating casual shoppers
  • Mobile experiences across competitor sites were consistently weaker than desktop experiences
  • User-generated content was underutilized across the competitive landscape, despite its proven influence on purchase decisions
  • Few competitors effectively communicated how their products integrated into consumers' active lifestyles

    Design Process

    Ideation & Wireframing
    We began by mapping comprehensive user flows and customer journey maps identifying critical touch-points and potential friction areas throughout the purchasing process. These journey maps highlighted key opportunities to inject brand personality while maintaining usability. Next, we developed low-fidelity wireframes to establish clear information hierarchies / navigation patterns and testing these structures with users before moving to visual design. Wireframes focused on creating intuitive paths to purchase while ensuring product features and lifestyle benefits received appropriate emphasis at each stage of the journey.
    UI & Interaction Design
    With validated wireframes as a foundation I created a vibrant visual design system that captured Ultimate Ears' bold brand identity while maintaining e-commerce best practices. The system included:
    • Oversized, bold typography as a central brand expression element creating immediate visual impact
    • Dramatic, lifestyle-focused photography showcasing the speakers in dynamic, real-world environments
    • High-contrast color schemes reflecting the product line's distinctive aesthetic
    • Visuals emphasizing the durability and iconic design characteristics of the speakers
    • Interactive elements that communicated product features in engaging ways
    • Consistent UI components that created a cohesive experience throughout the journey
    Testing & Iterations
    The design underwent multiple rounds of usability testing and iteration. I collaborated closely with development teams to ensure the implementation maintained design integrity while optimizing for performance, particularly focusing on preserving the impact of the bold typography and photography across all device sizes.

    Impact & Results

    • 40% increase in conversion rate compared to the previous site
    • 28% reduction in cart abandonment
    • 18% increase in average order value
    • 35% improvement in mobile engagement metrics
    • Enhanced brand perception and stronger visual recognition of Ultimate Ears' iconic and durable product design measured through post-purchase surveys

    Product detail page (PDP)

    Megaboom (Desktop)
    Megaboom (Mobile)
    Megablast (Desktop)
    Blast, full template (Desktop)
    Boom 3 (Desktop)
    Roll 2 (Desktop)

    Homepage

    Desktop
    Mobile