Digital Driver's License

DURATION

5 Weeks, Spring 2019

SKILLS

UI/UX Design

OVERVIEW

Create a smartphone-based digital driver’s license by translating information from a physical card to a mobile, digital screen. Use core visual design principles to present typographic information in an effective and communicative way.

TOOLS

Figma

Adobe Illustrator

Problem

Physical driver’s licenses are oftentimes forgotten or lost; digitizing driver’s licenses will keep them at our fingertips for easy retrieval. The traditional driver’s license lacks typographical hierarchy and readability.

Goals

With the ever-growing rise of technology, items we use in our everyday lives are beginning to become digitized. Everything is available at the click of a button on our phones, from boarding passes to credit cards, it is not far in the future that we will begin to see digital driver’s licenses.

With this reliance on technology comes skepticism of unfamiliar and inexperienced users. The challenge I took on in this project was to create a product and experience that feels familiar and automatic to all users. 

01

02

03

04

Arrange and group information strategically.

Identifying important information takes too long and the driver's date of birth is oftentimes overlooked. In times when a driver’s license is needed, it should be easy to read and gather relevant information.

Simplify and declutter to make information readable.

The layout of a physical license lacks hierarchy and organization. Using Gestalt principles such as grouping, the legibility and reading pattern of information becomes clear.

Make each license unique and customized by state. 

Add a sense of character to each user's license by incorporating the state's colors in the visual design of the license.

Create a visual cue that is easily identified to indicate age.

Creating a way for authorities to quickly identify legal age serves very helpful in many cases. In today's time, the age of minors is oftentimes overlooked. This cue will bring clarity to those who need it by using color and badges.

Screen-Shot-2021-01-13-at-8.31.26-PM

FULL LICENSE VIEW

Legible and Clear

Initially planning to use gestalt principles, such as grouping, majorly helped in the layout of information. Since there was so much data that had to be included, I thought of fitting in information like puzzle pieces; seeing what works where and considering why it works in that place.

As well as being organized, the driver's information is in an order relevant to reading patterns. When a full license is required, authorities identify the driver and then scan the rest of your driving information. 

Unique by State

Each UI is customized by state. Like any ordinary license, something is different about each and every state it belongs to. I wanted to feature this ability in a simple way but also compliment the interface and highlight the state's colors.

Screen-Shot-2021-01-13-at-8.31.09-PM

AGE VIEW

Progressive Disclosure

Having the ability to separate identification information allows for quicker interaction with the interface in the real world. Here, the driver's name, photograph, age, and birth date are clearly displayed for verification purposes. 

Clear Age Identification Cue

Indicating age by color and iconography allows for quicker identification if an individual is over 21 or under 21 years of age. When the user is under 21 the ring around their photo will be red. When the user is over 21, the ring will appear green. Noting inclusivity, the under 21 label restates the message of being under 21 without the use of color.

 

Reflection

This project taught me a lot about typographical hierarchy as well as data organization. With such a simple yet complex task, rearranging information that is all crucial to the design and incorporating character into UI design helped me build upon my skills in gestalt principles and my personal design process. Once again, I have learned how important iterating is to producing good design.

say hello!

© 2020 hannah grace sarakin

Back to top Arrow