Scantrust Photo Authentication Service
July 2023
Overview
Last summer, Scantrust aimed to expand its online mobile Photo Authentication Service to accommodate a new type of QR code on the graphics and webpages of the app. This project was focused on not only updating the service's animation and graphics, but also improving the UI/UX of the report page.
​
For this project, I was in charge of updating the animation displayed on the webpage to increase user success with taking a picture of a viable QR code for validation and to reimagine what users would see should an error occur within the process.
Starting Out: QR Animation
To guide users how to properly take a valid photo for QR authentication, we provided them with an animation detailing the process.
We found that users did not read the full instructions for taking the photo found in the right video, so this animation was key in improving the experience of the app.
​
During the summer, Scantrust started to test
their new type of QR codes, with the secure graphic on the outside, thus, updating this animation was crucial.
​
​
Secure Graphic (SG) on the outside
Process
​
Using Photoshop, I had to tweak the QR code to look as similar as possible to the regular one in the old animation. This required blending and filling to match the lighting of the background.
​
With the graphic created, I took to Keynote and replaced the base images with the new QR code. However, this caused problems within the animation. I then had to reanimate the frames to match the old GIF.
Starting Out: Report Page
​
When users scanned a non-Scantrust code or errors occurred within the process, they encountered the report page on the right.
​
The company felt that not only did the page fail to align with Scantrust's style, but the way the user interacted with the page could be improved.
I was inspired by Dropbox and Airbnb's error pages. I wanted to improve the visual hierarchy of our report page and ensure
that user attention was retained. I recognized that within the old design, not only was there no sense of order in how the text was displayed, but the layout also hindered users from reading our advice for how to proceed.
With Figma, I reimagined what the report page would look like.
Inspired by other report pages, I changed the text layout to display a clear hierarchy between each section of text and improved the page's graphics and color relationships. This layout was more in tune to the company's branding.
With the completion of the GIF, my work went live on the Scantrust Photo Authentication Service.
