Invoicing creation and tracking with Stripe integration

Date 2023

Client SelfMade by The Mom Project

Background

SelfMade is a freelancer marketplace and toolset that strives to be an all-in-one solution for freelancers at every step of their small business journey – from marketing to project management to payments. Our goal for this feature was to bring invoicing and payment tracking into SelfMade to provide a secure, consistent, and centralized way to get paid.

Jump to app visuals

My role

I was the lead designer on this feature and collaborated closely with product and engineering on the requirements and technical considerations.

My responsibilities:

Collaboration on user stories and requirements
Design thinking and user journey mapping
Task flows
Design solution – low-fidelity wireframes through high-fidelity prototypes and specs

The Challenge

How might we introduce lightweight invoicing and payment capabilities to our users in order to build trust and help them get paid fast?

Process

Building user empathy through journey mapping

When it comes to anything related to money, we know trust and emotions play a big part. Relying on the user personas developed by our UX researcher, I completed a user journey map to build empathy and dive deeper into what a user might be thinking and feeling throughout every step of creating an invoice and getting paid. Some primary challenges and opportunities emerged:

Trust and security

Users need to understand why they should use this feature instead of their existing method, like Venmo or Paypal. We should partner with a trusted payment processor.

Speed and efficiency

The faster a freelancer can create and send invoices, the faster they can get paid and see real value.

Mitigating money challenges

Users don’t want to do mental math. Requesting payment or sending reminders can feel uncomfortable for freelancers.

Click image to enlarge

Creating task flows for early buy-in

Relying on the engineering recommendation to use a Stripe integration, I created task flows to demonstrate the journey. This helped us unpack complexity and technical constraints, allowed engineers to t-shirt size different parts of the journey, and helped us align on our iterative approach and scope.

Taking an iterative approach

Because a full Stripe integration had a high LOE and would take time, we decided to approach it iteratively – delivering features and functionality to users incrementally.

V1.0 A simple downloadable template

Introduce a downloadable invoice template doc in the product so users had a starting document to build an invoice vs. building from scratch. This helped us validate user interest and make the case for further investment into an invoicing tool and payment processing.

V2.0 Invoicing API integration

We'd then build a full invoicing tool using Stripe’s Invoicing API. Users could create, send, and track invoices directly in SelfMade. To keep scope small, we made the trade-off to link out to Stripe's no-code Express Dashboard for bank transaction tracking.

V3.0 Future Payment API integration

In the future and depending on user needs, we may fully integrate payment and bank transaction tracking directly into the SelfMade platform using the Payments API, instead of linking out to the Express Dashboard.

Design delivery and launch

I shared my designs with stakeholders and got feedback early and often, from low-fi wireframes through interactive prototypes. I was often able to jump directly to high-fidelity prototypes because I was using our design system components.

The V2.0 invoicing feature launched in early February 2023 and allows users to:

Connect to Stripe for secure direct deposits
Create and send custom invoices
Track invoice status and send reminders
Access Stripe Express dashboard from the invoice to view bank transaction tracking

Promo to connect to Stripe so user can then use SelfMade invoicing tool and get paid through direct deposit

Invoice builder tool where users can add services, prices, due date, and memo

Invoice management on project page where user can create, edit, send, resend, and manually change status of invoices

Ability to manually change invoice status and capture structured data on circumvention

Account settings where user can check and change Stripe connection

Client view of invoice and Stripe payment page

We link out to no-code Stripe Express Dashboard where earnings, transactions and payouts are tracked

Reflecting back and looking forward

I collaborated closely with my amazing product, engineering and research partners to right-size our efforts at the right time. Working with Stripe as our first integration was more complicated than we initially realized, which made it all the more invigorating to work on together to get it right.

We will be measuring success through adoption of invoicing and an increase in project activation rate. Invoicing creates a new avenue for tool usage that isn’t reliant on lead generation from SelfMade – freelancers can create projects and send invoices for clients and projects they already have independently. If all goes well, we anticipate expanding to the V3.0 iteration and building in some more automation to make invoicing and getting paid even easier.