AU
Members had to navigate through multiple card pages and extensive content to understand each card's features.
We recognized the need for a digital credit card selection tool to streamline the decision-making process for its members. Previously, we lacked a tool that simplified choosing the right card. Members had to browse and navigate through various card pages, scrolling through extensive content to understand each card's features. To reduce decision time, minimize back-and-forth navigation, and decrease call volumes to our member contact centre, we decided to build a tool that makes the process easy and allows quick form submissions.
A quick market analysis showed how major banks design their credit card selection tools. I tried to understand features that could inspire our tool at Servus.
Competitor features
-
Scotiabank: Advanced filtering options and detailed comparisons but can be complex.
-
RBC: Provides a robust rewards calculator and extensive educational resources but may seem slightly complex.
-
CIBC: Focuses on ease of use with user-friendly comparisons and extensive educational articles.
-
TD: Features a highly interactive interface and a robust rewards calculator.
-
BMO: Includes detailed filtering options and integrates customer reviews for additional insights.
I created an intuitive user flow for the tool by closely working with stakeholders and analysts from Payments & Cards team.
After reviewing features from other banks, I outlined our approach. We aimed for easy navigation and quick, personalized card selection.
We categorized users into Personal, Business, Student, and New to Canada, each with tailored questions. For example, personal users specified values (cash flow or rewards) and income to determine card eligibility, while business users chose between rewards or cash flow management.
We focused on minimizing complexity and avoiding information overload. Feedback from stakeholders helped refine the flow.
The initial design blueprints laid the groundwork for a user-friendly interface, prioritizing intuitive navigation and a seamless user experience.
By visualizing the layout and structure early on, we were able to refine the design before moving to high-fidelity prototypes. The wireframe sketches were crucial in ensuring that the final tool was both functional and intuitive, providing a simple and seamless experience for Servus Credit Union members.
I wrote and coded the front-end after finalizing the flow and designed the high-fidelity mocks, including all visual elements, color schemes, typography, and interactive components.
Working closely with the Cards team, I ensured that the high-fidelity mocks maintained the simplicity and ease of navigation established in the wireframes. The goal was to bring the wireframes to life, providing a realistic preview of the final user interface.
These high-fidelity mocks were essential for gathering feedback from stakeholders and conducting usability testing. They provided a clear and comprehensive visualization of the tool, allowing for fine-tuning before development began.
Additionally, I integrated Circle Rewards and Profit Share Reward features for users to utilize these benefits.
I ensured the design was fully responsive, maintaining functionality and aesthetics across various devices and screen sizes.
This web responsiveness guaranteed a seamless user experience whether accessed from a desktop, tablet, or smartphone.
The Credit Card Selection Tool launched by Q3 2021, recording close to 200 unique events in its first quarter. By Q4, it achieved a 7.5% conversion rate and drove a 25% increase in Circle Rewards participation, with more members investing points in Circle Rewards GICs.
The Credit Card Selection Tool exceeded expectations by delivering a seamless and engaging experience, ultimately driving higher conversion rates and member satisfaction. With this project, I could design and implement solutions that effectively meet user needs while contributing to key business outcomes.
Credit Card Selection Tool
2021
Servus Credit Union needed a digital credit card selection tool to simplify the process for members, helping them make informed decisions without relying on the member contact centre or physical branches.
Roles and responsibilites
-
Designer and Front-End Developer (HTML, CSS, and JS).
-
Designed content structure and user flow.
-
Analyzed competitor tools for best practices and inspiration.
-
Worked with backend developers for API integration, and collaborated with testers to identify and fix UI/UX bugs.
Results
-
The tool launched successfully by the end of Q3 2021.
-
Recorded close to 200 unique events.
-
Achieved a 7.5% conversion rate by the end of Q4, significantly increasing from previous quarters.
-
25% increase in member participation for Circle rewards.
Results
-
The tool launched successfully by the end of Q3 2021.
-
User Engagement: Recorded close to 200 unique events.
-
Achieved a 7.5% conversion rate by the end of Q4, significantly increasing from previous quarters.
-
25% increase in member participation for Circle rewards.
