WEN® Cart System

Development, Landing Page, UI / UX

Objectives

The initial task was to overhaul the conventional cart pages at Guthy-Renker® (GR), characterized by a rigid and formulaic structure that lacked innovation and customization. Despite resistance from the IT team, who initially deemed custom cart pages unattainable within the ZEN Cart platform, the objective was to advocate for the necessity of this project and emphasize the critical role of customization in enhancing user experience and driving sales. Ultimately, the goal was to introduce a more flexible and adaptable template to replace the existing system, thereby improving design flexibility and addressing cart abandonment issues to bolster sales performance.

Solution

Traditionally, the cart pages at Guthy-Renker® (GR) had been extremely formulaic with very little innovation (see WEN® Hair Care Generic Single Cart Page). These cart pages were based on a ZEN Cart template and looked nearly identical across all online brands. The only editable element was the top left "product shot," with the rest of the page remaining unchanged based on brand. This generic approach was doing little to encourage customer conversion, so as Lead Web Designer for the digital acquisition team I took it upon myself to push the boundaries and encourage sales.

I discovered the largest road block to this redesign was the IT team. IT had made it clear that custom cart pages were not possible inside the ZEN Cart platform, so I spoke directly with them about the necessity of this project. The importance of customization in terms of user experience and sales is paramount - and was probably a large reason for our cart abandonment issues. Eventually I was assigned to a developer where, utilizing my front-end development skills, I was able to learn and deconstruct the cart system GR had in place. This lead to the creation of a "vanilla" template that the design team could wrap their ideas around without hesitation, dramatically increasing sales.

My favorite example of how the "vanilla" template pushed the boundaries of the cart system is my WEN® Hair Care White Stone Cart Page. It was literally able to combine a landing page and cart page into one, shortening the cart process and reassuring the customer while they filled in sensitive financial information.

Summary

  • Communicated and worked with the IT team to develop a solution that encouraged creative layouts while being quick to implement, effectively fixing our cart abandonment issues.
  • Utilized HTML, CSS, jQuery, and calculus to develop interesting animation and transition effects to capture the interest of the customer.
  • Educated the design team in new ways we can push boundaries to increase the user experience and garner sales.
  • The WEN® Hair Care White Stone Cart Page was revolutionary in its use of hero product photography. The brand owners were hesitant to market without a hair model - even though the three pieces of approved model photography were losing traction. The success of this page made it the first of many creatives to utilize a bold product shot, rejuvenating the brand.

Project Highlights

  • Collaborated with IT to develop a solution for creative layouts, resolving cart abandonment issues efficiently.
  • Used HTML, CSS, jQuery, and calculus to create captivating animation and transition effects for customer engagement.
  • Educated the design team on innovative methods to enhance user experience and drive sales.
  • The WEN® Hair Care White Stone Cart Page revolutionized product photography, overcoming brand hesitations and rejuvenating sales with bold product shots.

WEN® Hair Care White Stone Cart Page - Property of Guthy-Renker®
WEN® Hair Care White Stone Cart Page - Property of Guthy-Renker®
WEN® Hair Care Generic Single Cart Page - Property of Guthy-Renker®
WEN® Hair Care Generic Single Cart Page - Property of Guthy-Renker®