Hero image showing Vans Customs and Crayola logo over yellow background.

VANS x CRAYOLA

The Crayola and Vans collaboration for 2022 included a coloring tool to be used with the Vans Customs product. A similar tool existed for the '21 holidays called Make It Special. The coloring tool allowed users to color a piece of artwork and place that image onto a shoe via Customs. Customs allows users to customize their own styles online and create a shoe by choosing their own colors, images, and textures. The Crayola coloring tool allowed users to select one of four pieces of artwork to color with Crayola’s palette. We took insights from the holiday tool to refine and improve the experience for Crayola.

vans.com/crayolacoloringtool

My Role

I was part of a small team that included directors, developers, and product managers. I was responsible for ideating and executing designs, user testing, iterating designs, presenting to stakeholders, and handing off final designs to developers.

Results

+643% increase in sales vs. the Make it Special Tool.

13% of consumers who started coloring entered the Customizer.

Final Designs

Final designs of the Crayola coloring tool mockups on three mobile phones showing the first three steps of the coloring experience.Final designs of the Crayola coloring tool mockups on three mobile phones showing the last three steps of the coloring experience.Desktop mockup showing the homepage of the Crayola coloring tool.Desktop mockup showing the coloring page of the Crayola coloring tool.Desktop mockup showing the finished page of the Crayola coloring tool.Desktop mockup showing the Customizer page of the Crayola coloring tool.

Goals

The goals were to create an updated coloring tool that addresses the usability issues of the previous coloring tool and create a successful and engaging tool that will entice users to utilize the Customs product.

Team

Creative Director: Matt Shipman
UX/UI Designer: Andrew Vuong
Developer: Mariano Echegoyen
Customs Program Manager: Christine Kilicarslan
Senior Manager, Merchandising, Customs: Bill Turner
Project Manager: Dominique Gallardo

Process

1. Tested current tool for user pain points.

2. Ideate/explore initial designs based on feedback and new features.

3. Present high fidelity prototypes to stakeholders and receive buy-in.

4. Start development and test new designs.

5. Analyze test results and work with dev partner to fix issues.

6. Continue development and present iterations to stakeholders.

7. Launch

User Testing

Here is a highlight of four challenges and features we wanted to test and overcome: 

1. Speed - user pain point

2. Coloring Quality - user pain point

3. Crayola Brand Guidelines - functionality challenge

4. Artboard Zoom - new feature

User Test 1

Speed

Mobile mockup showing the issue of the artwork being too large in the old design.

Pain Point

Artwork was too large and detailed. Users had no way to quickly color the whole piece at once. They had to pan across different sections of the artwork to fill the whole piece in.

Mobile mockup showing the solution to the oversized artwork.

Solution

Curated artwork dimensions to fit artboard. We also pre-colored certain areas to get the user started.

User Test 2

Coloring Quality

Mobile mockup showing the issue of the coloring quality in the old design.

Pain Point

Coloring left a lot of white pixels around edges. Coloring AI only stopped color fill when detecting a closed line (see the wave illustrating this issue).

Mobile mockup showing the solution to the coloring quality issue.

Solution

Changed the artwork filetype to SVG. Ensured all lines are connected and closed to avoid color bleeding.

User Test 3

Crayola Brand Guidelines

Mobile mockup pointing at the shuffle button in the toolbar and two Crayola crayons in the artwork.

Challenge

Crayons needed to be one full color based on Crayola’s brand guidelines. We pre-filled the crayons to all be one color, keeping the user from coloring in different sections of the crayons.

We implemented “shuffle” feature and created 20 versions with different crayon color combinations so users had a variety of pre-colored options to choose from.

User Test 4

Artboard Zoom

Mobile mockup showing the zoom feature in the Crayola coloring tool.

Feature Add

Ability to pinch to zoom artboard independently on mobile for better coloring accuracy in detailed areas.

OPPORTUNITIES

Our biggest challenge was timing and testing. We did not allow adequate time for development and as a result had to rush the launch for this experience. Find the time or advocate strongly within the team to include time and resources for necessary processes.