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 behavioral 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.
Creating the system foundations
Mobile app guiding web
Preserved familiar sign-in behavior while adapting hierarchy, input patterns, and responsiveness for web.
Figma-to-build alignment
Linked web variants to the component library so states, specs, and handoff were consistent.
Reusable form + layout rules
Established validation, responsive states, and early grid decisions that later scaled across logged-in pages.
The outcome
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.
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 behavioral 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.
Creating the system foundations
Mobile app guiding web
Preserved familiar sign-in behavior while adapting hierarchy, input patterns, and responsiveness for web.
Figma-to-build alignment
Linked web variants to the component library so states, specs, and handoff were consistent.
Reusable form + layout rules
Established validation, responsive states, and early grid decisions that later scaled across logged-in pages.
The outcome
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.
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 behavioral 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.
Creating the system foundations
Mobile app guiding web
Preserved familiar sign-in behavior while adapting hierarchy, input patterns, and responsiveness for web.
Figma-to-build alignment
Linked web variants to the component library so states, specs, and handoff were consistent.
Reusable form + layout rules
Established validation, responsive states, and early grid decisions that later scaled across logged-in pages.
The outcome
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.
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.
Creating scalable patterns
Flexible modularity
Explored modular card-based layout for flexible expansion, data visualization, financial account hierarchy, and more.
Flexible modularity
Preserved familiar sign-in behavior while adapting hierarchy, input patterns, and responsiveness for web.
Responsive behavior
A scalable, modular dashboard face reacts to the adaptable navigation pattern across breakpoints.
Responsive behavior
A scalable, modular dashboard face reacts to the adaptable navigation pattern across breakpoints.
The 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.
The 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.
The 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.
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.
Documenting patterns + standards
Motion principles
Defined motion standards to reinforce feedback and status with clarity and restraint, focusing on user delight.
Motion guidelines
Defined motion standards to reinforce feedback and status with clarity and restraint, focusing on user delight.
Motion guidelines
Defined motion standards to reinforce feedback and status with clarity and restraint, focusing on user delight.
Pattern anatomy
Standardized component structure and states to support consistent implementation and efficient handoff.
Pattern anatomy
Standardized component structure and states to support consistent implementation and efficient handoff.
Patterns anatomy
Standardized component structure and states to support consistent implementation and efficient handoff.
System impact
Account Monitoring validated the system in production—establishing reusable component anatomies, motion standards, and flow patterns that scaled to future web features.
System impact
Account Monitoring validated the system in production—establishing reusable component anatomies, motion standards, and flow patterns that scaled to future web features.
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!
The outcome
The Account Monitoring launch was the first of a suite of features to reach existing users. The rollout was an exciting precursor for what was to come.
The outcome
Account Monitoring validated the system in production—establishing reusable component anatomies, motion standards, and flow patterns that scaled to future web features.
The outcome
Account Monitoring validated the system in production—establishing reusable component anatomies, motion standards, and flow patterns that scaled to future web features.
Growth Experimentation
Website Redesign
Web Product Dashboard
Growth Experimentation
Website Redesign
Web Product Dashboard
Growth Experimentation
Website Redesign