Charge

Charge is a B2B App that provides mechants a simple and effective mobile point of sale (mPOS) payment processing solution that is built on the Stripe platform. Users can type, scan, or swipe (with an optional card reader) card information.

Role

Product Manager, UX/UI Designer

Methods

Competitive analysis, user flows, wireframes

Team

Head of Product, Customer Support Agent, Developer

Problem

In January 2020 as the pandemic began ramping up, I was serving as Product Manager for Charge. With social distancing mandates, Charge faced a significant challenge. Monthly Recurring Revenue (MRR) dropped by 27% as small businesses closed down, and the existing payment methods were no longer sufficient for many merchants during the pandemic.

Charge had limited payment options: either manual entry or card scanning using the device's camera. With the onset of social distancing, these payment options became impractical, as face-to-face transactions were discouraged.

Many merchants who remained operational needed a contactless way to receive payments safely. This need emerged directly from my customer support interactions, where merchants expressed their concerns about maintaining business while keeping transactions safe during social distancing.

Solution

As a Charge Merchant, I want to be able to send a payment request to my customers so that they are able to pay on their own devices, so that I can maintain a safe distance due to the Covid-19 virus.

Impact

The payment request feature played a crucial role in Charge's ability to stabilize and ultimately grow during the pandemic. As a result, Charge achieved its best year of all time, with a 13.8% increase in revenue year-over-year.

Merchant Payment Request Workflow

Adapting Quickly: How Competitive Awareness Informed Our Pivot

Although we didn’t conduct formal user research, the situation called for a pragmatic approach by reviewing what was happening in the competitive landscape. Our informal analysis showed that only one out of our three direct competitors had introduced a payment link feature—an option that was growing increasingly valuable for merchants during this time. This practical, competition-driven analysis enabled us to move quickly, make informed decisions, and ensure that Charge's feature set remained competitive and useful during a critical period.

Technical Validation: Leveraging Stripe APIs for Payment Links

After our competitive analysis, I worked with our developer to assess the feasibility and viability of the payment link feature by providing them with user flows for an MVP. Our developer researched Stripe’s APIs using the user flows I had created to determine whether implementing this functionality was technically feasible. This research confirmed that Stripe's APIs supported the creation of the payment link feature, allowing us to proceed with confidence while focusing on ensuring a seamless integration with Charge’s existing systems.

Payment Request Workflow

Challenge: To polish UI or not?

At the start of 2020, modernizing ChargeStripe's user interface was a key item on our product roadmap. The existing UI was dated and less competitive compared to other payment apps in the market, which made improving the user experience a priority. We had planned to introduce a more modern, intuitive interface, particularly focusing on key screens like the 'amount' input screen, to enhance usability and overall visual appeal.

In the end, we made the strategic choice to prioritize functionality. Opting to use native iOS components for the new feature rather than investing the additional time and resources needed to implement custom UI elements. This decision allowed us to deliver the payment link feature faster, making sure our merchants had the tools they needed to keep operating during the pandemic, even if it meant postponing a full UI overhaul.

Future Roadmap Concepts

Modernizing the UI with custom components was a heavy lift, given the circumstances, we opted for an MVP using native iOS components.

Wireframing & Mapping User Flows

As the Product Manager, I took the lead in creating wireframes and mapping out the user flows, focusing on simplicity and ease of use for our merchants.The goal was to create a frictionless experience for both merchants and customers. I started by designing a clear, step-by-step user flow that allowed merchants to generate and send payment links with minimal effort. This included defining how users would input transaction amounts, generate the payment link, and share it with their customers via text or email. The flow needed to be intuitive enough that it wouldn’t add complexity to the already stressful environment of operating a business during the pandemic.

These user flows and wireframes guided both the design and development phases, enabling us to create a seamless payment link feature that could be delivered within a tight six-week timeline. Iterating quickly based on user feedback and development constraints allowed us to keep the user experience at the forefront while addressing the urgent need for contactless payments.

Creating a payment request as a merchant

Ideating the merchant payment workflow.

Paying a payment request as a customer.

Ideating the client payment workflow.

High-Fidelity Designs

After finalizing the wireframes and user flows, we transitioned to high-fidelity designs. Given the time constraints and the decision to use native iOS components, the focus was on ensuring clarity, functionality, and ease of use rather than an extensive visual overhaul. The high-fidelity designs maintained a clean, intuitive layout that aligned with Charge’s existing aesthetic while enhancing usability for merchants.

Impact

Creating a payment request as a merchant.

Receiving a payment request as a customer.

Reflections and Future Focus: Challenges and Next Steps

Learnings

This experience highlighted the delicate balance between striving for an ideal user experience and responding pragmatically to business constraints. Understanding when to compromise on design versus when to prioritize speed and cost-efficiency was crucial in navigating the challenges presented by the pandemic.

Challenges Overcome

A significant challenge was the outdated UI and the desire to modernize it while also delivering a new feature quickly. The compromise of using native iOS components allowed us to manage both time and cost while still providing a valuable contactless payment solution.

Looking Ahead

Moving forward, we continued to explore incremental ways to modernize the user interface without major delays, focusing on gradual improvements while keeping the user needs at the forefront.