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
