Intro
Connecting Clients with the Right Financial Advisor
I built an intuitive search tool with interactive maps and filters, crafted to help clients quickly find 800+ advisors across 100+ branches.
Role
UI Designer and Developer
Problem statement
Problem statement
“Even when I know my advisor's name is Sarah, I still have to scroll through multiple Toronto branch results to find her.”
Searches return long search results with no filters causing friction that frustrates users.
"When the site looks dated and doesn't work properly, I don't trust it with my finances."
Inconsistent visuals and missing accessibility features breaks down credibility and exclude people.
Province-based search returned long lists without filtering
User Analysis
User Analysis
Analyzing competitor platforms revealed that effective search required the right features that matched user behavior.
Name-Based Advisor Search
Users with referrals or existing relationships needed fast access to profiles and credentials
Location-Based Branch Discovery
Users exploring nearby services wanted to compare advisors and branch offerings
Search Page Design
Search Page Design
Test iteration - radio selector
My first design used a radio to explicitly switch between "Search by Location" and "Search by Name," which helped narrow results to match user intent.
Radio selector for name or location helped focus searches
Final iteration - Dual Search Inputs
I removed the dropdown to reduce friction and introduced two separate inputs, one for name and one for location, so users can type whatever information they have. This lets the system handle partial or mixed queries (name only, location only, or both) without forcing an extra decision step.
Dual inputs with autofill allowed instant results, whether entering a name, location, or both
User testing showed the dropdown caused decision paralysis; dual name+location inputs with autofill improved findability and sped searches while staying accessible.
Results page design
Results page design
Connecting with the Right Person
The redesigned experience uses progressive information architecture and an intuitive name and location search to guide users from discovery to a direct advisor connection. It also handles complex cases like advisors who work at multiple offices.
Name + Location Search
Name queries return advisor cards display based on location input otherwise will prioritize showing the advisor's primary office location
Location Discovery
Location-only queries return branch cards; each branch page shows all advisors at that branch with CTAs to view profiles or contact
Refine results
Update search inputs instantly and use the language filter to show advisors who speak your preferred language.
Displays search inputs and language filter
Interactive Mapping
Google Maps provides visual location context, allowing users to click map pins to filter results and make informed decisions about travel.
Search name results for “Alex”
Advisor cards with CTA, contact information, and interactive map for location context
Discovery Level
Branch cards showcase address, phone number, and clear CTAs, paired with an interactive map so users can assess location at a glance.
Branch cards with CTAs, contact information, and and interactive map for location context
Details Level
The branch page lists address and contact information and includes a full roster of advisors, each with additional contact details and clear CTAs, so users can quickly move from discovery to connection.
Branch details with address, contact info, and available advisors
Connection Level
Advisor profile with bio, office locations, and clear contact CTAs so users can review qualifications and connect immediately.
Advisor bio, contact info, and office locations
Development Solution
Development Solution
Responsive architecture
Adaptive so the same search logic across devices; mobile uses collapsed cards, pagination, and a map CTA to reduce abandonment.
Scalable JSON architecture
Built advisor and branch datasets with autocomplete and geolocation support for easy back-end integration.
WCAG 2.2 AA compliance
ARIA-compliant autocomplete, keyboard navigation throughout the locator, and high-contrast visuals for full accessibility.
Results & Impact
Results & Impact
The redesigned advisor locator accelerates discovery and reinforces trust, delivering measurable improvements in speed, accessibility, and user engagement.
Conclusion
Conclusion
I aligned design and development to build a scalable, WCAG 2.2 AA-compliant advisor locator that supports name and location-based discovery with dual inputs that accommodate user intent, reinforcing a content-first user experience for cleaner, faster, and more resilient interactions.