Overview

Background

Clover provides a point-of-sale ecosystem for small and medium-sized businesses, that includes hardware to ring up orders and take payments on, software that adjusts to their business need and allows the merchant to track reporting and sales on their phone or web browser, and offers an App Market where merchants can find tools that better fit their specific business needs.
Many of the apps on Clover’s App Market are built by external developers (second or third-party) and these developers decide on which apps to build and features to improve from their perspective of market demand and merchant feedback.

Clover Devices including Station, Mini, Flex, and Go cutoff midway to bottom of devices

Problem

The most recent developer survey found developer billing as the most disliked among Clover’s developer products. Developers complained that it was difficult to understand and use, they were unable to be flexible with their billing.
Broadly, developers were unable to understand where their money was, when they could expect their deposits, and to predict their monthly revenue with certainty. More specifically, developers felt charge states were unintuitive, charge types were not comprehensive, and charges were disconnected from intuitive merchant actions.

Grid of iPhone 12 and Safari browsers with Developer Billing screens displayed

Solution

We delivered a redesigned billing section focusing on updating transaction and merchant states that helped developers be able to better predict how big their next payout would be, better breakdown which transactions were recurring compared with new installs or metered charges.
Our data visualization improvements helped developers see more clearly how variable their revenue was month to month so they could make better long-term decisions for their app-based business.
Scenario 1
View revenue trends and understand volatility
Scenario 2
View transactions per month and transaction details
Scenario 3
View revenue trends and growth on your phone
Scenario 4
View transactions on your phone
Scenario 5
View deposit statements on your phone

Role

I was the sole product designer diagnosing the cause of the problems, defining the internal processes and that needed to change and the features that were expected on the platform, iterating on and polishing the pages so that they helped developers understand their revenue and interact with their customers, and collaborating with engineering on delivering high-quality working web apps.

Team

I worked with a Product Manager, Director of Design, and several front-end and back-end engineers to deliver this redesign. I also collaborated with stakeholders from our billing department to understand and work to improve our billing system processes for merchants, developers, and internally.


Process

Heuristic Evaluation

I reviewed the transaction screens for existing developers to determine that the current number of transaction types were insufficient to describe the billing events that were taking place, and the transactions statuses were unclear and added to the cognitive load for developers.

Heuristic Evaluation of Developer Transactions

Mental Model Definition

I lead a collaborative workshop to simplify the charge state flow, use terms that succinctly described the state of the charge, and ensure that the charges flowed in one direction to Deposited.

Flavor & Size Whiteboard Concept Exploration

Transaction Nesting Exploration

One approach I explored was an atomic, molecular, and organism structure of presenting information about transactions. I noted what was the important information at the transaction level and how it could be summarized as the user zoomed out to events, collections of events, and statements.

Transaction Summary Exploration

Cross-Functional Research Workshops

Conducting collaborative workshops helped align stakeholders on Billing Infrastructure and Internal teams (and stakeholders within our parent org) on charge types and states requirements and helped build buy-in and trust for the final designs and handoff.

Developer Billing Cross-Functional Research Alignment Workshop