WOOPAYMENTS

Centralized payment button guidelines for a high-quality buyer experience

Client

WordPress
WooCommerce

Industry

eCommerce

Services

Product Design
Design System

Product Area

Payments

My Role

Product Designer

Timeline

June - August 2023

Context

The project aimed to standardize payment buttons of third-party providers for a high-quality buyer experience across WooCommerce stores to optimize conversions and drive successful transactions.

Problem

WooCommerce doesn’t have control over the button appearance of third-party payment providers, as their APIs come with predefined customizations.

That caused inconsistent button appearances, disorganized button layouts, and positioning across pages (Product, Cart, Checkout). Therefore, around 60% of merchants disabled specific payment options in their stores.

Goals

Ensuring a high-quality buyer experience by proposing centralized payment button guidelines for third-party payment providers. Building well-designed buyer experiences is a critical factor in influencing conversion rates.

Allowing merchants to seamlessly configure payment button appearances and preferred payment options in their stores.

Role

I led the design initiatives to establish the centralized payment button guidelines (for WooPayments and payment partner providers) and button appearance configurations for merchants.

Design

Investigation
I investigated the current payment button and did a competitive analysis to understand the industry standard of payment button specifications across e-commerce stores (Etsy, Amazon, Shopify, Google Pay / Apple Pay).

With the default 40px button height, the label looks small and thin on a few sites compared to other e-commerce stores with button heights (42 - 58 px) and is not flexible enough to accommodate various stores and themes. Besides that, there are Inconsistencies in button appearances (uppercase vs. lowercase, font style, text spacing, button height, font weight).

The inconsistent pattern of payment buttons displayed across pages (Product, Cart, Checkout) in horizontal and vertical layouts. Disorganized positioning of the WooPay button with other payment methods (WCPay, PayPal, third-party payments), payment elements (Add to cart, Proceed to checkout), and overused separation element of “-OR-“.

Button UI specifications
Enlarge the standard default size button to 48px height, with additional size options of small (38px) and large (54px). Adding the adaptive height range of each payment button size option that will adapt to the button height from the store themes.

Button styles and corner radius
Some sites use themes with pill-shaped buttons, whereas the WooPay only provides built-in rectangular-shaped buttons. I proposed payment buttons in 3 styles (Dark, Light, and Light with outline) and corner radius (Default and Maximum) to ensure visibility across various store themes and backgrounds.

Button styles for various store themes and backgrounds.

Different corner radius of payment buttons.

Accessible payment button variants on Figma
I created maintainable components and variants on Figma to streamline the design process and development.

Button layouts and positions
I explored and determined the best positioning of payment buttons with other payment elements in different layouts (vertical and horizontal) and mobile-friendly views for Express payments, Products, and Cart.

Button layouts and positions for different number of payment buttons on Checkout page

Button layouts and positions for different number of payment buttons on Product page

Button layouts and positions for different number of payment buttons on Cart page

Collapse and expand payment options
I suggested simplifying the payment button display with a collapse-expand interaction. This would enable merchants to show all available payment options in their stores to optimize conversions while preventing buyers from being overwhelmed.

Button appearance configurations
Merchants know which payment options would work for their customers and bring better conversions for them. Hence, I proposed the button appearance configurations in the button settings that allow merchants to reorder payment options and button appearances (branding, layout, size, and theme).

User testing
I did user testing with merchants to validate the design approach. Merchants get overwhelmed by how complicated the settings page becomes, and they need to go back and forth between payment settings and the previews.

The block editor
Based on the feedback, I proposed the design to build the button appearance configurations within the block editor (WordPress editor). Merchants can apply button configurations across WC Payments and third-party payments, including branding, layout, size, and theme.

Outcomes

Achieved better consistency in implementing all payment buttons (both WooCommerce and third-party payment providers) for a high-quality shopper experience. As the result, It reduced the churn rate of merchants disabling multiple payment buttons across stores by 54%.

The preview of consistent payment button appearance across third-party payment providers.

Learning

It’s a huge challenge to achieve cohesive and organized payment buttons as we don’t have any control over the payment partner extensions with the current extensibility option. Therefore, we must find the best way to work closely with 3PDs to ensure consistency.

It’s important to create standards for displaying payment buttons as the first step before giving control to merchants.