Migrating a large financial advisor site to a new design system, extending and expanding on patterns established in a smaller companion section.
Project Breakdown
A design system migration of a large financial advisor site, building on patterns established in a smaller companion section while adapting and expanding components to fit a significantly broader content structure and audience.
Usability and Visual Design
Navigation: Breadcrumbs were added to child pages per requirements, improving wayfinding and giving users clearer context within the site structure.
Visual Consistency: Alternating banded sections from the new design system were applied throughout to improve scannability. Section headers were standardized to uniform H2 designations for consistency and accessibility.
Data and Content Presentation: Existing data tables were redesigned for clarity and visual alignment with the new system, alongside stat callouts that surfaced key figures in a more prominent and digestible format.
Functionality and Features
Layout and CTA Migration: The new design system dictated a shift from a two-column layout to full-width, which required thoughtfully redistributing CTAs from the right-hand column into the new single-column structure without losing hierarchy or conversion intent.
Filter Chips and Content Simplification: Feedback from advisors, surfaced through the wholesale team and section owners, indicated the insights page was cluttered. I proposed applying a newly introduced filter chip component to the page and worked with content to assess and simplify article cards, removing author, read time, and topic tags to reduce noise and improve scannability.
SPA Migration: The site was migrated to a single-page application, improving load times and making it easier for product owners to manage and update content going forward.
Performance and Efficiency
Performance: During a standup discussion about the fund literature page's lengthy load times, I proposed a tabbed navigation system to reduce the volume of content loading at once. The solution brought load times down from 12–15 seconds to 4–7 seconds.
Content Management: The migration to a CMS changed how pages needed to be designed, shifting toward ready-to-use components that content teams could manage and update independently.
Adaptive Mobile Design
Mobile Adaptation: Rather than relying on default responsiveness, components were intentionally redesigned for mobile using an adaptive approach. This meant rethinking how each component would behave at smaller screen sizes, turning card grids into carousels, reconfiguring quote components, and introducing progressive disclosure through tabs and accordions to preserve hierarchy and usability at 390px.
Phased Delivery: Work was delivered in phased releases in collaboration with product owners and developers, with some components shipping and others deprioritized as desktop remained the traffic priority. Toward the end of the project, work had begun on adaptive table patterns for data-heavy financial content, exploring how complex data could be restructured and prioritized for smaller screens.
