︎




DESIGN CHALLENGE

ATB Financial is a major financial institution owned by the Province of Alberta, Canada. The goal was to reimagine the mobile retail banking experience from the ground up focusing on modern client functionality, interaction, and demands. Broadening appeal to new target demographics (e.g. age, SES) while retaining existing clients by optimizing experiences to solidify long term relationships using contextual personalized products to grow the depth of client relationships. 
Client: ATB Financial
Year: Nov. 2018 - Jan. 2021
Roles: iOS Design Lead; UX/UI Design
Skills: Ideation, information architecture, wireframe, prototyping, usability testing, user flow mapping, UI design(Control definition, usage & accessibility) etc.
Tools Used: Sketch, Plant, Overflow, Zeplin, Axure, Invision, Jira, Mirro, etc.

LAUNCH DATA


The app MVP was launched on March 2021.
iOS App store ratings: 14k (13.5k increase - old 578)
iOS App score: 4.6 (~2.6 increase - old 2.0)

BETA TEST
Utilized beta test to gather metrics and KPIs to confirm, influence, or reassess design decisions.



Figure 1: App store ratings, previous vs current Figure 2: App store ratings Figure 3: Beta test result

REIMAGINED:  A NEW CLIENT CENTRIC DIGITAL PLATFORM

The app adapts iOS and Android native design components, and is required to follow WCAG (Web content accessibility guidelines) level AA guideline along with many complex financial, regulatory, and legal requirements. The accessibility was kept in mind and was assessed through a heuristic evaluation.

Accessibility 1. Use text, color and icon for different states in forms (ex. from left to right: change password error states, transaction list, money transfer segment control) Accessibility 2. Used meaningful consistent icons throughout the app Accessibility 3. Integration of "oversized targets" for ease of use through design and coding Accessibility 4. Focus group heuristic violation results Accessibility 5. Voice over & screen magnification issues identified and ranked
 
Example 1. Interac eTransfer Wireframe Sample Example 2. Bank terminology
  • Paramount to create a feeling of trust, transparency and confidence for clients.(Example 1. Autodeposit feature is a fast and convenient way to send money that offers cyber security benefits that protect the transaction and users. Based on our Omnibus data, we found out 24% users who were not aware of feature, and 23% who were aware, but prefer to use Q&A verification due to the perception that it is more secure and prevents hacking/fraudsters. The design solution was integrated to place emphasis on the most secure way to our users when they are receiving an e-transfer using Q&A verification.
    Example 2. Provided easy to understand definitions for banking terminology- Account balances in this case.)
  • Delivered a fully digital platform that is highly personalized for users.
    Through research, we find out people would like to personalize the homepage order of their displayed accounts based on their needs or preferences.
Account summary homepage reordering
  • Clients have demands and requirements for more control and choice related to banking to increase ease of use.
    Explore guided ways to help users understand pay credit card payments functionality and differences (i.e. minimum, automatic, full balance etc.)

Copyright Simone Simin Li, 2018. All rights reserved.