In one of my first projects at NewDealDesign, I joined the team working on an authentication service for high-value transactions (think the scene in Casino Royale where they’re transferring the poker winnings). Let’s call them Trustify.
We were briefed to design a mobile app that would pair with Trustify’s hardware key. Making authentication as seamless as possible, while communicating the ‘layer of protection’ that Trustify maintains behind the scenes.
I worked on several iterations of the app’s home screen. The homescreen served two purposes: as a status-check screen, to check that Trustify was active, and as a simple activity log. The primary interaction, the authentication process, would be triggered via push notification, so the home screen was all about letting you get in and out as fast as possible. Checking up on a transaction and moving on with your day.
The idea was to convey Trustify as an ambient, protective layer for the user. Always active in the background. I designed several versions of the homescreen to reflect this, the ‘active status’ pulsing away in the background, on call for whenever you need it.
Trustify members could occupy one of 3 tiers. Each a higher security level with a stricter authentication process. Progressing up the membership tiers by completing verification tasks was a key interaction in the app, one Trustify were keen to encourage. We designed this around a checklist interface, with notifications and status updates encouraging users to progress to the upper tiers.
Pivot and simplify
Late on in the project, we got instructions to pivot. The expensive hardware authenticator was scrapped in favor of more widely accessible no-password login using proprietary QR codes.
The primary use case changed, and so the structure of the app needed rethinking. Now, the majority of use cases would be a simple ‘open app, scan QR code, close app’. We redesigned the homescreen interface to be all about the camera, with secondary actions accessible from a menu.
Along with the pivot, designer Jacob Bang led an effort to polish and simplify the app’s visual design, introducing stronger hierarchy, more white space, and a new, more geometric typeface, Sofia.
With designs approved, I led the effort to prep files for development. Taming our disorganised Sketch files into a single source of truth with well defined components, a clear style guide, and screens ready for development.