Trustify

High-end, secure identity verification

Work

Product design

Role

UX/UI design, Developer Handoff

With

NewDealDesign

When

Sep–Nov 2016

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.

trustify casestudy 01
Early visual design explorations: applying the brand designers work to a single UI component

Homescreen

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 casestudy 02
Early homepage explorations

Membership tiers

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.

trustify casestudy 03
Different ways of organising users’ activity and progress through the verification process

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.

trustify casestudy 04
Wireframes exploring different layouts, given our new priorites
trustify casestudy 05
Exploring structures for the app with the new, camera-centric functionality

UI overhaul

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.

trustify casestudy 06
New visuals and simplified IA applied to final app

Handoff

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.

trustify style guide
Style guide handed to development team