Role:
Lead UX Designer
Overview:
I designed the multi-factor authentication desktop and mobile experiences for retail and commercial banking customers, focusing on ensuring optimal UX design while handling strict security requirements.
In response to the escalating threat of cyber attacks, Commerce Bank recognized its security system was outdated - it relied on easily accessible customer information like their mother's maiden name or their first pet's name. The company decided to revamp its security using multi-factor authentication.
In my role as the lead designer for nearly two years, I directed efforts in both retail and commercial banking. I played a key role in ensuring the design not only met strict security requirements but also prioritized user-friendliness.
Unfortunately, due to security reasons, I can’t show the majority of my work that I did leading the multi-factor authentication effort, but I’ll be able to at least show my thought process.
To begin designing for multi-factor authentication, we created detailed user flows, meticulously mapping out how users would navigate the set up and use of this enhanced security feature. These user flows took into account not only the security requirements but also the backend restrictions that would pose constraints on the design. The security requirements were even more strict for the commercial banking sector, which handles significantly higher transaction volumes.
Here are some examples of the diagram flows:
Diagram for setting up multi-factor authentication
Diagram for updating multi-factor authentication
A key requirement was the need for uniformity in design between the desktop site and the bank’s mobile application, to ensure less development time and to ensure that users had the same experience across both platforms. I focused on creating a straightforward process that aligned with industry standards for multi-factor authentication. I also knew that not all users may not be familiar with this process, so I added brief explanation text to guide them along the process.
Wireframes for setting up multi-factor authentication
Wireframes for updating multi-factor authentication
Upon understanding the foundational patterns for the wireframes, I designed high-fidelity designs for both desktop and mobile experiences. Here I focused on incorporating the brand design elements, rewriting the text to be more consistent with Legal and Compliance standards, and figured out multiple interactions for both desktop and mobile designs. Since multi-factor authentication could be tied to a user's email or phone number, then anywhere a user could modify either forms of communication needed to be revamped to factor in the new security protocols. This process was complex and time-consuming, but my earlier efforts in understanding and mapping out possible user paths greatly helped organize the many screens I had to design.
The multi-factor authentication designs I developed are now implemented and widely utilized by Commerce Bank customers. Feedback from users has been very positive, with many expressing satisfaction over the streamlined experience, particularly appreciating the replacement of traditional security questions and answers. Nearly every user is able to set up and use the authentication process very quickly, and most users quickly and easily adapted to the new process.
Previous Case Study