Nicolas Renou
Senior Product Designer

Shark Sportswear

Lead designer - 2017-2018

An interactive clothing customizer to help a sportswear company in their quoting process.

shark app in macbook
Role
Lead Product Designer
Project manager
product Team
2 designers, 2 developers
Project type
Consulting (TestBench Inc.)
Beta version (MVP)
Tasks
Scope of work
Project management
Technology research
Product strategy
Design and prototyping
Quality assurance
Technology
Fabric JS
Jquery
PHP (Laravel)
Duration
3-4 months

Context and challenge

Shark Sportswear is a company that makes custom uniforms for sports teams in the U.S.A including both high school and college teams.

The quoting process and subsequent design of each team’s uniform is 100% manual and was one of the most time-consuming parts of the business. In addition, the back and forth between the company and the client sometimes led to miscommunication and inefficiencies. This part of the process had repetitive steps and constraints that could be automated. This led the company to reach out to us.

Proposal

After some initial research we decided to build an online tool that would allow their customers to design their own uniforms (within the company’s constraints) and get an initial quote as a result.

The project was both ambitious and large in scope, changing how the company works at its core. The change would not be implemented overnight, so it was important to build a limited pilot that would run in parallel with their usual process.

Regarding the technology, we were hoping to build a 3D web app whilst leveraging the company’s existing 3D models. However, given the available time and resources, it was not going to be feasible for the pilot. We decided to build a simplified 3D-looking preview using a stack of transparent images to make each outfit template.

The tool

The interactive tool takes the user through a simple step-by-step process, from choosing a base template, to choosing the color palette, various textures, and more.

Setting up the team roaster during checkout

After designing their product, customers can add items to their cart to continue, which also serves as a way to save their creation for later if needed. When they move forward, they are asked to create an account and add their team roster which will be factored in the quote calculation.

Shark sportswear checkout

Building the admin panel

The default product templates had to be set up and configured in the administration before being available to customers. We reused the same user flow as the front-end for consistency and ease of use, with some extra steps where the different layers that make up a product are uploaded.

We also designed and built the order management, as well as user management sections that are necessary to keep track of both orders and customers.

Shark sportswear online customizer
Shark sportswear online customizerShark sportswear online customizerAdmin sectionShark sportswear online customizerShark sportswear online customizerShark sportswear online customizerShark sportswear online customizerFonts section in adminAdmin Colors section

Delivery and results

The first version is fully built and is in testing with a select number of customers. We planned the roll-out to be progressive in order to avoid disrupting any core business processes and guarantee the success of the company’s transition.

Next projects