2XU
Creating 2XU’s custom garment designer.
How do you provide online shoppers with a tactile, in-store sense of custom-designed performance apparel?
If you’re talking premium performance, 2XU is a name that perfectly fits the bill. Everything from their products and brand ambassadors to their customer support tools aims for best-in-breed. It’s that exact ambition and attitude that sees 2XU equip some of the planet’s most high-performing athletes with compression apparel.
So, when it came time to create a new custom product configurator, called the DesignLab, 2XU did what they always do: aim for elite in every capacity.
Specifically, their brief called for something that would stand tall on the podium when set against any global sportswear competitor, and a configuration tool that sets the pace now—and endures over the long-term—as an innovative, intuitive, and high performing customisation platform.
Sector
- Sportswear + Retail
Presence
- Global
The problem
2XU’s legacy tool—MyCustomiser—was outdated and underperforming. The team wanted to revamp the tool to ensure it matches the world-leading standards of 2XU’s apparel.
The approach
Create a customisation tool that sets higher benchmarks for every aspect of the customer experience. How? Provide more options for customisation, offer greater details on product feel and appearance, and ultimately, create a tactile sense of the premium quality of 2XU apparel.
The end-game
The same as any self-respecting athlete: speed, performance, and enduring quality. We set about creating something to provide a winning experience for customers by offering real-time product previews on the fly. And for 2XU, a platform that tightens long-term operational efficiencies in the manufacturing and order processes.
Eyes on the prize in 2XU custom performance apparel
In the same way shoppers combine textures, colours, and contours for real-time product previews, 2XU's DesignLab blends accessible, intuitive design with high performance.
Exercise some creative flair with completely customisable logos, colours, and pattern combinations.
The Benefits of a body of research
First up, we mapped the mechanical and logistical process involved in delivering custom 2XU apparel. While studying the technical components of the workflow, we uncovered an opportunity to bring 3D-mapping to the project.
One of 2XU’s main goals—aside from improving the look, feel, and function of the configurator for customers—involved a more efficient process for generating factory-ready artwork behind the scenes.
By automating more elements of the apparel workflow, we help 2XU manage orders more effectively and shave time off the delivery process.
3D-mapping technology allows the team to create production-ready garment orders, eliminating a time-consuming legacy aspect of apparel design and manufacturing.
Getting our hands on product materials is the first step to capture and replicate textures in 3D...
See the Pen Three.js Texture Map by Matt Agar (@agar) on CodePen.
...to provide a tactile sense of fabrics and materials, and put more 'win' in window shopping.
Texture Curricular
2XU's library of existing 2D Print-Art-Work (or PAW) files are like the texture coordinates used in UV mapping. By mapping the coordinates to X-, Y-, and Z-axes, we 'wrapped' the two-dimensional garment maps around 3D objects.
We traced 2XU’s two-dimensional artwork files to ‘cut out’ the variety of patterns used to create garments. Armed with this swatch book palette, we could then ‘stitch’ the individual pieces and patterns of 2XU’s apparel back together around any 3D object; in this case, a potential athlete’s physique while they’re checking the potential fit of their chosen garment.
Using Marvelous Designer for cloth simulation meant we could faithfully recreate the properties and behaviours of the actual materials used in the garments.
Then, by exporting and rendering the garment designs in WebGL, we get a 3D model that drapes, hugs, and contours to fit the body in the exact same way that 2XU’s actual apparel does. So if a piece looks like it hugs tight on the site, it definitely hugs tight when you wear it.
Colour me happy
Once you're ready to create a custom garment, the only design limit is your imagination. 2XU offer over 1,000 pantone colours and patterns, and you can upload any image or logo to feature in your design.
That level of freedom inevitably creates some constraints and challenges to overcome in the interface design. To solve the issue of displaying thousands of colour options without overwhelming people, we broke the colour selection process into two micro-interactions with supporting functionality.
The first action involves a range slider to provide a full overview of the entire colour spectrum.
Once you settle on a general colour scheme by using the slider, a grid of more nuanced colour options displays the subtle variations of shades within the greater colour scheme you’ve selected. For example, you might start off picking ‘yellow’ on the slider, before choosing between shades like ‘saffron’, ‘canary’, ‘mustard’, ‘gold’, ‘wattle’, or any other subtle variation that appears within the yellow scheme.
To keep things convenient, the last ten colours you’ve selected are held in local storage so your colour palette is there on call.
For people who are a little more prepared—or specific—with their colour preferences, there’s also a field for HEX code values.
Once you enter the HEX code colour value, it’s automatically cross-referenced against the pantone colour table to find and replicate the exact shade you’re looking for. Check it out in action to the right.
With this feature, sports teams or groups of friends can replicate specific shades to keep their garments consistent without everyone having to guess at finding the right colour through the slider. It also eliminates the potential impact of using the configurator on different screen resolutions or settings. Of course, if you want to show your design to a friend or a team mate, you can always save and share your customisation at the touch of a button.
'We used Vue.js to correlate the secondary grid colours in real time while the range slider moves along the colour spectrum.
It keeps the configuration functionality smooth and performant, but it’s also a great solution to help people understand the extent of their options quickly.’
Kurt Smith, Senior Front End Developer
interchangeable inspiration
Thanks to persistent customisation, shoppers can transfer a favourite custom design onto multiple 2XU products without having to redesign or reconfigure them each time.
Each custom design is stored using Vuex, or specifically vuex-persistedstate, which allows for keeping Vuex states in local storage.
With consistent naming structures for each of 2XU’s garments, the fabric areas of each piece, and image locations, custom design elements are rapidly accessible.
The benefit? People can create one design—say, on customised compression shorts—then quickly and easily apply that same design to other products, like cycling or triathlon shorts.
COLLABORATIVE TEAMS, DRAWN TOGETHER
While 2XU is a global retailer with a world-beating attitude, they know the value of face-to-face collaboration.
From the outset, the 2XU team made it clear they wanted a long-term partner: a collaborator capable of going the distance and growing with the brand into the future. So, we co-designed the product together with a blended team, trading skills and insights in the shared development of scope, design, features, functionality, and content.
Much like the DesignLab itself, this project was all about ensuring a perfect fit: balancing 2XU’s long- and short-term requirements, priorities, and project goals.
Appropriately for a sportswear and performance apparel manufacturer, 2XU were particularly interested in joining our design ‘sprint’.
The sprint is a rapid-fire inspiration session where everyone draws up their ideal design solution. The goal? Overcome targeted design and functionality challenges, quickly, by sourcing perspective from people with a variety of skills: from finance to front-end developers and everyone in between.
Results since launch
- 33.7kunique visits to the new DesignLab
The old adage rings true: ‘if you build it, they will come’
- 8.6kunique apparel designs created
People are getting creative with their custom performance apparel
- 699unique DesignLab creations shared
Sharing is caring, especially for running or cycling teams purchasing in bulk
WITNESS THE FITNESS
Check out the 2XU DesignLab now and exercise your creative streak with some customised apparel.
Whether you’re running, riding, or rediscovering your form, the 2XU DesignLab has got you covered. The only limit is your imagination!