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. Copying the old bank wasn't the ambition. The ambition was the account those students wished existed, one that helped them understand and grow their money instead of just storing 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, named clearly

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 be invisible: it had to be a reason to switch, not a box ticked.

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.

The problem: launch a fifty-year-old institution's first mobile-only bank into a saturated market, and give a generation it had never served a reason to choose it over the 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 the team's taste decide. When we argued over colors, fonts, or features, the user's needs settled it, not egos.
Chose not to
Imitate the category leaders. The competitive teardown was to learn where they'd gone wrong, not what to copy.
04The work itself

A whole experience, not a single screen.

The work was the entire Porte experience, researched and designed end to end. Three pieces of it stand in for the rest.

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 that grow money, not just hold it

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 reverse. What I carried forward.

The decision I'd reverse: 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.

The surprise: 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 constraint was never the design. It was the foundation.

What I carried forward: 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 whole and lovable, never something barely viable.