Intro
Designing and Developing a Design System for Financial Advisor Websites
The institution needed a way to showcase the unique expertise of 2,500+ financial advisors and teams through their websites while maintaining brand trust and meeting WCAG 2.2 AA accessibility standards. The challenge was balancing scale with personalization to ensure every advisor felt unique while the overall system remained cohesive and efficient.
Role
UI Designer and Developer
Problem statement
Problem statement
Scale, Personalization, and Trust
With 2,500+ advisors forced into identical templates, the only differentiation was biography, everything else looked exactly the same unless they invested in costly custom development. This created three critical challenges:
- Personalization at scale - Give 2,500+ advisors the tools to highlight unique expertise while keeping development efficient
- Brand trust with human connection - Ensure sites reflected institutional credibility while feeling approachable and personal
- Accessibility without compromise - Deliver inclusive experiences that met WCAG 2.2 AA standards without sacrificing engagement or visual appeal
Thinking Bigger
Thinking Bigger
Rather than simply improving the existing template, I stepped back to question the entire framework. The real problem wasn't just customization limitations, it was that we were forcing diverse expertise into identical presentations.
Discovery
Discovery
Understanding Advisor Success
To understand what makes top-performing advisor websites effective, I audited existing sites and analyzed what elements resonated most with clients. Key patterns emerged:
- Personal storytelling - Authentic bios paired with professional credibility
- Trust signals - Professional imagery, credentials, and testimonials
- Multiple engagement pathways - Users have intuitive options to connect
Industry data revealed consistent navigation flows: most users started on the Home page, then moved to About/Bio (40%), Services (30%), and Contact (20%).
Key Content Sections
These insights shaped my strategy, I prioritized high-traffic areas and specialized conversion touchpoints that could adapt to each advisor's expertise:
Home
100% traffic baseline
About/Bio
45% relative traffic
Services
35% relative traffic
Contact
30% relative traffic + 11% conversion rate
Blog
25% relative traffic
Lead Generation
4% conversion rate
Newsletter
3% conversion rate
What I learned
What I learned
Advisors wanted to tell unique stories, this insight made me realize we needed to think beyond templates to building blocks that could adapt to each advisor's expertise.
Key persona
Key persona
“Every advisor has a unique story and area of expertise, so we needed a design system that could adapt and grow with us. Something that highlights what makes each advisor stand out, while still feeling unmistakably branded.”
Financial Advisor
Design Process
Design Process
Building Blocks for Personalization at Scale
Rather than forcing diverse expertise into a rigid template, I designed a modular system of 30+ flexible components. Advisors could mix and match modules to tell their story while still staying within brand guidelines.
Foundation Layer
Hero banners with customizable messaging and CTAs
Strategic Enhancements
Instead of scrapping the old system, I enhanced existing sections to improve usability and personalization. By reusing existing content, advisors were able to keep valuable information while presenting it in a clearer, more engaging way. This approach reduced rebuild time and costs while making the transition seamless for both advisors and clients.
Individual Intro
Before
Forced identical layouts with background images and overlaid text reduced readability, limited accessibility, and restricted personalization
High-Fidelity Prototyping
Using the institution's established brand assets, fonts, color palette, and patterns, I created high-fidelity Figma prototypes to validate the system before development. These prototypes:
- Ensured brand consistency across all components
- Tested interactive components such as blogs, profile modals, and forms
- Demonstrated layout versatility across individual advisors, large teams, and specialized service offerings
Development Solution
Development Solution
Modular, Cohesive, and Conversion-Ready
After validation, I transitioned the prototypes into a modular component library built with accessibility-first code. Each component was designed to:
- Meet WCAG 2.2 AA compliance, with semantic HTML and ARIA attributes built in
- Scale efficiently through centralized branding variables and responsive architecture
- Deliver cross-platform consistency, tested across devices and browsers
This foundation cut site deployment from 1 month to 1 week, eliminated accessibility complaints, and gave 2,500+ advisors the freedom to present themselves at scale.
Contact Forms
Multi-step forms for appointment booking and direct messaging, optimized for advisor-client conversion
Results & Impact
Results & Impact
Solving the Personalization-at-Scale Challenge
The modular design system transformed how 2,500+ advisors present themselves online through individual branding while strengthening institutional trust.
Empowering Financial Advisors Through Design
- 75% faster deployment - Reduced build time from one month to one week
- 2,500+ unique advisor experiences - Differentiated while remaining on-brand
- 100% accessibility compliance - Zero WCAG-related complaints since launch
- 10,000+ monthly visitors served - Optimized user journeys that improved engagement and conversions
Proven Strategy
Proven Strategy
The modular approach transformed advisor websites from identical templates into personalized showcases of expertise, proving that systematic thinking delivers exponential results.
Conclusion
Conclusion
What I Learned
This project taught me to think biggerm not just improve templates, but to question the underlying problem and design adaptive systems.
Challenges I Overcame
The biggest challenge was content strategy, identifying which components would have the highest impact while enabling seamless content migration. By focusing on modular, flexible components, I created a system that balances personalization, brand trust, and accessibility.
Key Takeaway
The best solutions come from asking “Why is this a problem?” rather than jumping straight to a solution. Designing systems for real users ensures lasting impact.