Calming exit strategy

For account security, CIBC needed to implement a timeout experience, that was fully accessible to users. Data showed that 13% of all product applications were timed out without warning. The solution was to create a way for clients to easily extend their session. The experience accounted for multiple system timers which were out of sync, and client stress upon seeing an alert at a critical point in their experience.

Role: Product Design Lead

Timeline: Phased over 1 year

Responsibilities: Accessibility, Usability Research, Content Strategy, UX/UI Design

Two Timers

I discovered that there were two timers counting down a client’s session: a front end timer controlling what the client interacts with, and a backend timer for what the client submits. These two timers were not in sync which made any countdown clock or specific “time remaining” statement impossible. Furthermore, the backend timer was slightly ahead of the front end timer, meaning a client could continue to fill in data, but when they tried to submit, they would be logged out due to session expiry.

Competitor Analysis

Our team reviewed secure product flows from government official sites, and competitor sites that followed WCAG 2.1 standards, to see if any specific timeout language was being used.

Exploring product flows

Accessibility requirements asked for the pop-up to be displayed every ten minutes of inactivity, and allow the client to refresh their current page a minimum of ten times. Our accessibility leads specifically asked us to solve for Linux Screen Readers, and worked closely with our developers to implement the correct code.

There are over 30 different CIBC product flows that we needed to consider. Some were standalone apps, while others were single app flows, framed in experiences, or multi-tab experiences. We also needed to consider where the client was coming from and whether they were signed in or not. These authenticated flows were more complex for tech as any cached or save data would have to be cleared once a session was timed out.

To remove as many dependencies as possible, the flow would be divided into three parts. Entry points, timeout alert, exit points. We did this to reduce dev scope of recoding any product flows or behaviours. We isolated the timeout alert to be triggered from existing flows, and then push the client to the appropriate exit points identified by the existing flow, should the session fail, times out, or the client chooses to leave.

We decided to create an alert pop-up that displayed a timeout warning, two minutes before the timer would run out. This solution gave enough time for the client to make a decision without a security threat, and solved for the asynchronous timers.

Testing the solution

The content of the timeout alert was critical for the success of the experience, needed to be clear and easy for a screen reader to communicate within the two minute timeframe.

We tested the two version of copy content, using an unmoderated prototype through usertesting.com. 62% of clients preferred the second message option with more text,  and enjoyed the extra details about when the alert would appear again. The feedback overall was that the alert was easy to understand and felt secure.

The pop-up alert

We implemented improvements based on user testing and stakeholder reviews for our final timeout alert. Further enhancements included: a darkened background masking page content while the pop-up was on screen and anchored page focus resuming where clients were in the experience once the pop-up was dismissed.

Ending Sessions

Ending the client’s session was the most technically difficult part of the session timeout alert. Clearing cached data from all the systems was a huge effort for our developers to build. As much as possible, we wanted the backend to take care of the conditions, but keep the front end as simple as possible. Specifically for the Assisted Cart product, we were able to leverage the “close” functionality already built in the app, and place it within the alert pop-up. 

For unauthenticated flows, we didn’t want to loose potential leads coming through our cart application. So when the session was ended or had expired, we displayed additional buttons  to “restart application” or “book an appointment”. All other unauthenticated flows that were not buy-related, would bring clients back to their original entry point.

For authenticated clients, they would be brought back to the login page with the session expiry message. For standalone app flows, regardless of authenticated or unauthenticated clients, they would be directed to a new page with an error message.

The final results

The new timeout solution was rolled out to over thirty application flows across CIBC’s banking products (desktop, tablet and mobile) and was to be implement with any new flows.

By creating a session timeout pop-up alert, clients and advisors were able to continue their application flows and set their own pace. Our application flows now met accessibility requirements and we had a reduced app failure rate caused by session timeout from 13% to 1.6%.