Login screen with Two-Factor Authentication (2FA)

PART ONE: LOGIN SCREEN REDESIGN

BACKGROUND: Upon joining Paytronix in May 2018, my first task was to give our Merchant Experience platform (aka ‘the PXS’) a “login screen that looks like a contemporary login screen.”

SCENARIO / THE ASK: The Head of Marketing wanted the ability to promote company news right at sign-in, especially to drive registration for our annual conference. They had been doing this to some extent with 250 x 250 ‘display ads.’ Any update required requesting and then approving creative from the team’s agency of record. I was confident knew I could probably direct them to a more current solution that would also enable greater, real-time control over messaging. 

Using the third option also allowed us to rotate through 5 different (stock) photos. I also created an optional information bar that could effectively promote company initiatives—or even alert users about a system outage—whenever necessary. The input field was added to the PXS exclusively for the marketing team’s use.

RESULT: The new login experience was a big hit with both our customers and everyone within the company, and the marketing team was thrilled that they now had granular control over the information they shared on the first screen our customers see when logging into our product. The agency used by the marketing team was then able to focus more on event collateral and an impending website redesign.

PART TWO: TWO-FACTOR AUTHENTICATION (2FA) 

Immediately upon completion of the login redesign, I was asked to design a two-factor authentication (2FA) experience that would provide our clients with an extra layer of security. Since we could not mandate that our clients used a secure password management tool, we wanted to do everything possible on our end to prevent any data breach. I worked closely with the product manager and our web services development lead to determine the best paths to completion.

TECHNICAL CONSTRAINT: While the user would have the option of receiving their code via email or SMS, back-end logic (A handy catchall, right?) prevents them from getting the code via SMS right out of the gate. Once they entered their mobile number, however, they would have the option of receiving the code via email or SMS each time the system required it.

I worried that the user would be annoyed when asked for their phone number immediately after they’ve entered their email—especially if they’re accustomed to more fluid verification code experiences within their most-frequented mobile apps. Yet I also knew this was also where my content strategy and copy skills could successfully drive the experience. Using human language to convey that providing a mobile number was optional and clearly indicated thin within the visual design should alleviate most frustration.

RESULT: Paytronix enhanced their core product offering by providing extra-protection for our clients’ customer data.