Financial calculators
Timeline
January 2024 – February 2025
Client
Internal Wealth and Investment advisors and prospective clients
Live calculators
Investment & Wealth
Mortgage journey
Scope
Competitive analysis
Journey mapping
Stakeholder collaboration
Usability testing
User research
Wireframing & prototyping
ATB’s calculator initiative aimed to develop a suite of 14+ financial tools for clients and advisors, supporting key business processes and client’s financial journeys. Existing calculators were overly complex and lacked sophistication, leading to friction and high drop-off rates. Additionally, ATB’s limited client-facing calculators forced advisors to rely on competitor tools. The key objectives were:
creating comprehensive tools to support advisor-client interactions
providing clients with self-serve options that would help them make informed financial decisions while also offering financial education
improving the mobile calculator experience for clients on the go
As co-lead Product Designer, I focused heavily on visual design including data visualization, contributed to user research alongside our key research partner, and worked closely with stakeholders, product managers, and developers to improve design process visibility and build trust across teams.
Prioritizing functionality and usability, my experience on ATB's brand team ensured alignment with the overall brand while allowing room for creating "surprise and delight" moments. Eye-catching illustrations and subtle interactions enhanced the flow without distracting users from key financial decisions.
My role
Understanding the problem
The old calculators had numerous issues, including (but not limited to): non-responsive layouts and a broken mobile experience, poor accessibility, and outdated UI, decreasing trust with clients.
Building 14+ calculators, each with unique features and functionality, posed a significant challenge for our team. Key risks included:
Pressure on dev and design teams, potentially causing stress for stakeholders due to tight timelines.
Mobile display issues, particularly with scroll depth, risking clients missing results displayed too far down the page.
Meeting accessibility standards and maintaining a unified look and feel.
To address these, our team implemented the following solutions:
Active leadership: Coordinating timelines, committing to deliverables, and maintaining clear communication helped build trust and align the team on a shared vision.
Design templates: Shared patterns and components, like the “bottom sheet” from our design system, accommodated business requirements, accelerated design and reduced dev effort while improving mobile result displays.
Accessibility reviews: Each calculator was reviewed with an accessibility expert to ensure WCAG standards were met, providing functional, usable tools for our users.
Considerations
Our approach
Research & discovery
To inform design decisions, our team conducted market research and competitive analysis to gather key insights about our users.
Design & usability testing
Based on insights from research, designs were created, tested, and refined through user and stakeholder feedback.
Hand-off & implementation
Once designs met accessibility standards, technical requirements, and stakeholder approval, they were handed off for development.
Lessons & achievements
Designing 14+ calculators - often simultaneously - presented challenges and tested my ability to adapt and meet timelines. However, key to success included:
Constant communication: Regular touch-points with stakeholders and developers eased concerns around delivery times and provided visibility into the design process.
Collaboration: Frequent discussions with stakeholders and product teams helped define requirements early, mitigating scope creep and ensuring alignment on deliverables.
Templates and reusable components: Leveraging the design system and templated designs enabled a quicker, low-effort process, resulting in consistent, quality deliverables.