Web Product Dashboard
Families loved Greenlight’s mobile experience, but research revealed a widespread need for managing their finances on larger screens. We launched Family Shield account monitoring as the foundational feature to validate the system in production and pave the way for future functionality.
Role
As Lead Designer, I defined the foundational system, structure, and visual language to bring core app features to Greenlight’s first authenticated web platform.
Strategy + approach
01
Authentication
02
Design system discovery
03
Launch experience
04
Marketing strategy
My work involved
Product design
Design system
Feature launch
Web product
Web Product Dashboard
Families loved Greenlight’s mobile experience, but research revealed a widespread need for managing their finances on larger screens. We launched Family Shield account monitoring as the foundational feature to validate the system in production and pave the way for future functionality.
Role
As Lead Designer, I defined the foundational system, visual language, and directed focus groups to bring core app features to Greenlight's first authenticated web product.
Strategy + approach
01
Authentication
02
Design system discovery
03
Launch experience
04
Marketing strategy
My work involved
Product design
Design system
Feature launch
Web product
Web Product Dashboard
Families loved Greenlight’s mobile experience, but research revealed a widespread need for managing their finances on larger screens. We launched Family Shield account monitoring as the foundational feature to validate the system in production and pave the way for future functionality.
Role
As Lead Designer, I defined the foundational system, structure, and visual language to bring core app features to Greenlight’s first authenticated web platform.
Strategy + approach
01
Authentication
02
Design system discovery
03
Launch experience
04
Marketing strategy
My work involved
Product design
Design system
Feature launch
Web product
01
Authentication
Building the foundation of our first web product
We started with authentication because it’s where trust is earned and where universal design patterns begin. Using mobile as our anchor, I partnered with a new web engineering team to define form states, responsive layout rules, and a smooth design for to establish our “design → build” rhythm.
Approach
Establishing system basics
Mobile app guiding web
Aligning Figma to code
Documenting scalable rules
More than a login flow, this phase represented the first set of decisions that would shape the quality, speed, and consistency of the entire web system.
Outcome
01
Authentication
Building the foundation of our first web product
We started with authentication because it’s where trust is earned and where universal design patterns begin. Using mobile as our anchor, I partnered with a new web engineering team to define form states, responsive layout rules, and a smooth design for to establish our “design → build” rhythm.
Approach
Establishing system basics
Mobile app guiding web
Aligning Figma to code
Documenting scalable rules
More than a login flow, this phase represented the first set of decisions that would shape the quality, speed, and consistency of the entire web system.
Outcome
01
Authentication
Building the foundation of our first web product
We started with authentication because it’s where trust is earned and where universal design patterns begin. Using mobile as our anchor, I partnered with a new web engineering team to define form states, responsive layout rules, and a smooth design for to establish our “design → build” rhythm.
Approach
Establishing system basics
Mobile app guiding web
Aligning Figma to code
Documenting scalable rules
More than a login flow, this phase represented the first set of decisions that would shape the quality, speed, and consistency of the entire web system.
Decision outcome
02
Design system discovery
Choosing a scalable dashboard model
In a one-week sprint with two other designers, we explored foundational, systems-level work, considering how Greenlight’s mobile experience could grow into larger screens without losing clarity. We evaluated multiple approaches and landed on a layout and navigation model that could flex as new features were introduced.
02
Design system discovery
Choosing a scalable dashboard model
In a one-week sprint with two other designers, we explored foundational, systems-level work, considering how Greenlight’s mobile experience could grow into larger screens without losing clarity. We evaluated multiple approaches and landed on a layout and navigation model that could flex as new features were introduced.
Our approach
Creating scalable patterns
Adaptable modularity
Responsive breakpoint patterns
Responsive breakpoint patterns
We presented three approaches to engineering: a webview solution, a hybrid model, and a responsive web experience. The responsive web approach best balanced scalability, performance, and long-term system reuse, and became the foundation for all subsequent web features.
Decision outcome
We presented three approaches to engineering: a webview solution, a hybrid model, and a fully responsive web experience. The responsive web approach best balanced scalability, performance, and long-term system reuse, and became the foundation for all subsequent web features.
Decision outcome
We presented three approaches to engineering: a webview solution, a hybrid model, and a fully responsive web experience. The responsive web approach best balanced scalability, performance, and long-term system reuse, and became the foundation for all subsequent web features.
System impact
03
Launch experience
Proving the system in production with Account Monitoring
We launched Account Monitoring, where users can monitor their own and senior loved ones' financial accounts, as our first web feature to validate the dashboard system in production. I designed end-to-end user flows, including a new onboarding experience, while pressure-testing patterns, component reuse, and design-to-engineering handoff at scale.
03
Create launch experience
Proving the system in production with Account Monitoring
We launched Account Monitoring, where users can monitor their own and senior loved ones' financial accounts, as our first web feature to validate the dashboard system in production. I designed end-to-end user flows, including a new onboarding experience, while pressure-testing patterns, component reuse, and design-to-engineering handoff at scale.
Our approach
Documenting patterns + standards
Creating motion principles
Motion guidelines
Motion guidelines
Framing anatomy patterns
Pattern anatomy
Patterns anatomy
Account Monitoring validated the system in production—establishing reusable component anatomies, motion standards, and flow patterns that scaled to future web features.
Outcomes + Impact
04
Marketing launch
Growth rollout: launching product for existing customers
I worked with the Product Marketing team on positioning as we closed the loops on final design QA. I also guided brand designers on visual storytelling during the build of landing pages and CRM emails.
04
Marketing launch
Growth rollout: launching product for existing customers
I worked with the Product Marketing team on positioning as we closed the loops on final design QA. I also guided brand designers on visual storytelling during the build of landing pages and CRM emails. Stay tuned to see the dashboard in the wild!
Our approach
We leaned into desktop screen imagery to showcase the new dynamic surface area, using animation to show the transformation from mobile where possible.
The Account Monitoring launch was the first of a suite of features to reach existing users with a total reach of 300 families. The rollout was an exciting precursor for what was to come.
Outcomes + Impact
Growth Experimentation
Website Redesign
Web Product Dashboard
Growth Experimentation
Website Redesign
Web Product Dashboard
Growth Experimentation
Website Redesign