Project Summary: Redesign a product configurator for a highly customizable, wall-art product set. User actions included uploading images, cropping and adjusting their placement in a WYSIWYG interface, adjust quantity, print size, material, and preview their product prior to checkout.
Project Overview
This was one of the first projects I worked on for Circle Graphics was to update the CG Pro Prints brand’s on-site configurator. The site offers on-demand printing services for artists and photographers with a variety of ways to print their own images at a wholesale price-point. The product selection and experience was originally built very rapidly, with no mobile support, and restricted a user’s ability to change product options after uploading their image.
Background
Since its launch, CG Pro Prints had expanded its product library considerably, so the need for user flexibility, platform scalability, and a richer feature set created the need to rethink the entire product selection and configuration process.
Additionally, drastic increases in mobile traffic on the site indicated that adding a way for users to convert on the mobile version of the site was a big opportunity for additional revenue.
My Role and Responsibilities
- Design the UX / UI of the new configurator.
- Collaborate with the creative director to retain brand continuity throughout the project.
- Work with dev teams to discuss progress, as well as feature feasibility / scope.
- Provide mock-ups, wireframes, animation samples, and final assets as needed.
- Review, test, and approve dev progress to ensure vision was executed on effectively.
- Conduct user tests to reveal user friction and confirm new designs removed friction.
- Suggest “future state” wishlist items to improve UX / UI further.
Rethinking the User Flow
During discovery, we gathered existing research and identified that the majority of users making purchases on the site were professionals—either printing their own work for inventory, or ordering prints for their clients. We also conducted some observational usability studies and discovered that the existing purchasing flow prevented users from quickly adding varying product types without having to restart the process. This was creating a great deal of friction and frustration and limited a user’s freedom when they wanted to quickly create and purchase a set of products using the same image.
While users could upload multiple images, they were limited to ordering a single product type, in fact, this restriction went as far as limiting the product size as well. We also identified several additional key pain points within the interface—the cropping tool, option selection controls, navigational elements—that all fell outside of typical and expected design patterns of interfaces of similar types.
With the information we learned from discovery, we established some estimates of effort and impact and set the focus and direction for the design & build. Below is an example of how the “add to cart” flow of the configurator changed to allow more freedom with users when selecting multiple product types and sizes.
In addition to allowing users to configure their product after uploading their images, we changed the process starting point to a user uploading their photos, allowing them to do all of their product and size selection within the builder. We also kept users in the builder after adding items to the cart to allow them to add multiple product variations of the same image without restarting the entire process.
Results / Conclusion
After implementing and launching the newly designed builder, we surveyed a sample of users and also added on-site exit surveys to validate the success of the changes that we made. Qualitatively, almost every user agreed that the changes made the experience better. In addition to the positive user sentiment, the pages also performed considerably better when measured quantitatively comparing analytics metrics when compared to the previous year.**
**Due to some limitations set by NDAs, specific metrics were not included or have been generalized.