16 March 15 Customise jackets like a boss.

Remember when you were in year 11 at school and you put your order in for your year 12 jersey? The next year rolled around and the day came when your jersey arrived. School colours, year of graduation and your nickname on the back. Year 12 was yours, and you were ready to roll.

Reform Clothing captures those memories of senior year and brings them to life with customised garments. They offer a range of jumpers, hoodies and jackets that can be made in school, house or team colours and include personalised features such as nicknames and year of graduation. The turnaround time to receive your garment is eight weeks. How awesome is that?

We worked with Reform Clothing to take the customising process online. Previously, the manual process that Reform executed for each order was expensive and labour-intensive.

Reform had a clear idea of what success looked like to them. A high quality online tool was paramount. It needed to be the best it could be for its purpose. A key part of Reform’s sales process is to capture the user’s imagination and engage them in the customisation journey. The Reform DYO tool enables them to do just that.

The tool to design the garments needed to be lifelike. Competitor sites didn’t give their users an experience that showed a garment as close to real as possible. The Reform brand is highly visual so using illustrations wasn’t going to cut it. Quality photography would help give users a lifelike experience when designing their garment. We looked at sites such as Nike, MyOwnBike and ThreadMeUp to see what was around. Then we built on that to make Reform DYO awesome.

The finished site is easy to use, seamlessly incorporating the many variables that go into making a customised garment. Twenty-four variables per garment in fact.

We wireframed in detail before we moved on to designing and building the site. With the amount of variables per garment it was essential that people using the DYO tool had options when completing the customisation process. They are guided through the process using tabs and buttons and can choose their own adventure using pin points on the garment that trigger a colour palette, badge or letter.

Asset collation was a major component during the build phase of this project. We worked closely with Reform from the start of the asset collation process to make sure that everything was prepared and collated in the right way for the project. Each variable was matched to its corresponding garment – there was no room for error.

In order to create the ‘as real’ experience you can see when designing your jumper, jersey or hoodie, we used scalable vector graphics (SVG) to allow us to layer the garment and the chosen colours in the browser. It means you can see the natural shadows and creases that would appear when you lay a garment on a flat surface.

SVG is a type of image format for the web that supports interactivity and animation. The image files can actually be edited with a text editor but are more often created with drawing software.

Can you imagine sorting through an image gallery of hundreds of jerseys just to find the one you like the most?

SVG images are great for client projects that require the end user to customise a product or service on a website. This is as opposed to sorting through galleries of raster images (.jpegs, .gifs and .pngs) that display the final version of every variable and possible combination. Using SVG images is far more efficient and is much more fun and ‘real’ for the user.

Another example where we’ve used SVG is the Everton pool calculator we built for Gale Pacific.

Since launch, Reform has received great feedback about the site and the new functionality. We’re working on phase two with Reform and can’t wait to show you what’s in store.

For now, check out the ways that you can customise a jacket, jersey or hoodie.