Digital Driver's License

In the height of technology keep your sensitive information secure and enjoy it on the convenience of a mobile device.

digital-license-design-comp-mocks

Overview

MY ROLE

UX/UI and Interactive Designer

TIMELINE

January 2020 — February 2020

PLATFORM

Mobile App

Every day technology advances substantially; with the increasing use of mobile devices, we rely on them for our daily tasks, from ordering food to shopping online. A digital driver's license is one example of how technology can improve our lives. As someone who owns a smartphone, having a digital driver's license means I can access it easily without carrying a physical card, which can get lost or damaged. It also provides an extra layer of security by using biometric authentication and other verification methods to ensure that the license belongs to the correct person.

A digital driver's license is a convenient and secure solution for the digital age. It allows us to access our license information by opening the app and quickly scanning a QR code to verify our identity. This eliminates the need to carry a physical card and provides a practical solution for modern times.

Problems

It's time to modernize

original-licenses

1. Lack of hierarchy

Difficult for the reader to differentiate the value of text, since everything has a similar hierarchy

2. Congested space

Most of the text is laid out close together, so there is limited breathing room

3. Outdated featuress

The barcode can only be scanned in a horizontal position, while a QR code can scan information vertically and horizontally, this small detail can slow down the identification process

Plan

Solutions

Decreasing the clutter

Increase the white space between elements vertically and horizontally. Restructure content that's relevant and organize correlating info with proximity. 

Emphasize importance

Use different forms of typographical hierarchy, like size, thickness, and placement to create a more digestible layout and structure.

Using QR Codes

Take advantage of the digital space and add QR support. This would be much more convenient since the user can then scan their information in any direction, and it is more secure.

Plan

Goals

Moving with the times

Mobile devices were created on the idea of convenience, so the digital license should be follow the same precedent

Enhancing convenience

A digital license must make the identification process more secure, more efficient, and most importantly more simple

Improve security

Add features to provide security and validation interactions. From authentication to an interaction to ensure the license isn't a screenshot/photo

Design

Wireframes

While creating the wireframes, I recognized the importance of aligning the driver's license layout with the user's natural vertical interaction on their mobile devices. This approach promotes a more intuitive user experience, enabling users to quickly and easily access their digital license information.

To further enhance the design, I sought inspiration from various forms of mobile identification, such as boarding passes, concert tickets, and medical IDs. This enabled me to incorporate best practices and design elements that have been proven to deliver a user-friendly and efficient mobile experience.

digital-license-wireframe-v1-1
Wireframe v1 - Full View
digital-license-wireframe-v1-2
Wireframe v1 - Age View
digital-license-wireframe-v2-1-home
Wireframe v2 - Full View
digital-license-wireframe-v2-2-age
Wireframe v2 - Age View

Iterate

Design Comps I — Mood boards

digital-license-moodboard-1
digital-license-pre-comp-style-1-1-shdow
Patriot - Full View
digital-license-pre-comp-style-1-2-shadow
Patriot - Age View
digital-license-moodboard-2
digital-license-pre-comp-style-2-1-shadow
Simple - Full View
digital-license-pre-comp-style-2-2-shadow
Simple - Age View

Iterate

Design Comps II

During the second phase of the design comps, I aimed to create a clear distinction between two distinct visual styles: one that conveys sophistication and formality and another that projects a more playful and friendly tone. To accomplish this, I experimented with patterns, color treatment, varying corner radiuses, and container treatments. 

For these comps, I repositioned all the information to the bottom of the license photo to free up space and implemented a swipe-up QR code interaction. While I was the satisfied current direction of the design, I knew there would have to be more fine-tuning to be done.

digital-license-design-comp-style-1-1-rounded
digital-license-design-comp-style-2-1-rounded

Design

Final designs

digital-license-final-mocks-rounded-1
Final design - Full license view
digital-license-final-mocks-rounded-2
Final design - Age view
digital-license-final-mocks-rounded-3
Final design - QR code pop-up

Thank you! ✨

Thank you! ✨

Did you like what you see? If so, let’s chat!

Let's chat!

© Christina Ho 2023