Intro
Leading design and front-end development for CIBC's Advisor & Branch Locator
CIBC needed a user-centric solution to help clients find advisors and branches with ease. As UI Designer and Developer, I redesigned their locator experience to directly address user needs and stakeholder goals.
Beginning with a working prototype, I refined the experience through iterative feedback sessions and usability testing. The outcome focused on accessibility and user empathy, ensuring users could easily search, filter, and connect with confidence.
Problem statement
Problem statement
Redesigning the CIBC Advisor & Branch Locator Experience
CIBC's previous advisor and branch locator created friction for users, with limited search capabilities, accessibility gaps, and inconsistent branding. To address these challenges, the redesigned experience focused on clarity and usability. The new experience had to solve:
- Fragmented search experience - Enhance overall search usability to deliver relevant results
- Brand inconsistency - Stay true to CIBC's brand identity to reinforce trust and familiarity
- Unclear pathways - Provide clear calls-to-action to guide users toward meaningful engagement
- Accessibility gaps - Deliver a seamless, intuitive, and accessible experience across desktop and mobile
User Analysis
User Analysis
Understanding the Path to Financial Connection
I identified two distinct user journeys that required different but complementary solutions:
Targeted Advisor Search: Users who knew specific advisor names needed quick, direct access to comprehensive professional profiles, credentials, and contact information.
Location-Based Discovery: Users exploring financial services in their area required filtering capabilities, geographical context through interactive mapping, and clear branch information to make informed decisions.
Development Solution
Development Solution
Easy and efficient search
I designed two clear inputs, name and location, to support distinct user intents and reduce friction during search. I removed the “search by” selector since CIBC's internal business lines already added complexity to the search experience. To streamline interaction, I implemented autofill in both fields, allowing users to search quickly, even with partial information. This simplified approach led to faster advisor selection in user testing and made the overall experience more intuitive and efficient.
Connecting with the right person
The experience includes interactive Google Maps integration, giving users immediate location context for every result. Users can filter by language, explore advisor cards with essential info and clear CTAs. Clicking map pins to quickly narrow results by location - all designed to streamline the path to the right advisor.
- Searching by name displays advisor cards with CTAs linking directly to their website or bio modal.
- Searching by location shows branch cards with CTAs that reveal advisors available at each branch.
Advisor cards include CTAs for more information and contact details, supported by an interactive Google Map for location context.
Branch cards include CTAs for more information, website, and contact details, supported by an interactive Google Map for location context.
Brand Consistency
To maintain alignment with CIBC's brand identity, I held weekly meetings with the design team to gather feedback and refine the interface. This collaborative approach ensured the experience fostered user trust, reinforced brand familiarity, and supported strategic goals.
Implementation Features
I executed the technical development with focus on performance, accessibility, and seamless integration.
- Responsive Architecture - Developed fully responsive interfaces and consistent functionality across all devices
- Functionality - Utilized dummy JSON data to enable comprehensive front-end testing and validation before backend integration
- Accessibility Standards - Adhered to WCAG 2.2 AA standards, ensuring keyboard navigation and screen reader compatibility
- Cross-Team Collaboration - Coordinated with backend developers to ensure quality assurance throughout implementation
Results & Impact
Results & Impact
Redesigning the CIBC Advisor & Branch Locator Experience
The redesigned platform delivers measurable business value by streamlining client connections and reinforcing CIBC's digital presence.
- Enhanced User Engagement - Clear and comprehensive information architecture drive higher connection rates between clients and advisors
- Improved Search Efficiency - Dual-search functionality and intelligent filtering reduce user friction and time to connect with the right advisor
- Strengthened Brand Trust - Consistent brand integration and professional presentation reinforce CIBC's market position
- Universal Accessibility - WCAG-compliant design ensures all clients can effectively navigate and utilize the platform
Conclusion
Conclusion
As both UI Designer and Developer, I led the creation of an intuitive, accessible advisor and branch locator that serves hundreds of users monthly. By focusing on clarity and seamless interaction, the platform empowers users to make confident decisions and fosters lasting trust in the brand.