Webolizma
Product
E-Commerce
Skills
UI/UX Design
My Role
Digital Product Designer
Date
Dec 8, 2024
Team
Kerem T.
About the Project
TS Club is the official store of Trabzonspor, offering a wide range of jerseys, licensed collections, and lifestyle products for fans. The goal of this project was to bring Trabzonspor’s strong identity into a modern e-commerce experience, strengthen the emotional bond between fans and the club, and optimize the online shopping journey—especially for the club’s top-selling items: season jerseys and player jerseys.
My Role
We worked collaboratively as a design team and managed the entire user experience and interface design process end-to-end. From mapping user journeys and simplifying information architecture to redesigning the homepage modules, category layouts, and product cards, we shaped every UX and UI decision together. We also crafted the UX flows for the custom “Design Your Jersey” module, optimized listing and product detail pages for mobile, and built a visual language that reflects Trabzonspor’s iconic claret-blue identity while maintaining a clean, modern, and conversion-driven atmosphere.
Problem Statement
Key issues identified in the previous design:
Navigation was confusing and lacked a clear category structure.
New season and player jerseys—top-selling items—were not highlighted effectively.
Filters on listing pages were hidden and underused.
Product detail pages had visual clutter and unclear variant/price hierarchy.
Mobile experience lacked clarity, especially in navigation and customization flows.
Research
We analyzed fan shopping behavior, sports team merch platforms, jersey customization patterns, and mobile purchase decisions.
Key Findings:
Fans want immediate access to jerseys from the hero section.
Clear collection separation speeds up product discovery.
Visible filters increase time spent browsing.
Mobile users prefer step-by-step flows for customization.
Emotional visuals boost engagement for season collections.
Solution Approach
A fan-focused, mobile-first, clean design system built around fast browsing and jersey customization.
Detailed Solutions:
Homepage rebuilt with strong season visuals and modular product blocks.
Mega menu redesigned with clear category segmentation.
New season & player jerseys placed in priority areas.
Always-visible filters added to listing pages.
Product detail page reorganized into simple blocks (price, variants, delivery).
“Design Your Jersey” flow rebuilt as a mobile step-by-step experience.
UI redesigned using Trabzonspor’s colors and modern visual hierarchy.
Our Design Principles
Our design principles were built upon a balanced approach that merges the emotional identity of Trabzonspor with the functional demands of a modern e-commerce system. We crafted a visual language that carries fan passion into the digital space while maintaining a clean and intuitive interface. Clear hierarchy and structured categories were introduced to accelerate product discovery, while mobile-first decisions ensured quick access, large touch targets, single-hand usability, and step-based customization flows.
Users can reach any category in under 1 second.
The previous menu structure was cluttered on both desktop and mobile. Categories lacked clarity, making it difficult for users to know where to start.
Solution:
We completely redesigned the navigation into a clean, category-based megamenu.
Collections (retro, winter collection, first team products, etc.) were visually separated with clear labels and iconography.
The mobile menu was rebuilt with large touch-friendly areas and a layered structure, significantly improving navigation speed.
Season jerseys are the top-selling items, yet the previous website lacked a personalized jersey configuration flow.
Solution:
We introduced a mobile-optimized step-by-step “Design Your Jersey” module where users can:
Select jersey type (home / away / alternative)
Select size
Add name, number, or signature
Complete the process with one hand on mobile
The old detail pages had long descriptions, inconsistent hierarchy, and cluttered variant selectors.
Solution:
We modernized the product detail experience by introducing:
Large and clean image galleries
Minimalist variant selectors
Clear price and promotion blocks
Card-based information sections
A “Similar Products” recommendation module
This project highlighted how essential clear category hierarchy, mobile-first flows, and custom modules for high-value products are in sports merchandising platforms.
The redesigned TS Club experience is now faster, cleaner, and more modern across all devices. Mobile shopping flows improved significantly, category discovery became easier, and the step-by-step jersey customization strengthened both engagement and sales potential. The new information architecture increased user retention and helped establish a more consistent conversion-focused environment.
