Enhanced Calculators 2.0
Tangerine Calculators Optimization 2.0
For this UX project at Tangerine, we’ve optimized the existing calculators and transformed them into a better digital experience product. My Focus was improve the experience, design and efficiency of the second task as well as how users managed these connections later on (ie. to increase the conversion rate). So here’s how my team and I tackled this.
🔵Saving, Chequing and GIC account:
It was simple calculation for each product, but we wanted to educate people by demonstrating that the fees saved can equate to a lot in terms of savings towards their personal goals. [Widgets – embedded on page, simple version of a tool which allows users to toggle with 1-2 inputs. No strong CTA as it’s on the page with existing CTAs.]
A lot of times people feel overwhelmed when purchasing house or condos and they are afraid if they can do this by themselves about getting a mortgage online. And also people will always look for a way to find better lifestyle by refinancing their mortgage. So that’s where people like to connect. [Standalone – separate page with more content/copy supporting it, has more input options or questions, very clear CTAs. SEO and advertising point here.]
Chequing & Savings calculators will be widget calculators since they are simpler than investment and mortgage calculators. We want to make the calculation much easier and simpler enough to understand from users’ volition. We believe that by optimization, we can help Canadians to make a smart decision for their lives and help the business goal which is to increase the conversion rate for the Tangerine pre-qual application.
Quant. & Qual. Research
Customer Journey Map
Lo & HI-Fi Prototypes
1 Creative Service Director
1 Senior Digital Manager
1 Product Designer
1 Project Manager
1 Creative Service Lead & Specialist
1 Frontend Developer
1 Analytic Team
1 Backend Engineer
1 QA & UAT
Can we improve customer engagement and acquisition? – also helping with financial planning for young spenders?
But with the current calculator, the tools are not very accessible from SEO stand point and actionable elements are hidden under the left nav. - neither very engaging nor practical. People want an easy way to find more information instead of calling the call centre. Moreover, they don’t deliver the accurate numbers from the calculations and even if they do, they don’t carry over the data to the either on-boarding application or pre-approval on-boarding flow through the secure site.
Increasing the conversion rate for the Tangerine mortgage pre-qualified application and other on-boarding flows through the secure site.
Time on task (IE. Too many input fields required and types of calculators)
Click drop rate & errors through the conversion
Personas – User Discovery
I’ve created the target segments for Tangerine. It identifies six groups of people at different life stages that fit well with our brand and value proposition.
We keep the consistency of these visual persona characters instead of always seeing some randoms.
🔴Mortgage Standalone Calculators – Target Users
Savvy Young Families
• Jennifer (couple), 34 Years old Avg.
• $89K Household Income (Median)
• I’d appreciate information about: Mortgage, Investments, Chequing, Credit Card and Savings
• Very tech savvy
• A start up family (First home buyers)
• Exhausted after a long day of work (easy of use)
• Too difficult to understand? (Educational info)
• Anxiety to make a decision (Talk to our mortgage specialist)
• Seeking a better lifestyle (Adjust their personal preference)
Family With Children
• Karen, 50 Years old Avg.
• $110K Household Income (Median)
• I’d appreciate information about: Mortgage, Investments and Savings
• Might be new to the digital (Talk to our mortgage specialist)
• Property investor
• Too difficult to understand? (easy of use)
• Planning for retirement
• Seeking a better lifestyle (Adjust their personal preference)
The Design Challenge & Consideration
A simple platform and a good onboarding experience should be enough to make users accept the new platform.
“How can we simplify the overall user experience reduces friction, removes obstacles?”
🔵Savings & Chequing
All these calculators will be widget calculators since they are simpler than investment and mortgage calculators. The calculation is easier than before. By only few clicks, users will have the desirable result. It’s cleaner and easier to understand the functionality.
- Include stress test calculation of 2% to more accurately reflect affordability.
- Strong CTA to schedule or request a call for a Mortgage Account Manager to contact you.
- Mortgage payment schedule (in a comparison form) can be a powerful tool for the MAMs on a call. It can demonstrate the value and difference of the rate between us and another FI.
HMW (How Might We)
Calculator Proposal & Solutions
Based on the current daily average traffic data and complexity of the product calculations, what we’ve done:
Simplified layout and emphasize the visual hierarchy (Adapt to the new visitor site)
Easy of use
Increase SEO ranking
Providing educational information
Adapt to the new environment website
Getting people familiarized with their on-boarding process in secure site.
• Schedule a call (TBD)
• Increase SEO ranking
• Print, email
• Forward thinking blog & insights
• Add a scenario in calculation
This is the new 2.0 categorization & browsing for the visitor site. The widget calculators will be embedded to the product detail page (PDP) and the standalone calculators will be a separate page, focused on the user flow.
🔴Mortgage – Sketch #1 Ideation
🔵Saving & Chequing – Sketches & Wireframes
🔴Mortgage – UX Flow
Questions Flow Simplified – How much can I borrow?
🔵Saving & Chequing – UX Flow
🔴Mortgage – Wireframes
🔵Saving & Chequing – Wireframes
🔴Mortgage – Standalone Calculator
Result Page - Adjustment
🔵Saving & Chequing – Widget Calculator
Since it was more for optimizing the calculators, we’ve simply tested them with five people on usability and ensuring that the deliverable messages were clear. On the contrary side, we haven’t fully been able to bring the accessibility into the design system yet – which it would be coming in our next pipeline.
• Brain cycles (too confusing)
• Physical effort
• Non-routine (too new)
Returning from the feedback:
• Repositioning “Remaining Cash” area
• Confirming with “Soft check” functionality
• Ensure that people are visually engaged through the experience
🌵Prioritizing and address the trade-offs – It was a short timeline. It was a practice for how to focus on what really matters the most from UX perspective and tried workaround within the timeframe.
🌵Understanding – I have enhanced myself in understanding the broad spectrum of design, thinking about the limitations and asking right questions.
• Always be ready to learn, re-evaluate and adjust.
• Select participants from different areas.
• Usability test of the prototype with users.
• Design direction.