Kit Builder – Visual Customiser for Sportswear

Background

A leading provider of custom football kits and sports garments for league teams and schools sought to modernize their ordering process. Traditionally, their clients relied on paper forms and complicated colour swatches to specify kit designs—a system that was cumbersome and uninspiring. The client wanted to elevate their online presence with an interactive kit builder, allowing customers to visually customize their kits directly on the website. With only studio photographs of uncoloured garments available, I was tasked with transforming these into the heart of an engaging digital experience.

Client Goals

The project’s objectives were clear and ambitious:

• Visual Accuracy: Provide consumers with an exact visual representation of their custom kits before ordering.
• Branded Customizer UI: Ensure the customization tool aligns with the company’s visual identity.
• Competitive Advantage: Offer a more interactive and engaging experience than competitors.
• Scalability: Integrate over 200 products into the customisation system.
• Repeatable Workflow: Develop a process to efficiently convert studio photos into customisable garment templates.

Approach & Implemented Solutions

1. Layered PNG System for Customisation

To accurately reflect each customer’s design choices, I created a system using overlaid PNG files. Each file represented a separate part or colour zone of the garment, allowing users to mix and match colours and patterns seamlessly. This method delivered high-fidelity visual results and smooth real-time updates as users interacted with the customiser.

2. Photo Isolation and Recolouring Process

Given that the original product images were uncoloured studio photographs, I developed a repeatable workflow to isolate, extract, and prepare garment elements for recolouring and layering. This ensured each customisable area of the garment—sleeves, collars, panels, etc.—could be recoloured independently, supporting virtually limitless design combinations across all products.

3. Branded, User-Friendly Interface

The customiser interface was designed to fully reflect the company’s brand identity, using consistent colours, typography, and visual cues. The result is a professional and inviting experience that encourages creativity and instills confidence in customers.

4. Scalable, Automated Output for Production

The backend system automates the generation of production-ready specifications from each custom kit design. This guarantees that orders move smoothly from design to manufacturing, with clear and precise output files that minimize errors and speed up fulfillment.

Results

• Superior Customer Experience: The visual customiser transformed the kit ordering process, making it interactive, intuitive, and enjoyable for both league teams and school customers.
• Strong Competitive Edge: The engaging online experience has set the client apart in a crowded market, reinforcing their reputation for innovation.
• Efficient Internal Workflow: The scalable and replicable photo preparation process enabled rapid expansion of the customiser to include over 200 distinct products.
• Reliable Production Output: Automated and clear specifications ensure that bespoke designs translate accurately into finished garments.

Summary:
By combining image layering technology, a robust and branded UI, and automated production workflows, I delivered a next-generation kit builder that brings the client’s products to life online—empowering customers to create and order custom kits with unprecedented clarity and ease.