M1
M1
M1
Banking Dashboard
Banking Dashboard
Banking Dashboard
Elevating dashboard design + aligning across an ecosystem.
Elevating dashboard design + aligning across an ecosystem.
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
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
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
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%
3%
Earn + Spend both saw a bump of 2-3% growth in AUM immediately following the release of this design.
AUM growth supported by architecture over following
year
6
6
Designed + added 6 new patterns to the Design System, which bring consistency across the product suite.
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
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.
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.
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
Process + Methodology
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.
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.
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.
Validation & Refinement: tbd
Delivery & Documentation: tbd
Cross-Organizational Alignment: tbd
Validation & Refinement: tbd
Delivery & Documentation: tbd
Cross-Organizational Alignment: tbd
Outcome
Outcome
Outcome
tbd
User Feedback
tbd
Business tbd
Scalability
tbd
tbd
User Feedback
tbd
Business tbd
Scalability
tbd
3%
3%
Earn + Spend both saw a bump of 2-3% growth in AUM immediately following the release of this design.
AUM growth supported by architecture over following
year
6
6
Designed + added 6 new patterns to the Design System, which bring consistency across the product suite.
