Jinga Clothing: Website & Outfit Customiser

Role

Wireframes, UI/UX, Website Design

Created as part of my work at Studio Praktik

Overview

Jinga Clothing is a company that specialises in customised cycling clothing for teams and events.

Jinga commissioned us to create a new eCommerce website and customiser. I'm going to focus on the customiser and the challenges of building it.

Challenges

Make a useful customiser for non-designers and teams that don't want to hire a designer but want to create a unique and stylish uniform.
Enable users to apply their design in a variety of clothing items.

Customiser

Overview

A large part of Jinga Clothing's services is custom-made cycling outfits.

The process of customising an outfit today is sending an email to the manager asking to make a custom outfit. Most customers will have to design the outfit themselves or pick from several designs and wait to get a mockup.

We wanted to speed up the process and enable users who wish to create a customised outfit for their team — but don't want to design a unique outfit from scratch.

Website — Customiser Page

Rider Type Selection

Cyclists have different clothes for different types of riders. For example, a pro cyclist needs different outfits and quality from a small club of cyclists who ride for fun.

I wanted the experience to fit the customer upfront — so I designed a rider type screen with a brief explanation for every type.

Customiser — Rider Type Selection

Colour Selection

The customer can pick from a selection of predetermined colours or create a colour palette of his own.

Customiser — Colour Selection

Pattern Selection

As this is the simple customiser, we wanted to make a variety of patterns that can provide casual users with fashionable choices.

The colours fit the pattern immediately and let the user visualise what his design will look.

Customiser — Pattern Selection

Logo Placement

The customer can select from set locations where to place his logo. The areas are traditional positions pro cyclist teams place their logos.

Customiser — Logo Placement

Review Order

While reviewing the order — the customer can add different articles of clothing. When adding a new item — the previously chosen design is automatically enabled.

I designed an overview of design choices that customers can change for every individual item.

Customiser — Review Order