/ The Gist
/ Results
/ About the project
While working on the JPM account, I collaborated with 4 product owners to improve the design and usability of 7+ investment tools within the JP Morgan Advisor division.
One of the biggest initiatives I worked on during this time was developing a comprehensive design system for said financial tools, which previously lacked a documented design language.
/ Deliverables
Figma Design System Library & ZeroHeight Repository
/ Credits
Lead Designer:
Self
Designer:
Casey Harmon
Design Director:
Vanessa Fahy
Overview of Figma documentation we created for the new components
Card component in action within the Insight section of a tool
Improved flyout navigation menu used in several tools
Spotting inconsistencies
We began this initiative by reviewing the existing tools, annotating each component, and organizing them by function and design qualities (spacing, color, typography, etc.). This helped us identify inconsistencies and areas for improvement. We documented these findings in a Figma file and shared them with stakeholders to emphasize the need for a cohesive design system.
Documentation noting UI/UX differences, which we shared with stakeholders to get buy to develop a design system
Striking a balance between flexibility and structure
Once we had a good idea of where the inconsistencies lay, we tested several new token structures to create a cohesive design hierarchy that maintained consistency, while allowing flexibility and specific scenarios across the different tools.
Flexible token structure accounting for all the atoms within the toast component
/ deeper look
One area that required attention was the inconsistent use of light and dark themes. We developed theme-specific tokens with clear guidance on when and how to apply them. We then applied them in Figma variables to automate the designing process for the future.
Example of light and dark tokens applied to toggle tips
Revisiting the grid system
After finalizing the token structure, we revisited the foundational elements, starting with grids. We cross-referenced and tested several grid options, ultimately finding a structure that worked across the entire suite. With these new grids, we also defined zones for navigation structures to ensure consistency throughout all tools.
New grid structure with navigation zones for uniformity across all 7+ tools
Challenges & Improvements
Creating a design system on a tight schedule
This project was a side initiative alongside other ongoing tool redesigns. With limited time each week, we had to be very strategic about creating a completely new structure while balancing other active project work.
Planning ahead with clear communication
To stay on track, I created a tracker that listed key components, identified needed variants, and flagged items requiring design from scratch. This served as our roadmap. Weekly touchpoints helped my teammate and me divide tasks, share findings, and make decisions efficiently.
Time to test it in the tools
To ensure our decisions held up, we stress-tested components within two upcoming redesigns of existing tools. By integrating our Figma library into these redesigns, we saw improvements in legibility and visual hierarchy, while also identifying areas that needed further adjustments.
New components applied in the redesign of the Heatmap Analysis tool
Tool onboarding flow with new components applied
Variants documented in Figma
Outcomes
system styles & tokens
main components
component variants
