thao nguyen

Branch search results displaying language filter and branch cards with name call to action link and contact information alongside Google MapsBranch location information showing branch address, contact details, map, and available advisors with contact information and view profile link

Intro

Designing and Developing Intuitive Search Experiences for Financial Discovery

Clients needed a simple way to find the right financial advisor or branch, but the existing locator delivered unrefined results that left users frustrated. I redesigned the tool with a focus on accessibility, clarity, and usability, iterating prototypes through stakeholder feedback sessions. The result is a user-centered experience that lets clients search, filter, and connect with confidence while meeting business and accessibility goals.

Role

UI Designer and Developer

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.”

The existing advisor locator was failing both clients and the business due to:

  • Fragmented search experience - Limited capabilities produced lengthy, irrelevant results, frustrating users' intent
  • Brand inconsistency - Outdated visual design undermined trust and institutional credibility
  • Accessibility barriers - Poor mobile performance and missing accessibility features excluded potential clients

Pain Points

Analyzing the Original Experience

Financial advisors were losing potential clients because users couldn't find local experts quickly.

  • No filtering beyond provinces
  • Search functionality didn't match user expectations
  • Poor mobile experience
Financial advisor and branch locator interface showing branch results based on provinces
Original interface
Province-based search returned long lists without filtering

User Analysis

Understanding the Path to Financial Connection

To understand what effective financial search looked like, I analyzed 8 competitor advisor locators. I discovered standard patterns, like Charles Schwab, provided dual search pathways. This highlighted two key user behaviors our platform needed to support:

  • 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

What I learned

Analyzing competitor platforms revealed that effective search required the right features that matched user behavior.

Search Page Design

Creating Flexible Search Options

I initially designed a dropdown selector allowing users to choose between "Search by Location" or Search by Name." This allowed users to refine their search based on the common intents quickly.

Search for an advisor by location with dropdown options for search by name
Search By Test Iteration
Dropdown selector for name or location helped focus searches

Dual Search Inputs

Feedback sessions revealed unnecessary cognitive load alongside the existing 4 advisor type filters. I removed the dropdown selection to simplify the experience, creating dual search inputs so users could naturally enter whatever information they had, name, location, or both.

  • Removed decision paralysis from dropdown selection
  • Reduced clicks from multiple steps to immediate searching
  • Accommodated partial or mixed information
Financial advisor and branch locator interface showing advisor type tab options with dual search inputs for name and location
Dual Search By Interface Final Iteration
Dual inputs with autofill allowed instant results, whether entering a name, location, or both

Results page design

Connecting with the Right Person

The redesigned experience centers on intuitive search with progressive information architecture, guiding users from broad discovery to specific advisor connection. The system accounts for complex scenarios like advisors working at multiple locations.

Searching by name Advisor cards Name CTA to advisor profile Bio, credentials, locations
Searching by location Branch cards

Name CTA to branch information

Advisor cards

Branch Website CTA

Smart Filtering

Language preferences help users narrow results to advisors who speak their preferred language.

Search for an advisor by location with dropdown options for search by name
Search results page header
Displays search inputs and applied 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.

Advisor search results displaying profile cards with name call to action link and contact information alongside Google Maps
Search name results for “Alex”
Advisor cards with CTA, contact information, and interactive map for location context

Progressive Information Architecture

The branch discovery flow reduces cognitive load:

  1. Discovery Level: Branch card with essential info
  2. Details Level: Comprehensive branch information with all available advisors
  3. Connection Level: Individual advisor profiles with contact options and full credentials
Branch search results displaying branch cards with name call to action link, contact information, and website call to action link alongside Google Maps
Search location results page for "Toronto, ON"
Branch cards with CTAs, contact information, and and interactive map for location context
Branch location information displaying branch address, contact details, map, and available advisors with contact information and view profile link
Branch information page for Toronto, ON branch
Branch details with address, contact info, and available advisors
Advisor profile modal displaying advisor name, contact information, bio, and office locations
Advisor profile modal
Advisor bio, contact info, and office locations

Development Solution

Implementation Features

Technical implementation focused on solving actual user challenges:

  • Responsive architecture - Eliminated mobile search abandonment through thoughtful filtering options and consistent cross-device functionality
  • Scalable JSON architecture - Manages complex advisor-branch relationships and partial data gracefully, powering autofill capabilities and real-time search suggestions for seamless user experience
  • WCAG 2.2 AA compliance - Built-in accessibility ensures equitable access for all users

Results & Impact

Optimizing Client-Advisor Connections Through Design

The redesigned advisor locator transformed how clients find and connect with financial advisors, solving navigation challenges while building smoother pathways to meaningful relationships:

  • Streamlined search discovery - Dual search, filtering, and interactive mapping reduced friction and accelerated discovery
  • Reinforced institutional brand trust - Professional, consistent design strengthened institutional credibility
  • Inclusive Accessibility - Full WCAG 2.2 compliance ensures equitable access for all users

Conclusion

What I Learned

Navigating JSON and API constraints strengthened my ability to balance design vision with technical feasibility. This sharpened my decision-making and led to a cleaner, more focused, and responsive experience.

Challenges I Overcame

I had to support two distinct behaviors, searching by advisor name and discovering by location, while keeping the experience natural and intuitive. Dual search inputs allowed users to enter whatever information they had, interpreting intent automatically and reducing friction.

Key Takeaway

Initial assumptions rarely capture the full range of user needs. Building flexible systems that adapt to uncertainty creates more resilient, user-centered experiences.