Brandon E. B. Ward
04

Porte — tested before a line of code.

Populous's first mobile-only bank had to stand out in a saturated market, for a generation it had never designed for. We researched and tested every layer, from app to card to mailer to brand, before a line of code was written, and shipped a 1.0 that earned 4.8 stars.

Porte's App Store listing — a 4.8★ mobile banking app with screenshots of the home dashboard, card, fee breakdown, and charity giving.
Client
Porte (Populous)
Role
Director of UX
Timeframe
2019
Capacity
Lead 3-person UX/UI team
01Context

A fifty-year-old bank, designed for nobody under forty.

Porte's parent, Populous, had been in financial services for more than fifty years. In all that time it had never built anything for the way younger people actually bank: classy, elite, mobile-first, on their own terms.

Porte was the answer: a mobile-only bank built for the underbanked and aimed squarely at college students. Nobody wanted a copy of the old bank. The goal was the account those students wished existed: one that helped them understand and grow their money, instead of just holding it.

The brief was a hard one. Launch a brand-new mobile bank into a market already full of polished apps, and give a generation that had never been Populous's customer a reason to choose it.

02The problem

In a saturated market, "another banking app" is dead on arrival.

Every neobank and legacy player already had a mobile app, most of them competent. A merely adequate Porte would have been invisible. It had to give people a reason to switch.

And it was being built by a company with deep banking experience but no track record designing for this customer. The pull to ship a thin first version and iterate later was strong. In a crowded market, that's fatal.

We didn't need another banking app. We needed the bank we all wished we'd had.

So the job was to launch a fifty-year-old institution's first mobile-only bank into a crowded market, and give a generation it had never served a reason to pick it over apps they already trusted.

03The approach

Know the customer cold before you build anything.

The obvious path was to design from the team's vast and tried instincts and benchmark against the category leaders. We did the opposite. Before committing to a direction, we went to the customer: on-premise intercept interviews about how they bank, what they value, and what they want from their money.

Then we tested relentlessly, at every layer. We signed up for every major mobile bank and ran real banking tasks through each to find where they shined and where they failed. We ran information-architecture studies to shape the flows, usability rounds on low-fidelity prototypes, and — before a single line of code — repeated studies against the high-fidelity prototype with real customers, on-site and remote, to settle IA, UX, UI, accessibility, and usability up front.

The research worked so well the engagement grew: we went on to design and test the card itself, the mailer and unboxing, the brand, the teaser films, the marketing site, and the copy. By the end, every member of the team felt they knew the customer personally: designer, PM, developer.

Chose to
Test every layer before writing code. The high-fidelity prototype had to pass real-customer studies before a line was built.
Chose to
Design the whole experience, not just the app. Card materials, the mailer unboxing, the brand, the teaser films, the copy: all researched and tested.
Chose to
Train my two designers as researchers while we ran the studies, so the people designing Porte understood its users firsthand, not from a report.
Chose not to
Ship design or code before the experience was validated. Buildout started only after the prototype tested clean.
Chose not to
Let our own taste decide. When we argued about colors, fonts, or features, we went back to the research and let the users settle it.
Chose not to
Copy the category leaders. We tore their apps apart to learn from their mistakes.
04The work

The whole thing, end to end.

We researched and designed the entire Porte experience, end to end. Here are three pieces of it.

Two Porte app screens — the home dashboard with available balance, savings, a charity the user supports, and an under-budget progress bar beside a live activity feed; and the spending Tracker showing money in, money out, and the month's cash flow.
01

The bank, designed before it was built

The product real customers tested before any code: a home that surfaces savings, the charity you support, and how far under budget you are at a glance, and a spending Tracker that turns money in, money out, and monthly cash flow into something you actually understand.

A close-up montage of Porte's money tools — a spending breakdown donut, a debt-payoff projection counting years and interest saved, linked checking and savings accounts, a payments calendar, and a purchase-based rewards balance.
02

Tools for growing money

Up close, the depth behind the dashboard: debt-payoff projections that count the years and interest you'd save, spending broken down by category, linked outside accounts, a payments calendar, and rewards earned on what you already buy.

Porte's brand system — the black-and-gold Porte VISA card and the "Banking built for you" onboarding flow on a phone, beside the "Your door to stress-free banking" marketing site on a laptop with App Store and Google Play badges.
03

The brand, the card, and the launch

The identity that tied it together: the black-and-gold Porte card, the onboarding, and the marketing site, each researched and tested for imagery, tone, and message so the whole funnel spoke with one voice.

We designed more than a first release could carry. Several of the most ambitious features were genuinely hard to build and didn't make 1.0. Many still sit in the backlog years later. But they were researched and designed, so the roadmap was drawn long before the engineering caught up.

05Outcomes

A fifty-year-old bank's first mobile app shipped to 4.8 stars, and a lighter support load than its older siblings.

App Store rating
4.8 ★
iOS, across 3,400+ reviews; 4.7★ on Android.
Usability
85%+
SUS scores in testing; 4.5/5 on aesthetics.
Reviews
12,000+
Combined across iOS and Android since launch.
06Reflection

What I'd do differently, and what stuck with me.

What I'd do differently: we trusted third-party vendors who swore their micro-apps and APIs would be ready by ship date. They weren't. When the devs went to build what we'd designed, the tools couldn't support it and offered no APIs to hook into, so 1.0 shipped with their clunky embedded micro-apps bolted in, unstyleable, unable to match Porte's aesthetic and quality. The result was a Frankensteined first version that compromised the very UX and UI we'd tested so hard to get right. The vendors fixed it eventually, and Porte looks great today. But I'd never again design against a capability a vendor only promises to have later.

What surprised me: how low the bar actually is. It is not hard to build a banking app that looks and feels the way people want, and yet so many feel two decades old. The reason, I learned, is rarely the design team; it's the archaic internal systems and third-party micro-apps banks are forced to build on. Even in 2019, making something modern out of that legacy plumbing was like pulling teeth. The design was the easy part. The plumbing underneath was the fight.

What I took with me: this was the project where we stopped saying "MVP." Minimum viability doesn't make a good product. We shipped a minimum lovable product instead, a "cupcake": small in scope but complete across every layer, with enough great UX, reliability, and polish to be genuinely loved at 1.0. We've run on the cupcake, birthday-cake, wedding-cake model ever since. Ship something small, whole, and lovable.