First National

My Mortgage Customer 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

First National is Canada’s largest non-bank lender and currently serves more than 200,000 Canadians for their residential mortgages. Through a digital agency partner, we worked with First National to redesign their secure customer-facing portal, My Mortgage from late 2016 until early 2018. Initially launched in 2009, the existing My Mortgage property showed its age, but more importantly, was providing an inferior experience to First National customers who use the portal to manage their mortgage.

Following a comprehensive UX audit, we helped educate the client team on modern UI principles, recommended new or enhanced functionalities and prepared a detailed report to illustrate how these updates will positively impact the overall user experience for customers.

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

  • Completed thorough, heuristic UX audit and expert reviews of the existing website
  • Surveyed customers on their needs, wants and opinions of the current website
  • Interviewed front-line customer support representatives to understand customer and business requirements better
  • Prepared highly-detailed, responsive wireframes depicting the proposed UI/UX )25+ screens)
  • Validated the proposed UX and task flows through iterative task-based usability testing, ultimately scoring 93% successful task completion with customers
  • Prepared visual designs for select screens while providing art direction to other designers
  • Responsible for overall project management and coordination, working with the client-side development team and internal agency resources

This project involved careful engagement with multiple stakeholders across the company, particularly with the clients own development team who were tasked with ultimately building out the proposed UI/UX updates delivered through this project. As part of this project, I planned, built, and validated numerous UX enhancements, including:

  • A reimagined architecture and user flow for customers
  • The introduction of content marketing and thought leadership components
  • New back-office processes that ultimately translated to improved transparency for mortgage holders.
  • Modernized customer support options, an area that was previously substandard
  • A visual design the reflected the organizations rebranding of the portal
  • A responsive design framework, making the portal accessible on all device types

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.