VANS x CRAYOLA

Design Thinking / UX / Visual Design

Revitalize creativity.

Vans collaborated with Crayola to create a coloring tool that complimented our Customs platform. The idea is simple: pick an art piece, pull out your crayons, make some art, throw it on a shoe. Relive those stress-free grade school days.

Project Overview

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 Vans 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.

View the coloring tool here.

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 collaborating with developers.

Goals

• Create an updated coloring tool that addresses and resolves the usability issues of the previous tool.

• Design an engaging experience that will entice users to utilize the Customs product and ultimate lead to a sale.

Impact

Metrics

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

13% of consumers who started coloring entered the Customizer.

Final Designs

Mobile

Final Designs

Desktop

Process

Iterative Design Framework

Our design process accommodated for the tight budget and timeline restrictions we were given for this project. We did not have the budget for extensive research and testing nor the time to draw out any design explorations. We had to prioritize aspects of the process and launch quickly. This is what we were able to do with a team of one designer and developer under a two-week time frame.

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 Test

Usability Testing

Here is a highlight of four challenges and features we tested:

1. Speed - a challenge to develop an experience that did not take too long to complete.

2. Coloring Quality - the functionality of the existing tool made it challenging for users to color in the artwork completely.

3. Crayola Brand Guidelines - a challenge that required us to find a solution that allowed users to be able to color in Crayola crayons while still following their brand guidelines.

4. Artboard Zoom - new feature to address a pain point users had with the existing tool.

Test 01

Challenge - Speed

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 - Simplify

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

Test 02

Challenge - Color quality

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 - Image File Type

Changed the artwork filetype to SVG from JPG for clean and crisp edges. Ensured all lines are connected and closed to avoid color bleeding. We tested different filetypes extensively to come to this conclusion. Uploading a vector file wasn't enough — we had to tweak the properties of the SVG file to achieve this coloring fidelity.

Test 03

Challenge - Crayola Brand Guidelines

Crayons needed to be one single color based on Crayola’s brand guidelines. In the initial iterations we tested, users were able to color in different parts of the crayon due to the coloring functionality of the tool, which violated the brand guidelines.

Solution - Pre-Fill crayons

We pre-filled the crayons to all be one color, keeping the user from coloring in different sections of the crayons. We also implemented “shuffle” feature and created 20 versions with different color combinations so users had a variety of pre-colored options to choose from.

Test 04

Challenge - Zoom

In the old design, users were unable to zoom into just the artwork itself. On mobile, zoom magnified the whole page, rendering the other tools outside of the users' screen.

Solution - Artboard Zoom

We implemented the ability to pinch to zoom the artboard independently on mobile for better coloring accuracy in detailed areas.

Observations

Successes

We were able to, in a short timeframe, launch a product that was much improved functionally over the old design. This achievement is the result of a successful collaboration between designer, developer, project managers, and stakeholders. We would not have been able to succeed without every teammate on the same page and driven to overcome the challenges.

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.