5mins read
Timeline
7 months
2019-2020
My Role
Senior Product
Designer
Conversion Rate
42% increase
Revenue
80% increase
Project Overview
When I joined HEAD in 2019 as their first in-house UX/UI designer, the website was outdated — visually, structurally, and functionally. It lacked UX thinking, had no clear hierarchy, and didn't reflect the brand’s innovation or premium positioning. The shopping experience wasn’t intuitive, the UI felt dated, and there was little to guide users toward conversion.
It was time to build something better — not just a more attractive interface, but a foundation for long-term e-commerce growth.
Team
1 x Senior Product Designer
1 x Digital Designer
1 x Copywriter
1 x IT Manager
External development agency
My Role
As the sole designer, I led the entire redesign from concept to delivery:
Conducted UX research to uncover user pain points and shopping behavior
Collaborated with all sports divisions, the IT team, and a development agency
Worked closely with HEAD’s Chief Creative Officer to align on brand vision
Took ownership of UX strategy, UI design, and interaction patterns
Developed key documentation and communicated directly with developers
Problem
The previous website was not designed with e-commerce performance in mind. It had a B2B-focused structure that didn’t reflect the needs of everyday consumers. The navigation lacked clarity, content hierarchy was inconsistent, and users struggled to find relevant products easily.
Mobile usability was limited, with layouts that didn’t adapt well across breakpoints, leading to friction in the shopping experience. Overall, the site failed to represent the brand’s evolving identity and didn’t support a modern, conversion-driven customer journey.
Process
1. Identifying the UX/UI issues on the website
As a first step, I ran a UX audit across the core pages — homepage, menu, PLPs, PDPs, and checkout — using heuristic analysis, analytics, and internal feedback. Several issues stood out:
Homepage: The layout reused B2B visuals and lacked product visibility above the fold. A carousel with 6–7 banners saw little engagement beyond the first slide, missing the opportunity to guide users.
Navigation/Menu: The menu structure wasn’t user-centric. Categories were grouped by internal logic, making it harder for users to find what they needed — especially on mobile, where spacing and labeling were inconsistent.
Product Listing Pages (PLPs): PLPs lacked filtering and visual clarity. Dense layouts, poor scannability made it hard to browse or compare products effectively.
Product Detail Pages (PDPs): The UI was outdated with inconsistent typography, padding issues, and weak visual hierarchy. Key elements like CTAs and product details didn’t stand out, which reduced focus and clarity.
Checkout: The checkout flow had usability issues — unclear fields, no progress indicators, and missing trust signals — all contributing to friction at a critical point in the journey.
The original homepage followed a catalogue-style layout, with inconsistent visuals across sport categories. Many of the images were repurposed from B2B campaigns and lacked consumer focus — which weakened the overall brand impression. There were no visible products above the fold, missing a key e-commerce best practice: showing users they’ve landed on a shoppable experience from the start.
The homepage also featured 6–7 auto-rotating hero banners, but analytics showed that engagement dropped sharply after the first slide — a common issue with carousels, as users rarely interact with them beyond the first or second frame.
Finally, the footer was incomplete and didn’t stand out clearly from the rest of the page, making it difficult for users to find important links like FAQs, returns, or contact information — all of which are key to building trust and reducing friction in the shopping journey.
To improve clarity and engagement, I replaced the low-performing carousel with a split-banner hero section featuring two static visuals. This allowed more focused messaging and avoided the common issue of users ignoring content beyond the first slide. I also shifted the content approach to a B2C mindset, showcasing timely news and campaign highlights instead of static sport categories — making the homepage feel more relevant and alive.
To reinforce the e-commerce intent, I placed a product widget above the fold, helping users immediately recognize that they were on a shoppable site. I also introduced modular content blocks to support storytelling and promote new collections, athletes, or brand campaigns in a more engaging way.
Finally, I redesigned the footer to improve structure and scanability — grouping links more clearly and increasing contrast. I also gave the newsletter signup more visibility, encouraging user retention and marketing signups.
2. Navigation & Information Architecture
Introduced a user-centered mega menu structure, rethinking the top-level navigation:
Grouped sports into intuitive categories like RacquetSports and WinterSports to reduce cognitive load
Introduced gender-driven categories (Men, Women, Junior) for sportswear—aligned with common user shopping behavior
Focused on task efficiency: Reduced steps to reach PDPs and key category pages
3. User Research & Competitive Benchmarking
4. Wireframing & Prototyping
5. Introducing a Visual System
Created a clear design language for HEAD’s digital presence:
Clean, performance-driven typography
Improved hierarchy and layouts
Consistent spacing, buttons, and interactive elements
Enhanced product visuals and CTAs
A scalable component-based approach to support future growth
Results
Conversion rate increased significantly
Sales nearly doubled compared to the previous year after launch
Internal teams had a more flexible, maintainable design system
Set the UX/UI foundation that supported future redesigns, including the 2025 version
Key takeaways
This project was more than a redesign — it was the beginning of a UX culture at HEAD. It gave us our first component library and website style guides, measurable improvements in performance, and a more brand-aligned digital presence.
It also pushed me to grow beyond design — into research, communication, stakeholder alignment, and cross-functional collaboration.
