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
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
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.
Solution
Curated artwork dimensions to fit artboard. We also pre-colored certain areas to get the user started.
User Test 2
Coloring Quality
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).
Solution
Changed the artwork filetype to SVG. Ensured all lines are connected and closed to avoid color bleeding.
User Test 3
Crayola Brand Guidelines
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
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.
