2015 - 2018
Biometric Authentication™ by Wells Fargo
A mobile sign-on experience for Android and IOS that allows users to authenticate into their account using scans of the face, + voice + eyes instead of requiring a password. It's more secure than the iPhone X facial recognition by a long shot. Read more on the product in press releases Here and here
The interactive, instructional experience guides Wholesale users through a complex process to create their voice, face and eye prints.
My role:
As the CX Designer, I worked closely with my team of Content Strategy, Interaction, Developers (for IOS and Android), Product Managers, and Researchers and more. We worked in sprints of 2-3 weeks, in a waterfall production approach.
I designed: user flows, wireframes, mockups, screens, transitions, animations, delivered and worked with developers and ensured WCAG AA compliance. I went from paper to digital.
I wore a few different hats, at one point I planned and orchestrated a brand-approved photoshoot to get the images needed to instruct users.
Competitive analysis,
Journey Mapping
Low-to-high fidelity wireframes
Paper Prototyping
Photoshop
Personas
R.I.T.E.
Sketch
MEthods/Tools:
Problem:
From call logs and help center complaints, we picked up on a consistent issue for our users that pointed us to our problem statement:
Users wanted a way to log into their CEO mobile account on the app but hate remembering passwords or often forget them. Having to carry token fobs and random number generators was also a pain.
Solution Statement:
Allow users to log into their mobile CEO accounts through the app by using their inherent features that cannot be copied - like an eye scan, a voice match, and prints.
Design choices along the way...
The eyeprint
We had to ensure the user was alive, and wasn't a video. Eyeverify, our vendor on this tech, worked with us on the feature. The blood vessels are captured while the eyes follow a randomly pathed target.
Accessibility interactions
To ensure accessibility for this feature, I used a special green that passes WCAG AAA standards, but I also created the state change of white-to-green, and corner marks to a full outline to meet all users needs.
PRogress Indication
We added a progress bar to indicate relative progress in this phase while the camera is rapidly capturing bursts of photos to create 6-12 successful scans to make an eyeprint.
First Sketches and Wireframes - The Initial VoicePrint
I wanted the recording phases of this process to feel different, like the user was in a recording studio, dark. Most other conventions that exist also feature a darkened experience for while the user is recording. I wanted it to be clear when the recording started and when it had stopped. Like lights on, lights off.
Why the blue button?
With our traditional button format used elsewhere across our products, users weren't recognizing the task was triggering a recording session, no one was fully reading or seeing the "Start/Stop" recording button.
I wanted users to anticipate what happens next rather than take a second to figure it out and lose time.
Later in testing we found that using "shapes inside shapes" in CTAs would ding us for WCAG AAA / Accessibility for cognitive impairments or difficulties. That meant I had to try the same shape, and we had to use text on both for our CTA.
Brand standards at Wells Fargo forced us avoid the use of red for CTAs or major places in the app, so I tested my way through our palette to a blue that stood out in both the light and dark backgrounds and called a lot of attention to itself.
I wanted it to be clear when the recording started and stopped. Like the user was instantly in a recording studio.
The outer line of the record button pulses during the recording to add a sense of liveness to the recording and attract the eye to the button, adding accessibility.
Screenshot of the Face/Voice Authentication once credentials (prints, recordings) are created.
