4mins read

Redesigning HEAD.com for a modern, premium brand experience

Redesigning HEAD.com for a modern, premium brand experience

Timeline

10 months

2024-25

My Role

Senior/Lead Product

Designer

Conversion Rate

17% increase

Add to Cart Rate

22% increase

Project Overview

A complete redesign of the HEAD.com website to elevate its premium feel and improve the user experience across all devices. The brief was to create a premium, clean, storytelling website that helps users find the right products, reflects the brand’s positioning, and meets modern e-commerce expectations.

Team

1 x Senior Product Designer (Myself)

1 x Product Designer

1 x Digital Designer

1 x Copywriter

1 x IT Manager

External development agency

Problem

In 2020, HEAD’s redesign laid the groundwork for a solid e-commerce experience. But by 2024, the interface was showing its age. What once felt modern now looked dated, and the overall look no longer reflected HEAD’s evolving premium brand image.


The issues became most visible on product pages. While the technical product specs were accurate, they often left beginners confused. Terms like beam, balance, head size or string pattern were presented without context, making it hard for new players to understand what those features meant for their game.


This gap created friction: advanced players could navigate the details, but beginners felt lost. The experience didn’t fully support the brand’s goal of being both elite and approachable.


Our challenge: reimagine the UI to capture the premium feeling of the brand while making product information more accessible, empowering users to choose with confidence.

Process

1. Gathering Insights

At the start of the redesign, I launched a user survey to understand why visitors weren’t converting. One insight stood out: 26% of users said they didn’t know which racquet was right for them—the second most common reason for not purchasing, right after price.


This revealed a broader challenge. While technical specs were available, they lacked context and guidance—especially for beginners. Analytics supported this, showing high exit rates on technical product detail pages and low add-to-cart rates.


Key challenges we addressed:

  • Users lacked confidence in choosing the right product

  • Specs like “beam” or “string pattern” were unclear without explanation

  • Dense, overly technical language overwhelmed entry-level shoppers

  • The experience needed to guide without overwhelming


These insights shaped a clear direction: create a more intuitive, educational, and confidence-building shopping journey—supported by user-friendly spec definitions that clearly communicate outcomes and benefits, while staying true to the premium HEAD brand.

At the start of the redesign, I launched a user survey to understand why visitors weren’t converting. One insight stood out: 26% of users said they didn’t know which racquet was right for them—the second most common reason for not purchasing, right after price.


This revealed a broader challenge. While technical specs were available, they lacked context and guidance—especially for beginners. Analytics supported this, showing high exit rates on technical product detail pages and low add-to-cart rates.


Key challenges we addressed:

  • Users lacked confidence in choosing the right product

  • Specs like “beam” or “string pattern” were unclear without explanation

  • Dense, overly technical language overwhelmed entry-level shoppers

  • The experience needed to guide without overwhelming


These insights shaped a clear direction: create a more intuitive, educational, and confidence-building shopping journey—supported by user-friendly spec definitions that clearly communicate outcomes and benefits, while staying true to the premium HEAD brand.

2. Navigation & Information Architecture

We revisited the site’s menu structure and navigation patterns:


  • Simplified the information architecture to reduce decision fatigue

  • Used user research and analytics to understand high-traffic paths

  • Introduced visual category cards and thumbnails for easier scanning


This helped users scan and find what they needed faster, and supported both exploration and goal-driven shopping.

We revisited the site’s menu structure and navigation patterns:


  • Simplified the information architecture to reduce decision fatigue

  • Used user research and analytics to understand high-traffic paths

  • Introduced visual category cards and thumbnails for easier scanning


This helped users scan and find what they needed faster, and supported both exploration and goal-driven shopping.

3. Content Simplification

Clear Specs, Confident Choices:

We collaborated closely with our copywriter and product experts to translate complex technical specifications into plain, user-friendly language. Each product feature now communicates both the spec (e.g., “300g weight”) and the benefit for the user (e.g., “Lightweight – ideal for fast, controlled swings”), making the decision process more intuitive, especially for beginners.


To support this, we created Bento grids to serve as a structured specification library—an internal alignment tool for both the design and product teams. These grids helped organize key technical features alongside their related user benefits, ensuring clear, consistent communication across all product categories.

Clear Specs, Confident Choices:

We collaborated closely with our copywriter and product experts to translate complex technical specifications into plain, user-friendly language. Each product feature now communicates both the spec (e.g., “300g weight”) and the benefit for the user (e.g., “Lightweight – ideal for fast, controlled swings”), making the decision process more intuitive, especially for beginners.


To support this, we created Bento grids to serve as a structured specification library—an internal alignment tool for both the design and product teams. These grids helped organize key technical features alongside their related user benefits, ensuring clear, consistent communication across all product categories.

4. Wireframing & Prototyping

We began with low-fidelity wireframes to define layout structure and content hierarchy without distraction from visuals. This allowed us to focus on functionality, user flow, and content prioritization.


Once the structure was validated, we transitioned to high-fidelity prototypes that incorporated visual design elements, brand identity, and interaction behavior.


Key focuses during this stage:

  • Prioritized the placement of key content areas for the specification info and designed clear attention paths to support user goals

  • Gathered feedback from stakeholders and iterated the designs to align with business and user needs

  • Ensured fully responsive layouts across all breakpoints, optimizing for desktop, tablet, and mobile

We began with low-fidelity wireframes to define layout structure and content hierarchy without distraction from visuals. This allowed us to focus on functionality, user flow, and content prioritization.


Once the structure was validated, we transitioned to high-fidelity prototypes that incorporated visual design elements, brand identity, and interaction behavior.


Key focuses during this stage:

  • Prioritized the placement of key content areas for the specification info and designed clear attention paths to support user goals

  • Gathered feedback from stakeholders and iterated the designs to align with business and user needs

  • Ensured fully responsive layouts across all breakpoints, optimizing for desktop, tablet, and mobile

5. Design System & Team Enablement

To ensure consistency across pages and streamline collaboration during the redesign, we created a comprehensive design system in Figma — including colors, components, layout rules, and usage guidelines. We also developed a Photoshop template so designers could easily apply the new content dimensions and components, helping maintain visual consistency and improve workflow efficiency.


  • Templates for hero images, feature cards, and highlight sections

  • Clear specs for spacing, imagery, and iconography

  • A centralized source of truth for all teams (internal and external)

To ensure consistency across pages and streamline collaboration during the redesign, we created a comprehensive design system in Figma — including colors, components, layout rules, and usage guidelines. We also developed a Photoshop template so designers could easily apply the new content dimensions and components, helping maintain visual consistency and improve workflow efficiency.


  • Templates for hero images, feature cards, and highlight sections

  • Clear specs for spacing, imagery, and iconography

  • A centralized source of truth for all teams (internal and external)

6. Visual Redesign with Purpose

The updated UI needed to feel premium and editorial, aligning with brand goals:


  • Introduced full-bleed lifestyle hero images with a single clear message

  • Adopted a new, more modern typeface (Inter) to replace Interstate

  • Used whitespace, hierarchy, and simplicity to enhance the overall feel

The updated UI needed to feel premium and editorial, aligning with brand goals:


  • Introduced full-bleed lifestyle hero images with a single clear message

  • Adopted a new, more modern typeface (Inter) to replace Interstate

  • Used whitespace, hierarchy, and simplicity to enhance the overall feel

Updated Product Landing Page

The redesigned Product Detail Page focused on clarity, approachability, and faster decision-making:

  • Quick Facts icons: Introduced at the top to highlight key product attributes like weight, head size, and balance — helping users scan and compare products quickly.

  • Feature cards: Added a visual section summarizing top-level performance and technology outcomes (e.g. "Fast Swings," "Power Boost") to guide less technical users.

  • Specification section: We used beginner-friendly language, explaining what each spec means and why it matters.

  • Improved hierarchy: Refined layout spacing, typography, and CTA visibility for a cleaner, more premium and conversion-focused experience.

7. Checkout Process Improvements

The checkout experience was redesigned to feel cleaner, faster, and less overwhelming — reducing friction at a critical stage in the purchase journey.

  • Clean, distraction‑free UI: Stripped away unnecessary visual clutter to keep users focused on completing their order.

  • Optimised order summary placement: On desktop, the order summary is fixed to the right side for constant visibility; on mobile, it appears at the top so users can review key details before continuing.

  • Fewer input fields: Removed optional fields and unnecessary data requests, aligning with UX best practices to reduce cognitive load and increase completion rates.

  • Clear, guided steps: Introduced a 3‑step process (Address → Shipment Method → Payment) with clear headings, logical grouping, and consistent layout to help users understand where they are and what’s next.

Results

  • 17% increase in conversion rates

  • 22% increase in add to cart rate

  • 15% drop in return rates

  • 17% increase in conversion rates

  • 22% increase in add to cart rate

  • 15% drop in return rates

Key takeaways

  • Don’t wait for permission to lead—own the process

  • Simplicity sells: translating tech specs increases accessibility

  • UI is only as strong as the content and structure behind it

  • Don’t wait for permission to lead—own the process

  • Simplicity sells: translating tech specs increases accessibility

  • UI is only as strong as the content and structure behind it

Next Project

Next Project

UX/UI

Building the HEAD.com Design System

Built a component-based design system in Figma to scale UX consistency and efficiency — including reusable components, layout rules, and guidelines to streamline collaboration across teams.

View Project

UX/UI

Building the HEAD.com Design System

Built a component-based design system in Figma to scale UX consistency and efficiency — including reusable components, layout rules, and guidelines to streamline collaboration across teams.

View Project

UX/UI

Building the HEAD.com Design System

Built a component-based design system in Figma to scale UX consistency and efficiency — including reusable components, layout rules, and guidelines to streamline collaboration across teams.

View Project

Open to new challenges

and opportunities

cavusogluomerr@hotmail.com

LinkedIn

Download my CV

©2025

Open to new challenges

and opportunities

cavusogluomerr@hotmail.com

LinkedIn

Download my CV

©2025

Open to new challenges

and opportunities

cavusogluomerr@hotmail.com

LinkedIn

Download my CV

©2025