Clover is a point-of-sale system designed for small businesses. During my tenure, Clover was a challenger brand to Square. To compete head-to-head with its main competitor, Clover decided to build a direct sales channel with clover.com/shop.
ROLE
As a Senior Product Designer on the Digital Direct Sales team, I helped launch the /shop website.
RESPONSIBILITIES
UX, journey mapping, wireframing, UI, prototyping, testing
Design collaboration/maintenance of a pattern library
Visual design, art direction of device images
RESULTS
Launch of a new direct sales channel leading the shift from a sales-driven to a merchant-driven experience
Widened the top of the lead gen funnel and nurtured merchants later to upgrade software and add hardware
Increased the top KPI: merchant accounts opened
Shifting to a merchant-driven experience
For this launch, I made it easy for merchants to compare and shop for Clover devices. Merchants have the option to add hardware accessories and software integrations to customize their Clover system. I worked with the lead designer and stakeholders to map out the needs of different businesses and identify the most successful devices and add-ons for each vertical.
This data informed the questions that I needed to ask in order to correctly sort merchants by vertical and specific feature/payment needs. To keep users engaged, I streamlined the user flow and also created "off-ramps" to direct merchants to specialized apps in the Clover App Market. Merchants can also connect with the sales team if they require further assistance.
Designing a solution finder
On the /shop homepage, merchants are prompted to enter a full-screen lightbox and answer three to four simple questions about their business. Based on their answers, a primary and a secondary Clover device are recommended. To display detailed product views and a side-by-side comparison, I created a slider module. Any add-ons are highlighted below the slider module.
Slider module
This module was designed to address space constraints, making it easy for users to switch between individual product details and side-by-side comparisons without excessive scrolling. It can also be found on Clover Station landing pages, where it compares up to three devices.
Designing the details
A minimalist design, mobile-friendly considerations, and attention to detail with micro-interactions helped me achieve our project vision of conveying quality through design and performance.
⚡ An interactive prototype
I used After Effects and Figma to create a prototype that illustrates and tests the interactions between recommended devices. The prototype is intended for desktop use, but the slider module is designed to be responsive and work across all screen sizes, with some limitations in the comparison view on mobile.
Please note that button hover states are only displayed on the first screen
