The Vision
Creating the Next Generation Credit Card
In 2021, Railsr set out to create a credit card as a service product for the US market. The goal was to create a product that could compete with the big players in the market while also offering a unique user experience that only an Embedded Finance platform could provide. Our product would allow customers to own their financial experience within their own application. For the first time.
The Challenge
Focus on the Developer Experience
Our challenge was to reduce the time-to-market for our customers. Our banking and credit APIs had been released, but:
Customers were slow to launch as they were entangled in regulatory requirements
If they made it to launch, customers were at risk of building financial products that did not meet industry standards from an App Store, Legal, and ADA perspective
The Role
Senior Product Designer
As the lead designer, my contributions spanned the entire process. Some of my responsibilities included user research, wireframing, prototyping, designing the final screens, creating the design system, and producing the final UI Kits.
In this role, I focused on documenting our API capabilities from a UX/UI standpoint. Accessibility design and legal compliance were of the utmost importance.
For accessibility, we held our designs to the WCAG 2.1 AA Standard to ensure people from all walks of life could use our financial solutions. We followed Apple’s Human Interface Guidelines to guarantee customers’ applications would be accepted into the iOS App Store. For our legal and compliance, we validated all designs with internal and external counsel to ensure all experiences were compliant and in accordance with industry regulations.
The Process
The 5 D’s
The Solution
A Three-Pronged Approach
The solution was to create a fully integrated launch plan by connecting the dots between our best-in-class APIs and the end-user experience. We could slash the traditional time to market from years to weeks. We created a comprehensive launch guide that tackled the problem using a three-pronged approach.
We refined our Developer Documentation for our APIs
Designed a UI Kit to be paired alongside it
Developed an API Dashboard that housed the entire experience.
This case study will focus on the UI Kit. If you would like to learn about the API Dashboard, please see the API Dashboard Case Study.
By providing UI Kits to our customers, we could show them exactly what was needed to implement a successful Credit Card product. In the UI Kit, we covered every user flow needed, from Onboarding to Payments and everything in between.
Click on the button below to see the CcaaS Prototype in action.
The UI Kit included user flows for onboarding, balances and transactions, card management, payments, rewards and settings. The UI Kit was designed to be intuitive and easy to use, focusing on providing customers with a seamless experience between the backend APIs and the front-end user experience.
We provided our clients with a color-coded step-by-step guide on what to include and what could be customized for our Credit Card as a Service solution. These included:
Legal Requirements
Accessibility Requirements
Design Details
API Integration points
By highlighting crucial elements within the design, we were able to help our existing clients launch in half the time. We could scale this process to multiple clients, reducing the amount of customer success personnel needed.
As the product gained popularity, we continued to iterate and improve the UI Kit based on customer feedback. We launched a second and third version of the UI Kit in quick succession, fine-tuning details of the existing design and adding features to the kit. We launched a rewards program that allowed customers to attribute points to an internally built rewards engine that could be customized to their specific user base, further driving engagement with the product.
By mid-2022, the Railsr credit card as a service product had become one of the most popular options in the US market, with a loyal customer base and a reputation for providing a next-generation user experience. The sales team showcased the product to numerous leads, landing two of our largest clients (undisclosed international Airline and undisclosed nationwide Supermarket) with an estimated combined revenue of $105MM.
The success of the product was largely attributed to the comprehensive UI Kit, which provided customers and, in turn, end users with a seamless experience when managing their credit cards. The onboarding process was smooth and intuitive, allowing users to set up accounts and use the product quickly. The balances and transactions section provided users with detailed information about their spending, while the card management section made it easy to manage their cards and make payments.
To learn more about the accompanying API Dashboard that launched simultaneously, please see the API Dashboard Case Study. To learn greater details about the success of the UI Kit, continue reading below.
Credit Card -
End to End Design -
iOS Design -
Fintech -
B2B -
Credit Card as a Service -
API -
UX/UI -
Credit Card - End to End Design - iOS Design - Fintech - B2B - Credit Card as a Service - API - UX/UI -
UI Kit
Onboarding
Prototype
Onboarding
UI Kit
Card management
UI Kit
Balances and Transactions
UI Kit
Payments
Prototype
Payments
UI Kit
Rewards
UI KIt
Settings
Overall, the Railsr CcaaS UI Kit was a great success due to its comprehensive documentation and easy-to-follow instructions, which provided customers with a unique and intuitive experience when managing their financial services.