Desjardins Mobile New Simplified Login Experience

UX & Product Designer

The Desjardins mobile app was built before biometric was mainstream on mobile devices. So simplified login via biometric authentication was not an option. The app was also built without knowing the behavior of the customers, and the login page, was almost an app in itself with multiple content, sections, and pages. The log in page needs an overall.

The old user flow of the login experience in the Desjardins mobile app.

The objectives

  • See in if in the features and content present, there is anything of value to the customers.

  • For the features staying, are there any suggested improvements.

  • Simplify the login process.

  • Test with customers to see if the proposed solution is understood and appreciated.

  • Identify what need to be native vs Web adaptive (website wrapped in the app framework).

  • Assess feasibility with iOS, Android, Web and Security engineers.

The process

  • The first step was to look at the usage for each content, sections, and pages on the site. Over a period of 6 months, what are the customers are doing on the login page? I prepared a list of questions for the analytic team.

  • I ask around the office, to colleagues, what they do when they open the mobile app. What are their intentions 80% of the time?

  • The hypothesis is they have an information to consult or a transaction to perform beyond the login page in the transactional area of the app, so they simply log in or in their own word:

“I just press on the big green button.”

  • The statistics were not lying. No ones were doing anything else on the login page other than login in. Everything else is exactly like the phenomenon of “banner blindness” for advertising on websites, they do see anything else than that “big green button”.

Desjardins Old Login Statistics
Over 91 millions events in 5 months, 97% of the customers log in; everything else is insignificant.
  • It was now the time to iterate on some possible solutions based on what we knew.

The new experience for the login page: a account selection to log in a single tap; and everything else hidden under the menu.
  • One challenge with the proposed solution was the marketing team who got mostly all of their visits to the post they wrote, tiny it was, from the mobile app customers. They didn’t want to let go of their opportunity to communicate something to the customer.

      • The solution I proposed was to have a message, above the account selection, composed of a big imagery, a simple title and a Learn more button.

      • I emphasized the success of this area cannot be measure only by the number of customers tapping on it. It should be viewed as a branding exercise. What can you communicate in a few words and an image?

      • I proposed that the associated content was offloaded, so it can be consulted immediately without the need to load the content from the Web.

      • The message could promote other posts at its end.

Play the video to see the prototype in action.
  • Two features, built before biometric was mainstream, still get some usage. They were offered to let the customers, who enabled them, perform an action without the necessity to log in:

      • InstaBalance displays the balance of the desired account.

      • Hop’n S@ve lets the customer transfer an amount to a special high interest account in one tap.

  • The challenge was to let those two features present, without being too predominant — as they were desire to retire them eventually, and still be recognizable to the customers who used them.

  • I also needed to make sure that we cover all the cases for the area where the user does the account selection. What happen if you have none and what happen if you have more than 2, and even multiples.

Desjardins New Login Edge Cases
Edge cases for the customers without saved account, with more than two, and with multiples.

The outcome

  • User tests were conducted in the Desjardins usability labs with 15 customers.

  • All were very satisfied of the experience, even the ones who didn't save their account previously. We got comments like:

“It’s clean, simple, right to the point.”

“I don’t even remember what was there before, other than that green log in button. It’s much better!”

I like that everything else is under the menu. If I need something other than log in into my account, I would think of going there.

  • Some customers were struggling with the icons at the bottom of the page (InstaBallance and Hop’n S@ve) as they didn’t know what it was (12 of 15 customers were not using those features). Once they tap on them, they understood better, but were not really interested and saw the point of them.

      • The 3 customers using those features (1 InstaBallance, and 2 Hop’n S@ve), said they also didn’t really recognize those icons.

  • For that reason, I designed an alternative solution, where we add labels to those buttons.

      • We test again, but this time with 5 users.

      • It was better for the customers using the features, but it advertises them more predominantly (so a risk of acquiring new customers and less chance of retiring those features).

      • Also, it was less clear who to log in with an account not saved as the button was hidden for customers with more than 2 accounts saved. But they still succeed in adding an account from the Edit button.

Desjardins New Login Improvement
User tests revealed some challenges with the icons without labels, so an improvement was proposed.
      • As for the challenge of the marketing team, they end-up quadrupling their visits not only on their promoted posts, but also increasing overall the visits to all their other related posts and to double the session time per visit.

      • The new log in experience launched 2.5 years after it’s been conceptualized and tested. While I don’t consider it a success for having taken so long to implement the solution, I do consider it a success, as a testament to the quality of the work, since I was no longer working for Desjardins for one year and a half.

Explore the user flows and wireframes in Figma