The BMO Passkey project was initiated to introduce Passkey as a secure, streamlined sign-in method for BMO’s business banking clients. The goal was to offer Passkey as an additional authentication option alongside existing login methods, enhancing user experience and future-proofing security for digital banking access.
As the UX Designer, I was responsible for designing user flows, wireframes, and annotations that aligned with BMO’s security requirements and accessibility standards. The project required coordination across cross-functional teams to ensure the new feature could be integrated seamlessly without disrupting the current login process.
Sagith Kalaichelvam - UX Designer
Samaher Ramzan - UX Researcher
Lisa Bater - Content Writer
Swapnali Pisat - Business Analyst
Wing Chiu Chan - Product Owner
Sara Yoseph - Product Owner
Cyrus Handy - Product Owner
Eymard Angulo
Karen Lucarelli
April 2025 - June 2025
Wireframing & Prototyping
Content
Design Handoff
Design Communicator
Presentation
Live Demo
Banking
Business
Finance
Agile Methodology
Communication
Microcopy
Product Management
Business Banking Design
Design Handoff
Presentation
Web
Design Process
To support the development of BMO Passkey, I collaborated with Business Analysts and Product Owners to translate user flow documentation into structured Figma Business Scenario files. Given the complexity of multiple user entry points and layered security requirements, I focused on designing clear, branch-based user flows to eliminate ambiguity.
I ensured that each screen state—including edge cases—was annotated with detailed interaction behaviors, validation rules, and fallback logic. This level of specificity allowed developers to anticipate technical needs early on and minimized rework post-handoff.
By approaching the handoff as a shared understanding tool—not just a design delivery—I was able to bridge the gap between design intent and technical execution, enabling a smoother and more efficient build process.
Figma Prototype
Due to a signed NDA with BMO, access to the Figma prototype and design files is restricted. I’d be happy to walk through the work in a live interview upon request. Thank you for your understanding.
Designing for Multiple Entry Points Requires Extreme Clarity:
Business users can access online banking through various portals and device types. I learned how important it is to design with a clear branching structure in user flows to avoid ambiguity, especially when dealing with layered security processes.
Effective Handoff Prevents Rework Later:
A complete and thoughtful design handoff—including scenario-based user flows, screen states, and developer annotations—significantly minimized back-and-forth during implementation. Providing edge-case details early on helped the business analysts and developers plan better.
Annotations Bridge the Gap Between Design and Code:
Developers appreciated the detailed annotations I included in Figma, which explained interaction behaviours, expected validations, and fallback states. This made the development stage more efficient and reduced potential misinterpretations of the design.
"Working on the BMO Passkey project was a fulfilling experience that highlighted the importance of translating complex documentation into clear, actionable design artifacts. I collaborated closely with Business Analysts and Product Owners to convert user flow scenario documentation into detailed Figma Business Scenario files. These files helped developers easily visualize all possible flows—including edge cases—during implementation. The structured handoff, complete with well-labeled screens and clear annotations, was recognized by the dev team as one of the most comprehensive. This project reaffirmed how thoughtful UX design enhances both customer experience and cross-functional collaboration.