Cropping in the Design Lab

Problem

The Design Lab gives users the ability to upload their own images, however issues are encountered when trying to upload an image with a transparent background. The extra space around the image limits the users ability to correctly size and place designs on product mockups.

Solution

We automated the removal of excess transparency around uploaded images, giving users the ability to freely move and size up their designs within the bounds of the product mockup.

To enable this functionality, we needed the ability to crop out the negative space. This meant we could also add a customer-facing cropping tool and let users further refine their images. A cropping tool gave the added benefit of keeping our design software competitive in the custom swag market.

Outcome

This led to a conversion gain of +$5.2 million from the cropping tool and another +$5.7 million from the auto removal of negative space.

Users are now able to customize their images and proceed with a design they are happy with.

Audit of Current Experience

I completed an audit of the current experience in the Custom Ink Design Lab to understand what issues users were running into. I found a glaring problem when I uploaded an image with a transparent background. There was so much negative space surrounding the image I was unable to increase the size and fit it within the printing constraints of the t-shirt. This meant my design was much smaller than I wanted and didn't look great.

A baseline usability test was done as part of the audit of the Design Lab experience. By testing different types of images that are commonly uploaded into the Design Lab we were able to get a sense of how users wanted to adjust their designs and what kind of tools they expected to see. Not having a tool to adjust and crop the uploaded images was disappointing to users and impacted their ability to create the design they were aiming for.

Anecdotal Feedback from Sales

Feedback from sales reps let us know they deal with similar pain points. Customers call in asking for design help with uploaded images and reps need to take each image into another software program to crop out the negative space and then bring it back into the Design Lab. This gives the customer an opportunity to see the correct design before proceeding with their order. The alternative is for the reps to relay instructions to the production artists down the line, which doesn't give the customer a chance to see how the design will really look on the final product until after they have paid.

Competitive Analysis

A competitive analysis of direct competitors and popular design sites showed me where our design tools were falling short. It became clear that a crop tool is a common feature that was missing from the Design Lab.

Aligning early

Wireframes for mobile and desktop were created to get some initial ideas out quickly and easily present the concepts. I met with the PM and engineers to understand the feasibility of requirements and align on the path forward.

Connecting with engineering early on was essential and aided in moving quickly when engineering capacity opened up sooner than expected. We were able to try something new. While I finished fleshing out the high fidelity designs the engineers were able to start working on backend adjustments with the requirements we had already aligned on.

High Fidelity

Design exploration was the next step. As I put together designs to visualize the functionality and different states, I realized that I hadn't yet thought about white colored uploads. If a user uploads an all-white or mostly-white design it wouldn't show up well in the panel and would be difficult to manipulate. I thought through my options and looked at how we approached similar scenarios elsewhere on the site to come up with a solution. A checkered background was identified as the best choice because it enabled the white color to be seen along with any other colors present in the design.

I presented my work to the UX team for critique and got helpful feedback to help take my designs to the next level. 

Handoff

After making iterations, I presented my full designs to the PM and engineers to review and answer any questions to help with the engineering breakdown.

Winning Test

A/B testing showed positive results for the test and resulted in an increase of ~$11 million. That was the combined conversion gain from the cropping tool and auto removal of negative space.

Lessons Learned

Being adaptable and trying a new process was the best way to work efficiently. While engineers don't typically begin development until design files have been finalized and handed off, being open to a new approach allowed us to keep moving and use our time wisely to ensure this project could get out as quickly as possible.