Refactoring a Web Payments Checkout Flow From a Monolith Into a Stand-Alone Service

Client
WeTransfer
Role
Tech Lead
Back-end Developer
Technologies
React
TypeScript
Stripe SDK
NestJS
Auth0
Kubernetes

WeTransfer is a file sharing service with a dual revenue model. WeTransfer earns money by users buying subscriptions and by advertisers placing wallpaper ads, which show up to users while transferring files.

With a big strategic focus on increasing paid subscriptions in 2024, our product team wanted to improve the check-out flow — too many users dropped off during the payment process and didn't complete their subscription. Our task: Shorten the checkout flow's UX by re-ordering and removing steps as well as implement some design changes.

Role & Contribution

My biggest impact on the project, besides of building the back-end micro-service powering the new flow, was to remove ambiguity. I took on a technical leadership role in the new team and helped setting the project up for success by documenting scope, work items, a stakeholder dependency map and owning major parts of our technical design document. All of these items functioned as key reference point throughout the project. I also optimised our testing and QA process by pushing the team to agree on a "definition of done" which later shaped test scenarios and helped with delivering a stable product.

Checkout flow

Checkout Landing Page

Technical Challenges

The technical complexity of the project was two-fold. On one hand, we decided to combine the re-design with a refactor, which required us to move all existing logic from a legacy monolith codebase into a new stand-alone service. On the other hand, the checkout flow relied on multiple third party services and internal micro-services, which required deep domain knowledge to be acquired quickly by our new team.

Results

Our refactor resulted in an 12% uplift of paid subscriptions globally. I built the back-end service while learning a new framework (NestJS) under the mentorship of a team-member of our Auth & Billing team, onboarded the service to our Kubernetes infrastructure and set up horizontal auto-scaling. During my work on the service, a total of 9 bug tickets where created for it, which I was pretty happy with.

Read More

Streamlining the feedback-loop between creatives and their clients with Portals & Reviews

Crafting new features in a legacy codebase, with a focus on real-time user interaction

Why we’re called Studio F3 - the extraordinary story of Dame Stephanie Shirley