.png)
Client: Scotiabank
Project Type: Research, Identity, Responsive Website
Year: 2019
We developed future ready eHOME portal for both web and mobile. We helped them with a comprehensive technology implementation thereby enabling them to position themselves as a leader in the Mortgage industry.
My Role: UX/UI Designer collaborating across product and engineering teams
Tools: Figma, Miro, InVision, UserZoom
__Project Overview & Goal
Bringing online revolution to mortgage industry
With ScotiaBank eHOME,Canadians can apply for a mortgage completely online, track the application status through real-time updates, and complete the closing with a lawyer without requiring an in-person appointment with a mortgage specialist or financial advisor. Supporting documents are easily uploaded to a secure vault and, if needed, a dedicated team of specialists is a phone call away.
Probelms:
Mortgage applications are high-stakes, high-cognitive journeys that traditionally rely on branch visits, manual documentation, and fragmented digital touchpoints. Users often struggle with unclear steps, complex terminology, and a lack of confidence while making long-term financial decisions.
Goal:
Build a fully digital end-to-end mortgage application experience that reduces drop-offs and simplifies decisions for users.
What success looked like:
-
Reduce form abandonment
-
Deliver a clear, intuitive process
-
Improve user confidence & trust
Research
&
User Insights
__Research & Planning
Gaining insight & empathy
We conducted stakeholder workshops and heuristics to understand where users struggled most — especially around form complexity, language clarity, and process visibility.
-
Stakeholder workshops
-
Competitive analysis
-
Usability studies of existing process
-
User surveys / interviews
Key Insights:
Users felt intimidated by complex forms
Many dropped off due to technical jargon
Users wanted guidance & progress transparency
Information Architecture (IA)
We will be the first to digitise the mortgage application process to make it simple, personalised, and convenient in order to alter the mortgage landscape in Canada
PROBLEM DEFINITION
&
UX STRATEGY
__UX Strategy & Project Goals
Aligning UX Strategy with Business & User Goals
To ensure alignment across business, design, and technology, we defined a shared set of UX and product goals early in the project. These goals helped guide design decisions, prioritize features, and define success metrics.
Why These Goals Mattered
Ensured transparency across a complex financial journey
Balanced user needs with business outcomes
Provided measurable success criteria for design decisions
From Business Requirements to UX Opportunities
After synthesizing research insights, we worked closely with stakeholders to translate business and technical requirements into clear UX opportunities. This helped ensure that features were both user-driven and technically feasible.
How This Informed Feature Creation
-
Mapped business requirements to real user needs
-
Identified high-impact opportunities (e.g. Application Tracker)
-
Prioritized features that improved clarity and progression
WIREFRAMES
&
ITERATION
__WIREFRAMES & ITERATION
Validating User Flows through Wireframes & Iteration
Site-Map
To reduce cognitive load and help users navigate a complex mortgage journey with clarity, we restructured the information architecture around user goals rather than internal system structure.
The sitemap was designed to:
-
Group related information into clear, logical sections
-
Prioritize primary user tasks over secondary actions
-
Reduce unnecessary navigation layers
-
Support a linear yet flexible mortgage application flow
By simplifying the overall structure, users can easily understand where they are in the process, what is required next, and how to move forward, improving both usability and confidence throughout the journey.
Wireframes
We knew from our research that the onboarding and application form page were where drop off could occur. We explored a variety of layouts for those two pages in wireframes to determine which type of layout would create an easy and engaging user experience.
The focus at this stage was on:
-
Breaking down the mortgage journey into clear, manageable steps
-
Ensuring users always understood where they are, what’s next, and what action is required
-
Validating content hierarchy, CTAs, and system feedback for complex financial tasks
Multiple wireframe variations were explored across key stages such as welcome screens, application tracking, pre-approval states, and conversion prompts. These iterations helped refine:
-
Entry points based on user intent and application status
-
Progressive disclosure of information to reduce cognitive load
-
Consistent interaction patterns across different mortgage states
Regular reviews with product managers and engineering teams ensured the flows met business requirements and technical constraints, reducing rework during development.
DESIGN SYSTEM
&
VISUAL FOUNDATION
__Design System
Simplifying complexity
Scotia atomic design system aims to make complex information approachable and beautiful. This is achieved through the use of more humanistic elements, and organic animated graphics that infuse the site with life and personality.
-
Visual consistency
-
Accessibility and readability
-
Scalability across screens and platforms
Final Design
&
OUTCOMES
__Final Design
Designing website that's relevant and relatable
The final design brings together clarity, guidance, and flexibility to support users through a complex mortgage journey across both web and mobile.
The experience is centered around a personalized eHome Hub, acting as a single source of truth where users can:
-
Understand their current application status at a glance
-
Resume applications seamlessly across devices
-
Take the next best action based on their progress and intent
Key design decisions include:
-
Intent-based entry points that allow users to start from affordability, pre-approval, or a full mortgage application
-
Progressive step indicators that visually communicate where users are in the journey and what remains
-
Contextual CTAs and prompts that adapt based on application state, reducing confusion and drop-offs
-
Clear visual hierarchy and spacing to surface critical information without overwhelming the user
Illustrations, color usage, and micro-interactions were intentionally kept friendly and reassuring to build confidence during high-stakes financial decisions, while maintaining consistency with the brand’s design system.
The result is a cohesive, scalable interface that balances business goals, technical constraints, and user confidence, enabling a smoother and more transparent mortgage experience.
Regular reviews with product managers and engineering teams ensured the flows met business requirements and technical constraints, reducing rework during development.
Enhancing the Journey Through Motion
The final experience comes together through thoughtful motion—bringing clarity, reassurance, and a sense of progress to a complex financial journey.
Outcomes
Designed a scalable, state-driven mortgage journey that aligned user intent with business goals.
Designed a complete mortgage experience from scratch across web and mobile.
Defined clear, intent-based user journeys for affordability, pre-approval, and full applications.
Introduced state-driven flows and progress indicators to improve clarity and user confidence.
Established a scalable foundation with reusable patterns ready for development.
LEARNINGS
&
NEXT STEPS
__Key Learnings
What We Learned & How We Move Forward
Early IA decisions shape the entire product:
Defining information architecture and journey states upfront prevented downstream complexity and rework
User intent must drive structure:
Mapping flows around user readiness (exploring, planning, applying) created a more intuitive experience than feature-based navigation.
Guidance is as important as functionality:
Users need reassurance, clarity, and momentum—especially in high-risk financial journeys.
Cross-functional alignment is critical
Close collaboration with product, engineering, and business teams helped translate abstract goals into feasible, user-centered solutions.
Design systems are essential from day one
Establishing shared components early enabled consistency, faster iteration, and easier handoff.
Next Steps
-
Validate flows through usability testing and analytics.
-
Introduce personalized guidance based on user readiness.
-
Enhance accessibility and compliance.
-
Expand the design system to support future features.
