What is Railsr?

Railsr is the world’s leading Embedded Finance platform. We provide FinTechs and brands the tools to launch a best-in-class financial experience.
 


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.

 

(Above) A slice from the UI Kit. This user flow shows an existing user with full user profile data signing up for a Credit Card.

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

(Above) A slice from the UI Kit. This user flow shows an existing user with full user profile data signing up for a Credit Card.

 

Prototype

Onboarding

 

UI Kit

Card management

(Above) A slice from the UI Kit. This section shows a few of the essential Card Management user flows.

UI Kit

Balances and Transactions

 

(Above) A slice from the UI Kit. This section shows a few of the essential Balances and Transactions user flows.

 

UI Kit

Payments

 

(Above) A slice from the UI Kit. This section shows a few of the essential Payments user flows.

 
 

Prototype

Payments

 
 

UI Kit

Rewards

(Above) A slice from the UI Kit. This section shows a few of the essential Rewards user flows.

 

UI KIt

Settings

(Above) A slice from the UI Kit. This section shows a few of the essential Settings user flows.

 

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.