Enhanced Visualization on Product Mockups
Enhanced Visualization on Product Mockups
Embedded Files
Increasing design satisfaction and customer confidence in how the final product will look.
Problem
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
Solution
If we automate the removal of excess transparency around uploaded images and let users adjust their images as needed, then users will have the ability to freely move and size up their designs within the bounds of the product mockup, which will give them the confidence to take their final designs to checkout.
Outcome
Outcome
To enable this functionality, we needed the technical 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 has the added benefit of keeping our design software competitive in the custom swag market.
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.
Project Info
Project Info
Team: Custom Ink Ecommerce
Role: Lead UX Designer and Researcher
Timeline: 4 weeks
Determining the Right Problem to Solve
Determining the Right Problem to Solve
I led the discovery phase for a new project centered around the nebulous idea of decoration flexibility. I conducted research and facilitated workshops to help us focus on the right problems.
Audit of Current Experience: I completed an audit of the user journey through the Custom Ink Design Lab to understand what issues users were running into. I went through the happy path and a variety of other flows to get a good sense of the big friction points.
Usability Testing: A baseline usability test was done as part of the audit. This allowed us to see some of the big problems users were encountering.
Competitive Analysis: A competitive analysis showed me where our design tools were falling short and how competitors were solving for the issues users were running into on our site.
Interviews with Sales Reps: Sales reps were consulted to get their perspective on the problems they hear directly from users and the problems they encounter in their day-to-day using the site.
Identifying the Problems: After synthesizing the research, I was able to identify a variety of user problems.
Divergent and Convergent Thinking: I collaborated with the team to go wide and brainstorm broad ideas to solve the problems I had identified. We dot voted to narrow down the choices to the strongest ideas.
Effort/Value Matrix: With the problems and ideas identified, we needed to work as a group to prioritize the work.
Gaining Understanding from the Sales Rep Experience
Gaining Understanding from the Sales Rep Experience
Feedback from sales reps had let us know that image adjustments were a reason customers call in and is a common paint point. Reps will help customers by taking their images into a separate software program to crop images and crop away negative space and then they will bring the edited images 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 look on the final product until after they have paid.
Prioritizing the Problems
Prioritizing the Problems
I set up a meeting with the PM and engineering team to go through an effort/value exercise. We were able to have an effective conversation about our ideas and where they landed on the effort/value matrix.
High Value/High Effort
High Value/High Effort
A problem we saw come up in multiple areas of the research was a high effort problem. There was a reason this problem had not been fixed in the past. Though we knew the engineering effort would be high, we also knew the value to the user would be high.
High Value/High Effort Problem: Any time a user uploads an image with a transparent background there would be negative space surrounding the image. This was a problem because it limited the user's ability to increase the size of the image and still fit it within the printing constraints of the user's product. This meant designs were smaller than intended and also difficult to place where desired on the product.
Getting Buy-In: By pairing a high value/high effort problem with another problem that had a complementary solution, we were able to get buy-in to tackle a big problem. The teamwork in understanding that these two problems could be paired was invaluable.
Pairing Up Problems: We chose to focus on the auto-removal of negative space and pair it with a new tool for customers to be able to crop images. The cropping feature would be necessary to remove negative space and we knew a customer-facing tool for cropping was something sales reps had been requesting.
Understanding Customer Expectations around Image Adjustments
Understanding Customer Expectations around Image Adjustments
Usability Testing: By usability testing different types of images that are commonly uploaded into the Design Lab, we were able to get a sense of how users want to adjust their designs and what kind of tools they expected to see.
Cropping is an Expectation: 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.
Competitive Analysis
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
Aligning Early
Wireframes for mobile and desktop were created to get some initial ideas out quickly and easily present the concepts for the cropping tool. I met with the PM and engineers to understand the feasibility of requirements and align on the path forward.
A Different Kind of Handoff
A Different Kind of Handoff
Early alignment 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 Designs
High Fidelity Designs
Fleshing out the designs and bringing up the fidelity was the next step.
Critique: I presented my work to the UX team for critique and got helpful feedback to help take my designs to the next level.
Accounting for Edge Cases: 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 and matched existing patterns on the site.
Users could access the crop tool from the "Edit Upload" panel or by right clicking on their image.
Winning Test
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
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.
Google Sites
Report abuse