M1
Banking Dashboard
Elevating dashboard design + aligning across an ecosystem.
Scalable System
UX Design
Web + Mobile
Role
Design Lead
Responsibilities
Design System Collaboration, Prototyping, Animation
Collaborators
Product, Compliance, Test Eng, Engineering, Design System, Visual Design
Timeline
2 months
Summary
Part of the development as a newly minted unicorn (valuation over $1B) M1 was shifting both UX + UI towards a premium experience app wide. This meant a large multi pronged project to tackle which I was assigned the UX portion of the banking products - Checking, Savings, Credit Card + Personal Loans.
Goals:
Global uniformity
upgrade alignment across ecosystem with specific attention to individual products where it counts components on both design + engineering sides
reusable components on both design + engineering sides
Premium experience
provide users with better clarity around their accounts, their money
include experience improvement such as motion to eoke the emotional aspects of interaction oer the transactional
3%
Earn + Spend both saw a bump of 2-3% growth in AUM immediately following the release of this design.
6
Designed + added 6 new patterns to the Design System, which bring consistency across the product suite.
This apt note I received was from our iOS lead + highlights the crux of what we were facing with notifications, logos and clarity.
Challenges
One of the most challenging + rewarding nuances of this work was robustly upgrading logos as they present in the app - from BE, through our API, to clients + finally in the UI. Additionally, I collaborated with the visual team on a unique transaction detail interaction that reduced user clicks + provided much more context.
Maintaining a uniform look and feel across the various products was challenging in a few ways but one that I welcomed. We paid special attention in attempting to provide each module with it's own unique feel, small differentiators in the greater visual ecosystem.
An illustration for stakeholders of the process for logos through all four steps, from beginning to end.
Process + Methodology
Strategic Foundation
I started with an inventory of patterns already built for the corresponding work in sibling products Home + Invest. This provided a solid foundation along with the four section panel breakdown illustrated below. Obviously this is web + mobile would operate stacked - this allowed us to begin iterating around specific modules each product needed such as transaction tables vs detail windows.
Design Process
Iterative Discovery: working efficiently through the various friction points identified as well as new patterns aailable we quickly landed on updating headers, data tables + transaction detail views.
Ideation & Exploration: one of the trickiest explorations was around the clearest path to present detail views - previous paths had a modal completely covering the table which amounts in losing all context. We evaluated options + landed on a smooth side panel, unique in stemming from the left never losing context.
Delivery & Documentation: covered a wide spectrum of cases as we worked through various states in each of the products in scope - Credit Card, Savings, Loans - including empty states + compliance mandated tooltip callouts (see below, Mobile Interactions).
Cross-Organizational Alignment: this project required huge amounts of alignment both in terms of adopting patterns done on sibling products (headers, detail layouts, tables) but especially around logos. Working across teams to define how + what to handle at each point in regards to logos lead to a rewarding challenge + ultimately success in collaborating with both backend + front end tech leads.
Outcome
Outcome over output. We hit all the targets set for us (detailed below) but perhaps proudest of the fact that this work is still in play years later. It was as adaptable as it was targeted.
Business
Business goals laid out prior to the project that we hit included the following;
Brand consistency
Premium + upscale visual design
Drive product engagement
Reinforce product benefits
Scalability
We built this project out to scale as a foundational element. Since it's release M1 has shifted + renamed products (even deprecated) but maintained the structure showcased here.
3%
Earn + Spend saw 2-3% growth in AUM (above average) at release driving higher product engagement.
6
Designed + added 6 new patterns to the Design System, bringing consistency across the product suite.
Mobile motion
FAB as a entry into expanding motion at M1.
Began building up specs + including in Design System based on this project.
Feedback
"UI updates on Earn + Spend tabs look good!"
user Johnny0627
"Update looks great, big improvement
Brian Barnes, CEO/founder
"Heath you are a super star."
tech lead, GG
M1
Banking Dashboard
Elevating dashboard design + aligning across an ecosystem.
Scalable System
UX Design
Web + Mobile
Role
Design Lead
Responsibilities
Design System Collaboration, Prototyping, Animation
Collaborators
Product, Compliance, Test Eng, Engineering, Design System, Visual Design
Timeline
2 months
Summary
Part of the development as a newly minted unicorn (valuation over $1B) M1 was shifting both UX + UI towards a premium experience app wide. This meant a large multi pronged project to tackle which I was assigned the UX portion of the banking products - Checking, Savings, Credit Card + Personal Loans.
Goals:
Global uniformity
upgrade alignment across ecosystem with specific attention to individual products where it counts components on both design + engineering sides
reusable components on both design + engineering sides
Premium experience
provide users with better clarity around their accounts, their money
include experience improvement such as motion to eoke the emotional aspects of interaction oer the transactional
3%
Earn + Spend both saw a bump of 2-3% growth in AUM immediately following the release of this design.
6
Designed + added 6 new patterns to the Design System, which bring consistency across the product suite.
This apt note I received was from our iOS lead + highlights the crux of what we were facing with notifications, logos and clarity.
Challenges
One of the most challenging + rewarding nuances of this work was robustly upgrading logos as they present in the app - from BE, through our API, to clients + finally in the UI. Additionally, I collaborated with the visual team on a unique transaction detail interaction that reduced user clicks + provided much more context.
Maintaining a uniform look and feel across the various products was challenging in a few ways but one that I welcomed. We paid special attention in attempting to provide each module with it's own unique feel, small differentiators in the greater visual ecosystem.
An illustration for stakeholders of the process for logos through all four steps, from beginning to end.
Process + Methodology
Strategic Foundation
I started with an inventory of patterns already built for the corresponding work in sibling products Home + Invest. This provided a solid foundation along with the four section panel breakdown illustrated below. Obviously this is web + mobile would operate stacked - this allowed us to begin iterating around specific modules each product needed such as transaction tables vs detail windows.
Design Process
Iterative Discovery: working efficiently through the various friction points identified as well as new patterns aailable we quickly landed on updating headers, data tables + transaction detail views.
Ideation & Exploration: one of the trickiest explorations was around the clearest path to present detail views - previous paths had a modal completely covering the table which amounts in losing all context. We evaluated options + landed on a smooth side panel, unique in stemming from the left never losing context.
Delivery & Documentation: covered a wide spectrum of cases as we worked through various states in each of the products in scope - Credit Card, Savings, Loans - including empty states + compliance mandated tooltip callouts (see below, Mobile Interactions).
Cross-Organizational Alignment: this project required huge amounts of alignment both in terms of adopting patterns done on sibling products (headers, detail layouts, tables) but especially around logos. Working across teams to define how + what to handle at each point in regards to logos lead to a rewarding challenge + ultimately success in collaborating with both backend + front end tech leads.
Outcome
Outcome over output. We hit all the targets set for us (detailed below) but perhaps proudest of the fact that this work is still in play years later. It was as adaptable as it was targeted.
Business
Business goals laid out prior to the project that we hit included the following;
Brand consistency
Premium + upscale visual design
Drive product engagement
Reinforce product benefits
Scalability
We built this project out to scale as a foundational element. Since it's release M1 has shifted + renamed products (even deprecated) but maintained the structure showcased here.
3%
Earn + Spend saw 2-3% growth in AUM (above average) at release driving higher product engagement.
6
Designed + added 6 new patterns to the Design System, bringing consistency across the product suite.
Mobile motion
FAB as a entry into expanding motion at M1.
Began building up specs + including in Design System based on this project.
Feedback
"UI updates on Earn + Spend tabs look good!"
user Johnny0627
"Update looks great, big improvement
Brian Barnes, CEO/founder
"Heath you are a super star."
tech lead, GG
M1
Banking Dashboard
Elevating dashboard design + aligning across an ecosystem.
Scalable System
UX Design
Web + Mobile
Role
Design Lead
Responsibilities
Design System Collaboration, Prototyping, Animation
Collaborators
Product, Compliance, Test Eng, Engineering, Design System, Visual Design
Timeline
2 months
Summary
Part of the development as a newly minted unicorn (valuation over $1B) M1 was shifting both UX + UI towards a premium experience app wide. This meant a large multi pronged project to tackle which I was assigned the UX portion of the banking products - Checking, Savings, Credit Card + Personal Loans.
Goals:
Global uniformity
upgrade alignment across ecosystem with specific attention to individual products where it counts components on both design + engineering sides
reusable components on both design + engineering sides
Premium experience
provide users with better clarity around their accounts, their money
include experience improvement such as motion to eoke the emotional aspects of interaction oer the transactional
3%
AUM growth supported by architecture over following
year
6
Designed + added 6 new patterns to the Design System, which bring consistency across the product suite.
This apt note I received was from our iOS lead + highlights the crux of what we were facing with notifications, logos and clarity.
Challenges
One of the most challenging + rewarding nuances of this work was robustly upgrading logos as they present in the app - from BE, through our API, to clients + finally in the UI. Additionally, I collaborated with the visual team on a unique transaction detail interaction that reduced user clicks + provided much more context.
Maintaining a uniform look and feel across the various products was challenging in a few ways but one that I welcomed. We paid special attention in attempting to provide each module with it's own unique feel, small differentiators in the greater visual ecosystem.
An illustration for stakeholders of the process for logos through all four steps, from beginning to end.
Process
Strategic Foundation
I started with an inventory of patterns already built for the corresponding work in sibling products Home + Invest. This provided a solid foundation along with the four section panel breakdown illustrated below. Obviously this is web + mobile would operate stacked - this allowed us to begin iterating around specific modules each product needed such as transaction tables vs detail windows.
Design Process
Iterative Discovery: working efficiently through the various friction points identified as well as new patterns aailable we quickly landed on updating headers, data tables + transaction detail views.
Ideation & Exploration: one of the trickiest explorations was around the clearest path to present detail views - previous paths had a modal completely covering the table which amounts in losing all context. We evaluated options + landed on a smooth side panel, unique in stemming from the left never losing context.
Delivery & Documentation: covered a wide spectrum of cases as we worked through various states in each of the products in scope - Credit Card, Savings, Loans - including empty states + compliance mandated tooltip callouts (see below, Mobile Interactions).
Cross-Organizational Alignment: this project required huge amounts of alignment both in terms of adopting patterns done on sibling products (headers, detail layouts, tables) but especially around logos. Working across teams to define how + what to handle at each point in regards to logos lead to a rewarding challenge + ultimately success in collaborating with both backend + front end tech leads.
Outcome
Outcome over output. We hit all the targets set for us (detailed below) but perhaps proudest of the fact that this work is still in play years later. It was as adaptable as it was targeted.
Business
Business goals laid out prior to the project that we hit included the following;
Brand consistency
Premium + upscale visual design
Drive product engagement
Reinforce product benefits
Scalability
We built this project out to scale as a foundational element. Since it's release M1 has shifted + renamed products (even deprecated) but maintained the structure showcased here.
3%
AUM growth supported by architecture over following
year
6
Designed + added 6 new patterns to the Design System, bringing consistency across the product suite.
Mobile motion
FAB as a entry into expanding motion at M1.
Began building up specs + including in Design System based on this project.
Feedback
"UI updates on Earn + Spend tabs look good!"
user Johnny0627
"Update looks great, big improvement
Brian Barnes, CEO/founder
"Heath you are a super star."
tech lead, GG
M1
Information Architecture
Reimagining the structure of a $6B AUM unicorn.
UX Design
Web + Mobile
Scalable System
Role
Design Lead, Co-Project Lead
Responsibilities
Information Architecture, UX Research, Design System Documentation
Collaborators
C-Suite Stakeholders, PM (multiple), Compliance, Test Eng, Engineering, Design System, Visual Design
Timeline
6 months
Summary
Reimagining the information architecture of M1, "the financial super app", managing over $6B in assets. The original M1 5 year plan was 7 years old + was failing on multiple levels - user, internal + business. Working across the entire organization I collaborated with the CEO/founder to intelligently rebuild the foundation for M1's growth + future success.
Goals:
Enhance user navigation to support growth.
Simplify complex financial data presentation to increase stickiness.
Optimize the overall user experience in the form of expanding the design system with updated components.
*This UX work was done in conjunction with a visual design uplift by the team of Ceasar Gamulja + Ricky Sunay. Mobile work assist by Victoria German.
$3B
AUM growth supported by architecture over following year
+7%
DAU growth over two months
2
New navigation components added to the design system.
Challenges
This high-visibility project came with unique complexities: redesigning M1's information architecture while maintaining user trust and engagement in a traditionally conservative industry, collaborating with the CEO/founder who reached out directly to me to lead this project (adding both opportunity and responsibility to deliver exceptional results), and balancing data-rich content with intuitive design.
Core Design Challenges
Preserving user confidence during a significant architectural shift
Balancing dense financial data with intuitive user experience
Orchestrating tight cross-functional collaboration across multiple teams
Working closely with our Design System Committee to establish scalable patterns and ensure consistent adoption across all platforms
"The app is kind of all over the place."
User MK
Process + Methodology
Strategic Foundation
CEO Brian Barnes and I began by exploring his vision to center M1 around the Business Ledger—a fundamental accounting principle that calculates net worth as the sum of assets and liabilities. This foundational concept provided a robust framework for mapping M1's future product ecosystem and informed every subsequent design decision.
Design Process
My approach followed a systematic methodology:
Discovery & Architecture: Conducted comprehensive site map inventory and information architecture analysis to understand the current state and identify optimization opportunities.
Ideation & Exploration: Generated divergent concept explorations and navigation alternatives, ensuring we considered multiple approaches before converging on the optimal solution.
Validation & Refinement: Progressed from initial concepts through user testing on mockups, iterating based on feedback to validate our design decisions with real user insights.
Delivery & Documentation: Created a comprehensive delivery package including interactive Figma prototypes, detailed Design System documentation, and executive summary materials.
Cross-Organizational Alignment Working closely with my PM partner, I produced a video walkthrough that communicated both the project methodology and outcomes to stakeholders across the organization. This ensured company-wide understanding of the strategic rationale, design decisions, and expected impact.
Outcome
The outcomes of this project were really powerful on many levels. First off, user feedback. Secondly, for the business. Lastly, one that offered a surprise - scalability.
User Feedback
From comments around misleading navigation + wayfinding to the ultimate feedback, especially from a Reddit AMA, of "kudos to your designers".
Business goals
Couple of levels. Big one for the org was always around increasing AUM. In the year following this work the AUM of M1 rose from $6B to over $9B, not entirely attributable to this alone but definitely complimentary to the clearer user understanding. Additionally on the business side we saw a nice bump in DAU over two months post release.
Scalability
We often consider scalability in a growth mind set + understandably so. This project, as one would expect with IA, accounted for + accomplished that as evidenced by my team soon after releasing net new products that easily integrated with the Business Ledger concept as well as the navigation in place. The surprise, + lesser considered element of scalability, is in deprecated products. While unknown at the time of this IA project, the business later had need to deprecate the Checking Account product. That drop was easily accomplished on the UI side with the upgrades in navigation + wayfinding that this team successfully implemented as part of this project. A unique yet fulfilling experience proving the value of long term systems thinking to handle yet unknown vectors.
$3B
AUM growth supported by architecture over following year
+7%
DAU growth over two months
2
New navigation components added to the design system.
The Human-Centered Approach
I saw an opportunity to inject much-needed delight into the user experience. Guided by the principle of "emotional over transactional," I advocated for including motion design—particularly on mobile—to create moments of joy within complex financial workflows. Working alongside tech leads like Patrick McCarron we transformed cold data windows into dynamic experiences creating an interface that serves people first, complexity second.
M1
Information Architecture
Reimagining the structure of a $6B AUM unicorn.
UX Design
Web + Mobile
Scalable System
Role
Design Lead, Co-Project Lead
Responsibilities
Information Architecture, UX Research, Design System Documentation
Collaborators
C-Suite Stakeholders, PM (multiple), Compliance, Test Eng, Engineering, Design System, Visual Design
Timeline
6 months
Summary
Reimagining the information architecture of M1, "the financial super app", managing over $6B in assets. The original M1 5 year plan was 7 years old + was failing on multiple levels - user, internal + business. Working across the entire organization I collaborated with the CEO/founder to intelligently rebuild the foundation for M1's growth + future success.
Goals:
Enhance user navigation to support growth.
Simplify complex financial data presentation to increase stickiness.
Optimize the overall user experience in the form of expanding the design system with updated components.
*This UX work was done in conjunction with a visual design uplift by the team of Ceasar Gamulja + Ricky Sunay. Mobile work assist by Victoria German.
$3B
AUM growth supported by architecture over following year
+7%
DAU growth over two months
2
New navigation components added to the design system.
Challenges
This high-visibility project came with unique complexities: redesigning M1's information architecture while maintaining user trust and engagement in a traditionally conservative industry, collaborating with the CEO/founder who reached out directly to me to lead this project (adding both opportunity and responsibility to deliver exceptional results), and balancing data-rich content with intuitive design.
Core Design Challenges
Preserving user confidence during a significant architectural shift
Balancing dense financial data with intuitive user experience
Orchestrating tight cross-functional collaboration across multiple teams
Working closely with our Design System Committee to establish scalable patterns and ensure consistent adoption across all platforms
"The app is kind of all over the place."
User MK
Process + Methodology
Strategic Foundation
CEO Brian Barnes and I began by exploring his vision to center M1 around the Business Ledger—a fundamental accounting principle that calculates net worth as the sum of assets and liabilities. This foundational concept provided a robust framework for mapping M1's future product ecosystem and informed every subsequent design decision.
Design Process
My approach followed a systematic methodology:
Discovery & Architecture: Conducted comprehensive site map inventory and information architecture analysis to understand the current state and identify optimization opportunities.
Ideation & Exploration: Generated divergent concept explorations and navigation alternatives, ensuring we considered multiple approaches before converging on the optimal solution.
Validation & Refinement: Progressed from initial concepts through user testing on mockups, iterating based on feedback to validate our design decisions with real user insights.
Delivery & Documentation: Created a comprehensive delivery package including interactive Figma prototypes, detailed Design System documentation, and executive summary materials.
Cross-Organizational Alignment Working closely with my PM partner, I produced a video walkthrough that communicated both the project methodology and outcomes to stakeholders across the organization. This ensured company-wide understanding of the strategic rationale, design decisions, and expected impact.
Outcome
The outcomes of this project were really powerful on many levels. First off, user feedback. Secondly, for the business. Lastly, one that offered a surprise - scalability.
User Feedback
From comments around misleading navigation + wayfinding to the ultimate feedback, especially from a Reddit AMA, of "kudos to your designers".
Business goals
Couple of levels. Big one for the org was always around increasing AUM. In the year following this work the AUM of M1 rose from $6B to over $9B, not entirely attributable to this alone but definitely complimentary to the clearer user understanding. Additionally on the business side we saw a nice bump in DAU over two months post release.
Scalability
We often consider scalability in a growth mind set + understandably so. This project, as one would expect with IA, accounted for + accomplished that as evidenced by my team soon after releasing net new products that easily integrated with the Business Ledger concept as well as the navigation in place. The surprise, + lesser considered element of scalability, is in deprecated products. While unknown at the time of this IA project, the business later had need to deprecate the Checking Account product. That drop was easily accomplished on the UI side with the upgrades in navigation + wayfinding that this team successfully implemented as part of this project. A unique yet fulfilling experience proving the value of long term systems thinking to handle yet unknown vectors.
$3B
AUM growth supported by architecture over following year
+7%
DAU growth over two months
2
New navigation components added to the design system.
The Human-Centered Approach
I saw an opportunity to inject much-needed delight into the user experience. Guided by the principle of "emotional over transactional," I advocated for including motion design—particularly on mobile—to create moments of joy within complex financial workflows. Working alongside tech leads like Patrick McCarron we transformed cold data windows into dynamic experiences creating an interface that serves people first, complexity second.
M1
Information Architecture
Reimagining the structure of a $6B AUM unicorn.
UX Design
Web + Mobile
Scalable System
Role
Design Lead, Co-Project Lead
Responsibilities
Information Architecture, UX Research, Design System Documentation
Collaborators
C-Suite Stakeholders, PM (multiple), Compliance, Test Eng, Engineering, Design System, Visual Design
Timeline
6 months
Summary
Reimagining the information architecture of M1, "the financial super app", managing over $6B in assets. The original M1 5 year plan was 7 years old + was failing on multiple levels - user, internal + business. Working across the entire organization I collaborated with the CEO/founder to intelligently rebuild the foundation for M1's growth + future success.
Goals:
Enhance user navigation to support growth.
Simplify complex financial data presentation to increase stickiness.
Optimize the overall user experience in the form of expanding the design system with updated components.
*This UX work was done in conjunction with a visual design uplift by the team of Ceasar Gamulja + Ricky Sunay. Mobile work assist by Victoria German.
$3B
AUM growth supported by architecture over following
year
+7%
DAU growth over two months
2
New navigation components added to the design system.
Challenges
This high-visibility project came with unique complexities: redesigning M1's information architecture while maintaining user trust and engagement in a traditionally conservative industry, collaborating with the CEO/founder who reached out directly to me to lead this project (adding both opportunity and responsibility to deliver exceptional results), and balancing data-rich content with intuitive design.
Core Design Challenges
Preserving user confidence during a significant architectural shift
Balancing dense financial data with intuitive user experience
Orchestrating tight cross-functional collaboration across multiple teams
Working closely with our Design System Committee to establish scalable patterns and ensure consistent adoption across all platforms
"The app is kind of all over the place."
User MK
Process
Strategic Foundation
CEO Brian Barnes and I began by exploring his vision to center M1 around the Business Ledger—a fundamental accounting principle that calculates net worth as the sum of assets and liabilities. This foundational concept provided a robust framework for mapping M1's future product ecosystem and informed every subsequent design decision.
Design Process
My approach followed a systematic methodology:
Discovery & Architecture: Conducted comprehensive site map inventory and information architecture analysis to understand the current state and identify optimization opportunities.
Ideation & Exploration: Generated divergent concept explorations and navigation alternatives, ensuring we considered multiple approaches before converging on the optimal solution.
Validation & Refinement: Progressed from initial concepts through user testing on mockups, iterating based on feedback to validate our design decisions with real user insights.
Delivery & Documentation: Created a comprehensive delivery package including interactive Figma prototypes, detailed Design System documentation, and executive summary materials.
Cross-Organizational Alignment Working closely with my PM partner, I produced a video walkthrough that communicated both the project methodology and outcomes to stakeholders across the organization. This ensured company-wide understanding of the strategic rationale, design decisions, and expected impact.
Outcome
The outcomes of this project were really powerful on many levels. First off, user feedback. Secondly, for the business. Lastly, one that offered a surprise - scalability.
User Feedback
From comments around misleading navigation + wayfinding to the ultimate feedback, especially from a Reddit AMA, of "kudos to your designers".
Business goals
Couple of levels. Big one for the org was always around increasing AUM. In the year following this work the AUM of M1 rose from $6B to over $9B, not entirely attributable to this alone but definitely complimentary to the clearer user understanding. Additionally on the business side we saw a nice bump in DAU over two months post release.
Scalability
We often consider scalability in a growth mind set + understandably so. This project, as one would expect with IA, accounted for + accomplished that as evidenced by my team soon after releasing net new products that easily integrated with the Business Ledger concept as well as the navigation in place. The surprise, + lesser considered element of scalability, is in deprecated products. While unknown at the time of this IA project, the business later had need to deprecate the Checking Account product. That drop was easily accomplished on the UI side with the upgrades in navigation + wayfinding that this team successfully implemented as part of this project. A unique yet fulfilling experience proving the value of long term systems thinking to handle yet unknown vectors.
$3B
AUM growth supported by architecture over following year
+7%
DAU growth over two months
2
New navigation components added to the design system.
The Human-Centered Approach
I saw an opportunity to inject much-needed delight into the user experience. Guided by the principle of "emotional over transactional," I advocated for including motion design—particularly on mobile—to create moments of joy within complex financial workflows. Working alongside tech leads like Patrick McCarron we transformed cold data windows into dynamic experiences creating an interface that serves people first, complexity second.