Study
Case Study 02
Client
Terafina, Inc.
Discipline
Fintech
Discipline
Systems

Tera­fina

Applicants weren't finishing Terafina's account-opening flow.

Terafina makes account-opening software for banks and credit unions, used online, in call centers and in branches. It handled a wide range of financial products, but growth had stalled. The product didn't feel trustworthy, and it was hard to use.

Focus
  • Design system
  • White-label configuration
Scope
  • Web
  • Tablet
  • In-branch
Context
  • Account opening
  • Abandonment down 12%
Terafina on MacBook Terafina on iPad Terafina on iPhone
The Terafina platform before the redesign, on a phone, a tablet, and a desktop. The interface looks cluttered and hard to use.
The platform before the redesign.

Applicants couldn't tell what they were looking at.

The platform was built to be flexible and customizable, but the presentation layer hadn't kept up. Screens were cluttered and inconsistent. Applicants struggled to understand what they were looking at, let alone finish an application.

It also made the product harder for banks to buy and roll out.

The goal was a product clients could adopt and applicants could trust.

I set out to make the platform clearer and more trustworthy, and easier for clients to brand and roll out.

That meant rebuilding the presentation layer and simplifying the application flows. Branding and configuration needed a more flexible system too.

We started at the foundation and let the system scale from there.

I rebuilt the system from its atomic elements up, so each decision carried across the whole product instead of living on one screen.

That made the front end consistent without touching the Salesforce platform underneath it.

A progress stepper told applicants where they were and how much was left.

I added a progress stepper on every device, so applicants could see where they were and what was left. I reworked the hierarchy and content so important information came first instead of getting buried.

A white-label system let clients apply their own branding without much development work. That made the product simpler to implement and easier for new clients to adopt.

Terafina style guide: the typography scale
Terafina style guide: the color system
Terafina style guide: the progress stepper component
Terafina style guide: general UI components
Terafina style guide: form and card components
Terafina style guide: dropdown states

Abandonment dropped 12% after the rebuild.

The platform got easier to understand, and both applicants and clients trusted it more.

Fewer applicants gave up partway through, because the flow was easier to follow and every screen behaved the same way.

The branding system made it easier for new clients to adopt the product without adding implementation work.

The Terafina platform after the redesign, on a phone, a tablet, and a desktop. The interface is cleaner, more consistent, and easier to follow.
The platform after the rebuild.

Clarity that lives in the system holds up when the product changes.

Next project

The component reference for the contractor app on a laptop: token documentation for the status chip and the alert, each shown in light and dark

03 / 07AI • Systems

Designing with AI

Claude writes the code and I make every design decision.

That's how I built a design system for web, iOS and Android, and the contractor app that runs on it.

Focus
  • Design system
  • Production app
Scope
  • Web
  • iOS
  • Android
Context
  • Claude Code
  • Figma
View case study: Designing with AI