Helping people understand their money without needing to be experts.

I’m a hands-on product designer with 25+ years in financial software, designing across web and mobile for consumers and the people who work at banks and credit unions. My work ranges from online banking and teller systems to AI-powered executive dashboards and the design systems behind them.

Web and mobile

Redesigning money apps

I brought modern patterns from social media apps into consumer and business banking apps — organizing financial data and processes into cards people can relate to, instead of defaulting to endless spreadsheet-style lists.

View work

AI and data visualization

AI insights for execs

I designed an executive dashboard platform that shows which clients need attention, why, and what to act on — with KPIs, data visualization, and scannable AI analysis making connections at a scale that would otherwise be nearly impossible.

View work

Design systems

Creating cohesive apps at scale

I created the design system behind 100+ Fiserv products, including many of its flagship apps. They look and work like one family, with reusable patterns that scale to thousands of pages and fields, and a white labeling system that adapts to any client’s brand.

View work

More work

Simplifying complex processes

I redesigned teller, lending, and card administration processes to flatten the learning curve for new users. The right information appears at the right time, in a way that feels familiar to anyone who uses modern consumer apps.

Variables Editor

I designed and built a Figma plugin with Claude to replace Figma’s built-in variables editor — with Excel-style cell selection, multi-cell copy and paste, and transposing rows and columns.

All screens use realistic mock data or placeholder content.

JARON BROWNELLMONEYNext: AI insights →

Web and mobile

Redesigning money apps

Viewing, tracking, and moving money, designed like modern consumer apps.

My role

Design lead

I led the research and full redesign of consumer online and mobile banking apps and a company card and expense app, collaborating with a team of designers, analysts, and engineers.

Users

Consumers at banks and credit unions (online and mobile banking), and employees at small and medium businesses (company card and expense app)

Constraint

Front end only: the banking redesign replaced two aging interfaces on top of the existing back-end systems

Platform scale

Online and mobile banking

18Msessions a month

2Mtransfers a month

Company card app

160financial institutions

Online banking on desktop: account cards, transactions, and quick transfer

Online and mobile banking, desktop and phone, at the same scale

The problem

More than 95% of bank customers have fewer than five accounts, yet banking apps still gave every number the same weight — page after page of spreadsheet-style lists, with nothing to show people what needed their attention.

The goal

Organize financial data and processes into familiar cards people can relate to, with a clear hierarchy of what matters most.

My approach

Start from what’s familiar. I brought in patterns people already knew from social media apps.
Test with real people. I put working prototypes in front of clients and internal experts at least once a month.
Find the real problem. I looked past what people asked for to the design and business problem behind it.
Let research shape the details. The four most common transfer amounts became money-shaped icons.
Iterate quickly with AI. On the company card app, I used Claude to work through specifications and feedback and explore design ideas.
Build for reuse. Patterns went into the shared design system, so web, mobile, and other products stayed consistent.

Key insight

People don’t naturally think about money in rows and columns. They think spatially, in buckets and categories.

Card layouts give each bucket its own space, so people can weigh them side by side, like two pieces of paper on the kitchen table.

Online banking

Full redesign, focused on the account list, the transaction list, and money transfers.

Mobile banking

Company cards and expenses

The same familiar approach, in an app for company cardholders to track spending, log expenses with receipts, and make payments.

Outcome

One experience
Online and mobile banking moved from two aging systems to one consistent, card-based experience across devices.
Design direction
As design consultant on the company card app, I set the design direction and delivered complete specifications for the product team to take to their users.
Design system
Card layouts, stacked rows, and drawers from this work became part of the shared design system.

NextAI insights for execsI designed an executive dashboard platform that shows which clients need attention, why, and what to act on — with KPIs, data visualization, and scannable AI analysis making connections at a scale that would otherwise be nearly impossible.View work

JARON BROWNELLCOMPLEX PROCESSESNext: Variables Editor →

Professional tools

Simplifying complex processes

Workflows that feel familiar to anyone who uses modern consumer apps, replacing aging interfaces built on mainframe green screens.

My role

Design lead

I set the design vision for core banking, branch, and lending apps, and led the design of company card administration, collaborating with teams of designers and analysts.

Users

Tellers, branch managers, loan officers, and other employees at banks and credit unions, plus administrators managing company cards

Scope

Teller transactions, approvals, customer records, lending, account opening, and card administration

Platform scale

Core banking platform

81Mtransactions a month

$23Bin deposits

$19Bin loans

Teller transactions

The problem

Teller roles have high turnover, so there was always someone new learning the software with customers waiting in line. The forms were dense and unstructured, in Windows apps that were just screen-scrapes of decades-old green-screen terminals.

The goal

Flatten the learning curve with a modern, cohesive family of web apps, without changing the existing back-end systems.

My approach

Start where the work happens. I went on site to watch tellers, new accounts representatives, and loan officers at work and test designs with them. Seeing what happened before, during, and after our software showed where they were working around it and how we could improve the whole experience.
Get direct feedback. I led online feedback sessions with clients and internal experts at least once a month, testing everything from low-fidelity prototypes to working versions, and folded what we learned into the next iteration.
Reuse proven patterns. Patterns that tested well went back into the design system, so the core stays efficient, clear, and familiar from one app to the next, even when apps have unique requirements.

What we saw on site

Sticky notes. Employees wrote down a couple’s details so they wouldn’t have to ask the customers twice. We put both people’s information on one page, with a button for when the spouse’s details are the same.

Paper everywhere. Employees relied on printed cards and other printed material, and even wrote their own manuals. We put instructions on the workflow pages and tooltips by the fields that need them, and created help content that banks can add their own policies to.

Glasses on, glasses off. Older employees had trouble with text size, taking their glasses on and off and tilting their heads to read the screen. We used type ramps from modern consumer apps, along with formatting, to establish hierarchy and improve readability.

Ugly screens. Employees were embarrassed to share their screens with customers, because the software looked dated and didn’t reflect the bank’s brand. We gave the apps a modern consumer look, with Fiserv/Valencia branding as a baseline and levels of white labeling, starting with a logo and two brand colors that needed no custom coding.

Key insight

Workarounds reveal what people actually need.

Sticky notes, printed cards, and homemade manuals showed us what employees needed and where they needed it. Each redesign puts the frequent tasks first and brings the rest into the app, one step away.

Branch and teller

Customer records

Lending

Account opening

Card administration

Tools for business administrators to set up cards, manage cardholders, and handle approvals and requests.

Outcome

Reuse
The teller designs were reused for a second teller system’s back end, delivering the same benefits while saving time, effort, and money.
Design system
Patterns refined in these apps went into the design system, so other product teams could start from proven work.
Delivered
As design consultant on the company card app, I delivered complete specifications for the product team to take to their users.

NextVariables EditorI designed and built a Figma plugin with Claude to replace Figma’s built-in variables editor — with Excel-style cell selection, multi-cell copy and paste, and transposing rows and columns.View work

JARON BROWNELLDESIGN SYSTEMNext: Complex processes →

Design systems

Creating cohesive apps at scale

Proven patterns and white labeling for 100+ Fiserv products, from flagship apps to internal dashboards.

My role

Originator and design lead

I created the Valencia design system and continue to lead its design, working as a design consultant to product teams.

Scope

Color system, custom icons, components, patterns, branding and white labeling, accessibility, documentation, and realistic demo data

Built for

Cohesive, connected experiences across apps. The system isn’t prescriptive: it offers options and proven patterns for consumer, business, and institution users, so apps with their own structure still feel like one family.

Impact

100+products on the design system

2019Best-in-Class core banking (Aite Group)

The default Fiserv theme

The problem

Fiserv grew through acquisitions, and its apps came with different looks, workflows, and incompatible back ends, yet the same clients and often the same people used them side by side. My pitch was “One Fiserv in our software.”

The goal

A shared experience across every app a client uses, from a consumer’s online banking to the teller or loan officer helping them in the branch.

My approach

Show the vision. I won Fiserv’s Innovative UI Design Contest with the original concept, then presented it to my business unit’s executive council and to CEO Jeff Yabuki and his senior executive committee.
Prove it on flagship apps. As a design consultant, I work with product teams on Fiserv’s highest-priority apps, and with Global Brand and accessibility teams on branding and white labeling.
Bring product teams along. I reached out to teams across the company to introduce the design system, answer their questions, and bring their feedback and input back into it.

Key insight

Consumer patterns work at any scale.

Enterprise apps carry far more on each screen, but they’re used by the same people who bank on their phones. Teller roles have high turnover, so that software has to be as easy to learn as a consumer app. Familiar patterns make that possible, and complex workflows are built from simple ones, connected together.

Where it came from

My winning entry in Fiserv’s 2014 Innovative UI Design Contest had two parts: the next-generation banking software they asked for, and the design system I thought they needed. The first became Engage. The second became the Fiserv Design Language, later renamed Valencia.

Contest entry2014, top winner
JUX and EngageA division-level design language, starting with the Engage banking app
Fiserv Design LanguageThe design system behind 100+ Fiserv products
ValenciaRenamed for the orange of Fiserv’s logo

One family of apps

Acquired apps often overlapped or competed, and each solved the same problems its own way. Shared components and proven patterns, many refined in banking and branch apps, give every team a common starting point.

Branding and white labeling

Valencia’s default theme aligns closely to the Fiserv brand, and the color system is structured to adapt to any client’s primary and accent colors. Accessibility comes from design system rules and alternate themes, because a client’s brand colors can’t simply be changed for contrast.

Proof outside banking: EZPass

I was recruited to start and lead the Fiserv Design Studio, an internal design agency meant to bring design in-house and replace millions spent on outside agencies. For an EZPass government contract bid, I was the sole designer on the prototype, collaborating with a business analyst on requirements.

The design system accelerated the work, with proven patterns and a flexible color system handling the foundations. That left my creative time to focus on improving workflows, designing custom data visualizations, and distilling everything into high-value experiences like the Quick View dashboards.

Design win, bid loss

The EZPass representatives received the design extremely well and called it out as superior to the other submissions. Fiserv lost the bid because another company already had the technical infrastructure in place from a previous contract.

Outcome

100+ products
The design system grew from a contest entry into the system behind 100+ Fiserv products, including many of its flagship apps.
Best-in-Class
Aite Group named Fiserv Best in Class in its 2019 core banking evaluation, citing a unified user experience and consistent look and feel across products. The design system was a key factor.
After the merger
After the Fiserv–First Data merger, I worked with app teams to bring legacy First Data apps onto Valencia within their existing technology stacks.

“My thanks for the leadership you’ve shown in the creation of the new design system. You’ve been the primary designer for a new user experience that will affect thousands of Fiserv clients and employees for the next ten years and more. I’ve been very pleased with your leadership, attitude, and communication skills.”
Kent WhiteVP, Product Management, Fiserv

NextSimplifying complex processesTeller transactions, approvals, customer records, lending, account opening, and card administration.View work

JARON BROWNELLAI INSIGHTSNext: Creating cohesive apps at scale →

AI and data visualization

AI insights for execs

A dashboard platform that shows executives which clients and products need attention, why, and what to act on.

My role

Design lead

I led the research and design for the platform, from early concepts through production, and mentored a second designer.

Users

Fiserv executives, relationship managers, and account managers

Scope

Client and product dashboards, client and product portfolio dashboards, the Client and Product Health Indexes, dimension scores, KPIs, AI analysis, and data visualization. Every screen uses realistic mock data generated with Claude.

Platform scale

2dashboards in use

Thousandsof clients and products

6health dimensions per client

Key Themes: a bubble chart of problem themes by clients affected and trajectory, in four exposure zones

Key Themes, on the client portfolio dashboard

The problem

Client and product data lived in multiple disconnected systems, so executive reporting meant manual spreadsheets and lots of analyst time and delays. With thousands of clients and products, the connections across that data were nearly impossible to make by hand. AI made that analysis feasible, which raised a design problem: what AI does well, and where traditional dashboard patterns add value alongside it.

The goal

Show executives which clients and products need attention, why, and what to act on, in views they can scan.

My approach

Combine AI with proven patterns. AI finds the connections, and KPIs, charts, and dashboards make them easy to scan.
Distill, then drill down. Progressive disclosure follows how each role works. Executives get a high-level view to spot problems, decide which fixes move the most clients back to health, and see what’s working. Account managers and relationship managers go deeper on the clients they own, down to the feedback, emails, and support tickets behind each score.
Treat AI text as UX. I designed AI insights to be scannable and easy to read, with a clear visual hierarchy, just like any other design element. Each insight has a headline that states the point and a description that carries the reasoning.
Answer relevant questions. Every element answers a question an executive or manager is actually asking.
No black boxes. Every score opens to the evidence and formula behind it.
Color sets hierarchy. Named statuses and a branded color scale highlight what matters most, with the same meaning across scores, KPIs, charts, icons, and notifications.
People decide what to act on. AI recommends actions, and executives and managers choose which to follow up on by flagging or pinning them.

Key insight

A client’s health can be distilled into one score, broken down into what drives it.

I brought in the concept of a Client Health Index, based on my research into Dun & Bradstreet (DUNS) reports on businesses. It organizes performance, metrics, and analysis into six dimension scores, in categories executives already use. Each answers one question, like “How satisfied is the client?”, and is backed by real data.

Portfolio dashboard

Executives start with a high-level view of their clients: how healthy they are, where they’re moving, and which ones need attention first. Each tab adds a different perspective, with AI insights from overall health through to what to act on.

Client dashboard

Account managers and relationship managers own a set of clients, so this is where they focus: moving unhealthy clients back to health, keeping healthy clients healthy, and finding the healthiest clients to become reference and ambassador clients.

AI insights people can scan

AI text is a user experience, and it needs the same hierarchy as anything else on the screen. When each insight makes one point, insights can be ranked and the most important one can lead. A notice that a client is leaving doesn’t stay buried in a paragraph about renewal risk. It becomes the top insight.

How I used AI to work

AI accelerates design iteration at every stage of my work.

Understanding the problem. AI broke down complex specs and source data, and virtual research with customer avatars confirmed and clarified what I’d learned directly.
Exploring options. Claude let me compare directions quickly, such as five alternative layouts for the client detail page, before committing to one in Figma.
Working at scale. Claude drove updates across screens and slides in Figma, and generated realistic mock data, managed in my own plugin, Variables Editor.

Outcome

In use
The client and portfolio dashboards are in use at Fiserv, replacing manual spreadsheet reporting with analysis across thousands of clients, at a level that wouldn’t be feasible without AI.
CHI
The Client Health Index took hold among key stakeholders, and the whole project became known as CHI. The entire dashboard is built around the concept, and we later applied it to products as the Product Health Index.
AI as UX
I documented the structure for AI insights as UX guidelines, giving the team a model for AI output people can scan and rank.

NextCreating cohesive apps at scaleI created the design system behind 100+ Fiserv products, including many of its flagship apps. They look and work like one family, with reusable patterns that scale to thousands of pages and fields, and a white labeling system that adapts to any client’s brand.View work

JARON BROWNELLVARIABLES EDITORNext: About →

Building with AI

Variables Editor

Editing Figma variables like a spreadsheet, live, inside Figma.

My role

Designer and builder

I defined the problem, set the requirements and milestones, designed the interactions, and tested every build hands-on. Claude wrote the code.

Scope

Spreadsheet editing of live Figma variables, color and alias pickers, and component generation

Platform

A private Figma plugin, built on a locked-down corporate PC with nothing installed

Variables Editor with the color picker open over the grid

The grid with the color picker open

The problem

My design tokens and mock data live in Figma variables. That data was far easier to generate in Excel, but getting it into Figma and keeping it up to date was too time-consuming and error-prone.

The goal

Replace Figma’s built-in editor with Excel-style editing — cell selection, multi-cell copy and paste, and transposing rows and columns — to maintain the design system and color system tokens, as well as mock data for personas and project-specific layouts.

Research

I reviewed twelve free and paid plugins, and none could automate mock data across multiple pages, designs, and components.

The constraint

Company security policies ruled out paid plugins and Figma’s AI features.

Key insight

With Claude, I could build the tool Figma was missing.

I’d used Claude to code a few smaller projects, so I tried building my own plugin. It met my original goals, and I can extend it whenever I need more.

How it evolved

Import and exportI first built editors for Figma’s exported JSON, as a tree and then a grid. Easier than raw JSON, but every re-import broke the bindings.
Use a pluginA Figma plugin edits the live variables directly, so nothing is exported or re-imported, and every binding stays intact.
Build the pluginI wrote a build spec and built it in milestones with Claude, testing each one in Figma.

Design decisions

Variables are rows, modes are columns, or transposed, with Excel-style selection, arrow keys, block copy and paste, and undo.
Staged edits: changes wait for Apply or Discard, with auto-save off by default until write-back is fully trusted.
Respect the file: nothing sorts alphabetically, and pasted blocks land exactly as displayed.
Private layout: column widths and order are saved for me alone, so teammates and Figma’s own panel never see them.
Native look and feel: built with Figma’s own color tokens, type, and density.
Generate per mode: one action creates a component instance for each record.

Outcome

One grid
A dataset that used to be about 100 lines of nested JSON, edited by hand and re-imported with broken bindings, is now a grid I edit in place.
Round trips
Round trips to Excel are copy and paste, and one action turns a collection into a full set of component instances.
Next on the roadmap
Formulas, fill-down, and find and replace.

NextAboutHow I work, where I’ve worked, and how to reach me.Read more

Product design · Fintech

Resume

Product designer, fintech.

Orlando, Florida area · Remotejaron.brownell@outlook.com jaronbrownell.pages.dev

Download PDF

Summary

Hands-on product designer with 25+ years in financial software, designing across web and mobile for consumers and the people who work at banks and credit unions. My work ranges from online banking and teller systems to AI-powered executive dashboards and the design systems behind them.

Experience

Homeschool Essentials

2023 – present

Design Director

Lead design for a small consumer company, including a conversion-focused website redesign and ad creative for magazines and social media.

Fiserv

1999 – present

Advisor, UX Design

AI insights for execs Design lead

Led research and design from early concept to production for an AI-forward platform that scores client health across six dimensions for Fiserv executives, relationship managers, and account managers.
Client and portfolio dashboards are in use at Fiserv, replacing manual spreadsheet reporting.
Structured AI analysis into short, ranked text insights executives can scan in seconds.
Designed and built, with Claude, a Figma plugin that replaces Figma’s built-in variables editor with Excel-style editing.

Consumer banking and lending apps Design lead

Led a team of designers and analysts redesigning online and mobile banking, at 18M sessions and 2M transfers a month, along with teller, customer record, lending, and account opening apps on a platform handling 81M transactions a month.
Designed new member onboarding: a guided account opening flow consumers can complete on their own or with a branch employee.
Studied tellers, new accounts representatives, and loan officers on site, and led feedback sessions with stakeholders and client users at least once a month.

Company card and expense app Design lead

Redesigned a company card platform serving 160 financial institutions: card setup, transactions and receipts, expenses, approvals, and payments. Delivered complete design specifications.

Valencia design system Originator and design lead

Grew from my winning entry in Fiserv’s 2014 Innovative UI Design Contest, presented to the CEO and senior executive committee.
Adopted by 100+ products, and a key factor in Aite Group’s 2019 Best-in-Class core banking rating.
Built brand, white-labeling, and accessibility rules with Global Brand and accessibility teams. Brought legacy First Data apps onto the system after the merger.

Fiserv Design Studio Design lead

Recruited to start and lead an internal design agency. Sole designer on a prototype for an EZPass government contract bid.

Design leadership

Mentored designers across teams, taught business units about design thinking and accessibility, and worked with teams across the United States, India, New Zealand, Australia, Poland, and Scotland.

Earlier at Fiserv Design lead, concept designer, UI developer

Designed flagship apps and consulted with business units across the company.
Originated EasyAccess, a proposal to unify 15+ financial transaction applications into one program. It became a core product, our interface to Fannie Mae and Freddie Mac.

Consultant

1996 – 1999

Rewrote AT&T’s payment-exceptions product as part of Y2K fixes, processing 400,000 exceptions, or $500M, a month.
Designed custom financial tracking software, marketing materials, and in-house software for small and large businesses.

Skills

Product and interaction design · Visual design · Web and mobile · Onboarding · Design systems · Data visualization · Prototyping · Usability research · Accessibility · AI-assisted design

Tools

Figma · Claude · Adobe Creative Cloud (Photoshop, Illustrator, InDesign, Premiere, After Effects) · HTML, CSS, JavaScript

Education

Oral Roberts University · Business Marketing, minor in Music

Product design · Fintech

About

Helping people understand their money without needing to be experts.

Business users are people too

Consumer apps usually get the polished, approachable interfaces, and business apps get denser, more complex ones. But a teller, a loan officer, or an executive is the same person who banks on their phone at night. They all deserve software that makes sense the first time.

Teaching came first

My first job out of college was teaching software, often to people retraining after losing lifelong sales and factory jobs. Many had never turned on a computer. That’s where I learned to design for people who aren’t experts.

Make the frequent things easy, and the occasional things easy to get to.

Teaching is still in my DNA

It’s how I lead. I’ve mentored designers on every team I’ve been on, and taught business units about design thinking and accessibility.

This double diamond comes from a deck I use to show development teams and executives where design fits in the development process.

“Jaron has a real talent for people leadership.”
Mary BushDirector, Software Engineering, Fiserv

Double-diamond design thinking diagram: discover, define, design, and validate

Financial software doesn’t have to be boring

Microsoft Money was one of my earliest inspirations that financial software didn’t have to be boring or utilitarian. Its inductive user interface gave each screen one clear focus, with guidance built into the product.

I put that to work in two proposals I made on my own initiative. They led to the 2014 Innovative UI Design Contest, which I won, and to the design system now behind 100+ Fiserv products.

EasyAccess
I proposed unifying more than 15 financial transaction applications into one step-by-step program. It became a core product, our interface to Fannie Mae and Freddie Mac.
LoanCentral
I proposed a modern, consumer-style experience for Fiserv’s mortgage and commercial lending products, with a prototype of more than 50 screens and its own style guide.

Across Fiserv

I’ve designed multiple flagship apps and consulted with business units across the company, on software used by banks, credit unions, businesses, and consumers. I’ve worked with teams across the United States, India, New Zealand, Australia, Poland, Scotland, and more.

When I started the Fiserv Design Studio as an internal design agency, I explained what we do in familiar terms: restyle, refactor, or reimagine.

25+ yearsin financial software, from online banking to executive dashboards
100+ productsbuilt on the design system I originated
2014 contest winnerFiserv’s Innovative UI Design Contest, pitched to the CEO
2019 Best-in-ClassAite Group cited a unified user experience; the design system was a key factor

AI is part of my daily work

I use AI every day to break down specs into the design problems that need to be solved, then to prototype and iterate design ideas quickly. I’ve turned complex specs and data into working prototypes, run virtual market research with AI personas, built my own Figma plugin with Claude, and designed AI text insights executives can scan in seconds.

This site

I designed this portfolio site and built it with Claude.

Teams built on trust

I’m a collaborative designer. I ask for ideas and opinions from stakeholders and users, then synthesize them into one cohesive result.

My best work has come from teams built on trust and respect, where nobody’s competing for credit. I’ve built that culture more than once by treating everyone as humanly as possible.

Contact

Emailjaron.brownell@outlook.com

LocationFlorida · Working remotely