Desjardins App – Case Study

Overview

The company

Desjardins is a financial institution in Canada and across the world that gives users access to their banking account with multiples services. Their app provides to their clients more mobility and eases to use their services like checking the last transactions, make a mobile deposit, pay bills, etc.

Company: Desjardins
Project Type: Personal
Date: 20 July 2019
Services: UX Design, UI Design
mockup_desk_smartphone

The problem

Most of users needs to use or access some features the website provides that are not implemented on the mobile app, in order to suit their goals, ease of utilization, flexibility and gain in time to not go back on the website or calling their branch (i.e: download statements, order cheques, inter-institution transfer…).

Approach

I’ve used the Design Thinking approach in order to understand the target user’s needs and balance those with the company’s objectives, security banking restrictions, and user engagement.

The challenge

Building a platform who suits users needs, make easier the navigation and the use of some features which can be added in the app from the website that will improve user engagement, autonomy, and trust.

Outcome

A better information architecture, user interface that improves the user experience and integrates useful features into the current platform.

Understand

My research focuses on the objectives to be achieved, research on the market (competitors and what they offer, features in other financial services, feedback from users …) to better understand the banking sector, the related constraints, better meet the needs of users to limit their frustrations and fears. Those research will help me better focus and define the main issues.

Research Goal:

  • Define people’s common behaviors when using Desjardins’s app and website.
  • Determine what makes a banking experience satisfying.
  • Determine users’ biggest frustrations when using Desjardins’s app.
  • Define the standard for banking services.
  • Understand user needs when using banking services and identify areas for improvement.

Market Research:

The best way to gather a maximum of feedbacks from the application was to starts my research on the Play Store and iTunes Store for comments related to the missing features, feature issues, the latest updates, their overall experience, and the user interface.

Competitive Analysis:

Then I needed to analyze the most potential competitors for Desjardins, in order to have a better overview and more understand the Strengths, Weaknesses & Similarities between banking Canadian services in the industry.

Expectations from Users:

Finally, I used a survey for helping me understand better the expectations, needs, and actions users do the most. Around 21 people answered the survey (80.95% of users with an account at Desjardins use the application) and I also interviewed my close circle and some people from networking nights.

Thanks to the results, I found that :

  • 100% People are familiar with banking apps;
  • Most people use “very often” and “sometimes” the app;
  • Most people usually the app to “transfer” (90,48%), “consult” (85,71%) & “pay” (66,67%);
  • Most people “consult their account” (61,90%), “transfers” (61,90%) & “Pay” (47,62%) most of the time;
  • Most people would like to see “inter-institution transfer” (52,38%), “change contact information” (47,62%), “statements and documents” & “financial overview” (42,86%);
  • People would like to “see the current payment balance listed in the credit card operations”, “easier to understand credit card balance at-a-glance”, “more details about each transaction like commerce, hour…”, “same features as the full website on the mobile app”, “alert when there are automatic withdrawals”;
  • Generally, people have a “very positive” (61,90%) experience on the app.

To view the full survey, click here.

Define

Group Brainstorming:

I interviewed 3 friends who are Desjardins’s users, to participate in a rapid ideation session to generate a maximum of ideas in a limited time. The starting question « How can the Desjardins application improve the daily lives of people who use it, especially the elderly? » was thus clarified in 3 sub-questions:

  • to have some personalization;
  • to have detailed information;
  • to deal with unforeseen unusual situations.

If you want the brainstorming board click here.  

Business & User Goals:

My competitive analysis produced the following insights :

Business:

  • Maintain a competitive edge in the banking industry
  • Improve user engagement and retention
  • To be the first in the hearts of people

User goals:

  • Quickly access on their banking account
  • Find easily information and detailed
  • Same features from the website
  • Alert’s (automatic withdrawals)

Information Architecture:

I first listed the various initial features of the mobile application and the different means of navigation to define and reorganize the access to information in an optimal way. I prioritized the most used features based on usage patterns through a short survey and short interview.

Subsequently, I created a sitemap of the application with new navigation and features:

Interaction Design:

I completed a task flow and user flow to imagine the ways a user might navigate through the app using the social feature to achieve their goals. These tools allowed me to ensure that the information was organized in a way that is intuitive to the user.

Ideate & Prototype

Wireframe: Low-Fidelity

I began the ideation process of wireframing by drawing out the main screens with sketches. My goal was to provide a structure and design that would meet the needs of users while keeping the objectives of the company taking into account the constraints of content, design and ergonomics.

My low-fi wireframes served as a solid base for my digital wireframes:

Mockups: High-Fidelity

I created mockups on Sketch, following the UI requirements document I created taking in consideration all the features, elements and brand design guideline into the design.

Then, I created some Mockflows as the previous Userflows to better understand each interaction between pages:

You can have a glance between the current UI from the Desjardins’s app and my suggestions :

Prototype:

To navigate through the prototype, please click on the link below:

Test

Usability Testing:

In a qualitative approach, the formats that I used to conduct the user tests are: synchronous remote test using Zoom and face test using Loom to record the screen and sound of the computer or AZ Screen Recorder for the smartphone.

The objective of the test is to evaluate the system to simulate specific tasks for end-users on a functional prototype on Invision via usage scenarios :

  • Find a document summarizing your banking information so that it adds you as a beneficiary.
  • Find a solution to pay as of July 1st the rent to your new owner.
  • Find the document allowing you to obtain information on past transactions in March 2018.
  • Find out how to change your postal and mobile details in order to update them.

In order to better plan the test sessions, I built a test plan (view test plan), an observation sheet (view the sheet) and a protocol (view protocol) to describe in detail the progress of the assignments.

I asked 3 participants between 22 to 29 years old to test out the prototype’s usability with the protocol « Think aloud », facilitating the interpretation of observations and gives meaning to the actions of users.

The tests lasted about 30 min between the different stages:

  • Before handover
    • The participant’s welcome and instructions (5 min)
  • During the handover
    • Realization of usage scenarios (10 min)
  • After thehandover
    • Post-Test survey (5 min)
    • Debriefing (10 min)

Analysis and Interpretations of Results:

First, I listed all returns without exception on boards different type of boards: a summary of the test results and a matrix identifying the frequency of each problem in order to establish a priority order. See all the analyze, click here.

All participants were able to complete all tasks but found the « Specimen Cheque » was the most confusing task for users. It revealed that even it was placed in « More », people always based their ideas to find it in one specific place an not in a different place, more easier.

Recommendations:

  • Add quick access for « Specimen Cheque »
  • Add a feature to search transactions by « name »
  • Add more type of alerts choosing by SMS, mail or notification

Visual Design

In order not to get away from the spirit of the gardens and their brand, I followed their design guidelines and went further on some color for better readability taking into account the ergonomic constraints.

Next, I turned to:

  • the visual constraints of color-blind people using Sim Daltonism software based on three criteria: Red-Green Confusion, Yellow-Blue Confusion & Monochromacy
  • a color accessibility tool named Hexnaw
  • a color contrast measuring foreground and background in Colorable

Next, I created a Style Guide & Design Pattern collection with all the components and UI patterns used on the app. Elements such as new icons or new buttons created for the app are available.

Outcome

  • Learning

Conducting user tests with a prototype that does not have all the pages frustrates users as much as a task with context because they expect to get the answer in the statement.

  • Surprising insights from user research

The brainstorming session brought me a lot about understanding the needs and expectations that users have of a banking application. The richness of the ideas, the solutions of improvements or the points to be improved, comforts my point of view on the importance of introducing the end-users in each phase of a project in order to bring them the best experience while taking into account business needs and development constraints.

  • Challenges
The challenge that I started is appropriate because I think I have achieved some of my goals on this project which is to design a platform that corresponds to the real needs and expectations of users. In addition, establishing test assignments with different documents is always a challenge for me.
  • Favorite design process

The implementation of the user tests with the different documents to provide and produce to achieve them were the elements that I preferred to put in place. Being face to the users by having their share of the verbal as well as nonverbal returns, always animates me to go further to find the best solutions.

  • Any last call to actions ?

I wish I could continue this project and show the other screens like the different alerts that will be displayed and that can be set. Perform more usability tests with more users and be able to incorporate recommendations into the prototype.

  • Special thanks

Special thanks to Niya Watkins who inspired me by her work and analyze in every project I saw on her portfolio: https://www.niyawatkins.com

Leave a Reply

Your email address will not be published.