The Chequing Account Selector Tool project was a significant undertaking aimed at enhancing the user experience for Vancity. The objective was to develop a tool that makes it easier for users to discover the ideal chequing account tailored to their unique needs. By focusing on user-centric design and incorporating dynamic filtering options, I created a solution that not only simplified the selection process but also reflected Vancity’s dedication to accessibility and financial empowerment. This project showcased my skills in both UX/UI design and front-end development, delivering a seamless, impactful digital experience from conception to launch.
Responsible for research, conceptualisation, design and development.
In this project, I led the design and development of the Chequing Account Selector Tool, with support from a QA specialist who ensured the tool's functionality and a copywriter who crafted the content to align with Vancity's tone and brand.
June 2024 - August 2023
Vancity's chequing accounts were presented on a single page as a static list, without any sorting or filtering functionality. This made it difficult for users to navigate and compare the various account options, leading to confusion and a less efficient decision-making process. The lack of an interactive tool meant that members had to manually sift through information to find an account that matched their needs, often resulting in frustration and a suboptimal user experience. Vancity needed a more dynamic solution that would allow users to easily sort, filter, and identify the best chequing account tailored to their financial habits.
To ensure the Chequing Account Selector Tool effectively addressed the needs of Vancity members, we conducted in-depth interviews with key stakeholders, including the product owner and customer-facing staff.
We also conducted a thorough competitive analysis, examining similar tools and account selection processes used by other banks and credit unions. This analysis allowed us to identify best practices and common pitfalls in the industry.
Dislikes: We found that many tools asked too many questions, some of which didn’t appear to influence the final account recommendation, leading to frustration. Additionally, many tools excluded specialty accounts from the comparison, limiting the comprehensiveness of the selection process.
Likes: We appreciated tools that were interactive, allowing users to adjust options without needing to start over—more like a control board than a step-by-step personality test. Similarly, we valued the ability to receive a recommendation without having to complete every question, as well as the availability of a straightforward option for users who preferred not to engage with an in-depth selector. Finally, tools that presented simple, key information upfront were highly effective, avoiding overwhelming users with details.
To kick off the design process, I created low-fidelity wireframes and two high-fidelity mockups, which were presented to stakeholders for feedback and selection. The first mockup featured a horizontal selector tool positioned above the chequing account cards, while the second mockup placed the selector tool vertically on the left side of the cards. The horizontal layout proved to be less effective, as it required more scrolling and made it harder for users to keep track of their selections. On the other hand, the vertical layout on the left provided a more intuitive user experience, allowing users to easily view and adjust their selections without losing sight of the account options.
The final Chequing Account Selector Tool is designed to be both powerful and user-friendly, consisting of three filters and five input boxes for sorting. These filters enable users to narrow down their options based on key features like fees, account type, and specific benefits. The input boxes allow for further customization, helping users refine their search based on their monthly spending habits and transaction preferences. This combination of filters and input boxes ensures that users can quickly and efficiently find the chequing account that best suits their needs, all within a streamlined and engaging interface.
Usability testing: To validate the effectiveness and ease of use of the Chequing Account Selector Tool, I conducted usability testing using Maze. A diverse pool of over 20 participants, including both Vancity members and potential users, were involved in the testing process. Through this testing, we gathered valuable feedback on the tool’s functionality, navigation, and overall user experience, which informed iterative improvements to ensure the final product met the needs and expectations of users.
Testing Results Analysis: The usability testing revealed that 85% of participants found the vertical layout intuitive and successfully selected an account without assistance. However, some users struggled with the accordion feature for input boxes, which affected their navigation experience. Overall, the tool was well-received, effectively streamlining the account selection process.
Updates After Testing: In response to user feedback, we replaced the accordion feature with pagination using arrows. This update allowed users to view all input boxes at once and improved navigation, making the selection process clearer and more efficient.
In the development phase, I focused on rigorous scenarios and logic testing to ensure the Chequing Account Selector Tool functioned flawlessly. This involved extensive testing of various use cases and edge scenarios to identify and address any potential issues. Additionally, I handled all aspects of coding, including the implementation of interactive elements, filtering functionality, and overall integration, ensuring a seamless and responsive user experience.
The implementation of the Chequing Account Selector Tool significantly enhanced user interaction on the Vancity website. Google Analytics data revealed a notable increase in engagement metrics, including longer average session durations and higher interaction rates with the account selection features. Users were able to more efficiently find and compare chequing account options, leading to improved satisfaction and a reduction in bounce rates. The tool's intuitive design and interactive elements contributed to a more engaging user experience, ultimately supporting Vancity's goal of providing a more accessible and user-friendly account selection process.