Mobile, Webplatform, Design system
Affirm
Affirm is a leader in the Buy Now Pay Later space. This engagement covered their first international expansion, launching BNPL services in Canada and the UK simultaneously, including French language support for the Canadian market.
Team
Team
Product Designer (me)
Junior production designer (Forge)
Producer (Forge)
Affirm design manager
Affirm's in-house legal team
Experties
Product Design
Design System
Deliverables
Webplatform
IOS & Android
Design System (components)
Year
2022
2022
Project Summary
Affirm had an established design system. The goal was to work within it, extend it for international requirements, and build the component library covering the full expansion scope across web, iOS, and Android, reusing as much of the existing design as possible to maintain consistency across markets while meeting distinct legal and regulatory requirements in each new region.
I led the day-to-day design execution, working closely with an Affirm design manager, producer, and their in-house legal team, with a junior designer covering meetings during overlap hours across a 10-hour time zone difference. The 3-month engagement was completed in 5 weeks of design work. The remaining time was spent waiting on legal approvals from Affirm's internal team.
Website: Adaptive checkout
Working closely with the Affirm design manager, producer, and in-house legal team, I established a framework for legal, product, and go-to-market requirements for the Canadian and UK expansion. Canada and the UK were the first two pilot regions, each with distinct regulatory requirements that needed to be reflected in the checkout experience without fragmenting the product.
Platform & Mobile App: User Portal
Designed Affirm's user portal for cross-platform access across web, iOS, and Android, giving users a consistent experience to view transaction history, manage payments, and update settings regardless of platform.
Localization
Worked closely with the internal team to create and test a unified system for the language toggle switch across the product, ensuring French language support in Canada was consistent and reliable across every surface.
Documentation for handoff
New variants and styles were needed to support languages with higher character counts. French, in particular, required components to flex without breaking layouts designed for English. Each file was built using atomic methodology, starting with base components and adding variants for specific use cases and states. All components were designed to work within Affirm's existing design system, with thorough documentation for engineering handoff.
More projects
Earnin
With rapid growth and a major rebrand at the same time, the system had to keep up with both. Built the pattern library that unified mobile and web under a new identity while the product was still shipping.
EigenLayer
A bold visual identity is easy to build in isolation. Making it functional, accessible, and consistent across light and dark contexts at product scale is a different problem entirely.