Canadian Bankers Association

Member Extranet Portal

back end development
USER EXPERIENCE DESIGN
ux audit
front end development
branding
mood boards
visual design
usability testing
personas
user flows
low-fi prototyping
information architecture

The CBA is one of Canada’s oldest associations with a long history of participating in the formation of public policy that contributes to a sound, thriving banking system. As part of its service to member banks, the CBA provides a secure portal (memberportal.cba.ca) that allows individuals and committees on various topics to meet, collaborate, share documents, and correspond on multiple issues.

Through a digital agency partner, we worked with the CBA in 2017 to modernize the extranet experience and to deliver an elevated service to its members through an improved web application.

This project included rethinking how existing functionality could better serve members, improving overall usability to address feedback from users and establishing a scalable framework that would support growth as the CBA added new features in the future.

My role in this project

  • Conducted a competitive review of similar services available such as WeightWatchers®, MyFitnessPal® and Noom®
  • Developed an overall user flow depicting service onboarding, food logging and integration with 3rd party services
  • Designed and built an extensive set of high-fidelity prototypes using AxureRP
  • Created a detailed property map that presented technology requirements alonside user interactions within the application
  • Completed a full branding exercise including mood boards, logo concepts and associated collateral
  • Designed various app screens and user flows using Sketch
  • Liaised with app developers throughout MVP process
Mobile app visual design samples
Unlike other weight loss apps, Fitmethod aims to simplify the often laborious process of finding and logging food.

In three simple interactions, a food can be entered into the user's food diary. User behavior is rewarded with achievements and educational content around nutrition. is some text inside of a div block.
Navigation and flow samples
The "My day" dashboard provides users with an overview of their current food diary with macronutrient and exercise activity visualizations.
Visual identity mood boards
As part of the rebranding exercise, I developed initial logo concepts paired with mood boards to demonstrate the corresponding design languages.
High-fidelity prototyping
Using AxureRP, I developed an extensive set of high-fidelity mobile prototypes that simulated key tasks like onboarding, logging food and entering physical activity.
User journey mapping
I developed a hybrid user journey / technology diagram that presented user movement through the app alongside key technology decision points. This was developed in parallel with business modelling.
Competitive review
As part of my competitive review, I diagramed one of the key differentiators for Fitmethod - simplified food logging. In this diagram, the number of overall interactions are compared between MyFitnesspal (a key competitor) and Fitmethod for logging a simple food like a banana, and a more complex food like a sandwich.

Our role in this project

  • Lead workshops with CBA stakeholders to define and prioritize objectives for the extranet redesign project
  • Created detailed user flow diagrams, use cases and interaction visualizations to illustrate future-state functionality and behaviours
  • Developed an extensive set of interactive wireframe prototypes to depict proposed state, incorporating modern UX principles and UI conventions for viewing/editing data
  • Created an intuitive, simple visual design founded on Google’s Material Design principles
  • Worked collaboratively with internal development teams (front and back end) to realize the proposed UX and visual design into the application

A particularly challenging part of this engagement had to do with varying access levels/user accounts, which dictated what content (or even entire sections of the application) were visible or accessible to the user. This involved creating different states for prototype screens that changed depending on the user’s access level.

Other enhancements introduced as part of this projects include:

  • Simplifying processes by introducing multi-step flows for everyday tasks like uploading documents, sending correspondence or scheduling meetings
  • A responsive design, allowing bank members to access the extranet on any device type

View additional assets from this engagement

View more work samples

Receive user experience, product design and digital marketing updates

Sign up to receive periodic email communications from Input UX with our latest insights, downloads and tips around user experience and product design. We'll never spam you or sell your contact information to anyone, and you can unsubscribe anytime if you're not loving it.