Financial Products Selector

Client: Financial Consumer Agency of Canada (FCAC)

Timeline: 2.5 months

Tools: Adobe Illustrator, Invision, Excel

My contribution: Functional requirements review, test design, test participant recruitment, hi-fi mockups and lo-fi prototype development, and reporting

Team: An information architect, a UX Designer, and myself

Project Overview

The Credit Card Selector Tool and the Accounts Selector Tool are part of a series of products by the Financial Consumer Agency of Canada (FCAC) that aim to help Canadians make better financial decisions. Using the tools, users would filter through products uploaded by financial institutions and the FCAC. The interface for the two products was developed, tested, and revised for this project.


The two financial tools each had three users and consequently three “views”:

  • Consumer View: Search and compare products
  • Financial Institution View: Create new products and manage old products, manage other users from financial institution
  • FCAC View: Manage existing products, approve and reject product submissions, manage financial Institution users

Each view serves a different use pattern, but there needed to be some consistency throughout the three views:

  • look and feel, incorporate WET
  • WCAG 2.0 and support limited use of Javascript
  • Support mobile view – limit excessive scrolling (horizontal & vertical scrolling)


  • The project was successfully completed, despite tight timelines and strict functionality requirements.
  • While there were various capabilities designed for the FI and FCAC View, consistency was kept where possible to allow users to spend less time learning the products.

Initial mock-ups and usability test results

Hi-fi mock-ups and click-through prototypes were developed according to FCAC’s functional requirements to test with the Consumer and Financial Institution users.

Below are the mock-ups before and after usability testing. The numbers indicate major points of change and key observations. (Click to expand images)

  1. Consumer users were distracted by the repeated text at the top of the page. Removing the repeated text also helped pull important content up on the page.
  2. Users often missed the instructions on selecting two products to compare, as it was grouped with other text. Instructions were placed in a more contextual location.
  3. Consumer users were confused by the sorting interface and had to learn how to use the sort functions. A more conventional layout was applied.
  4. In case users miss the directions on selecting two products to compare, unselected items gray-out and become uninteractive once two products are selected.
  1. Users found the coloured text helpful in quickly identifying the differences in the two products.
  2. Some users couldn’t identify right away what the colour difference was for. An indicator above the table was added to clarify (and comply with WCAG 2.0’s Use of Color).
  3. The layout of the comparison table was adjusted to give greater contrast between the table headers and body text. This created a more scannable page.
  1. Many Financial Institution users missed the main body of the page content, as the sort and filter functions pushed the main content beneath the page fold. All elements were rearranged to create a more succinct layout.
  1. Financial Institution users had great success understanding the Action Preview pages. This was especially the case for deleting products that were at various stages of being published (some required a “Request to delete”).

What I learned

  • Develop and test in lower fidelity, if possible, to allow clients to focus on the bigger picture, rather than the details of the screen
  • Follow established patterns of user interaction, rather than try to reinvent the wheel