Timeline
5 weeks
Winter 2020
Skills
Visual Design
Interaction Design
Problem
Driver's licenses are inconvenient, and they are not easy to scan quickly for information.
Solution
Design a smartphone-based digital driver's license that displays necessary information in a more approachable and elegant way.
To view my full process deck, click here.
Simple and effective.
With the virtual driver license, all the necessary information users need are quick and easy to access, whether it is for a simple age verification check or viewing the full ID.
You can view my Figma prototype here.
Problems & Opportunities
I started by analyzing the current design of the New York State driver's license, and I identified two main problems with the design that presented opportunities for improvement.
Problem: Weak Content Layout
The grouping and organization of information is distracting and sporadic. It is difficult to scan the document quickly for specific information.
Problem: Restrictions of Physical Card
A physical card is inherently a pretty limited medium. Some information may change over time, or the license can get lost, requiring a new one to be issued.
Opportunity: Honoring the Content
Using basic principles of design, the information can be rearranged with a new hierarchical structure to improve readability and ease of interaction.
Opportunity: Mobile Device Adaptability
A physical license lacks the interactivity that a mobile solution has. Smartphone features will make the process of checking an ID more convenient.
Initial Sketches & Wireframes
I started off by breaking down all of the information present on current driver license designs, and identifying what is most important. After my first round of sketches and wireframes, I realized that I wasn't really redesigning the ID and adapting it to the digital format, but I was simply rearranging information. 
On the second round of wireframes, I was inspired by convenience & familiarity of Apple Wallet and I made this card design that expands to show information that users need on a case to case basis.
Visual Concepts
This moodboard is based on a Retro T-Shirt design, representing a recognizable nostalgic art direction to tie a dated system to a new means of interaction.

Key Words:
· Flat
· Playful
· Decorative
· Nostalgic
· Word Art
· Primary Colors
This moodboard is centered around the aesthetic of a Beach House, a more simplistic visual direction that focuses on being calm and approachable.

Key Words:
· Airy
· Friendly
· Relaxing
· Free Flowing
· Light Colors
· Open Composition

Iterations & Struggles
I went with the Beach House visual direction for the sake of approachability, but my first attempt still looked pretty distracting. On top of the weak visual style, I felt that the hierarchy of content was still ineffective, and the navigation between different modules did not contribute to the ease of interaction that I wanted.
I toned down some of the more distracting visual elements and moved away from the expanding card idea, reducing the app to 2 states: age and full view.

While the second iteration was an improvement, the visual style was not very engaging, and the typographic hierarchy & use of white space led to the visual rhythm remaining clunky and not very scannable.
I was a bit overwhelmed trying to fix the informational hierarchy and the visual style at the same time, so I temporarily stripped away the design to focus on honoring the content.

After a bit of experimenting, I realized the 4 column grid system I had been using was contributing to my struggle to give the content an effective rhythm. Switching to a 3 column grid gave me the ability to give the information better spacing and emphasis.
Final Screens
While the Beach House visual direction was simple, I decided to switch to the Retro T-Shirt design to make the design a bit more engaging.

I greatly increased the vertical spacing so that different groups of information would not clash, and the document was much more easily scannable.
Next Steps
1. Pushing the Visual Style
How can the concept of the Retro T-Shirt be pushed further to engage the audience more?

2. Fine Tuning Typographic Hierarchy
How can each group of text be displayed appropriately without using an overabundance of white space?
Back to Top