Michigan DIGITAL DRIVER’S LICENSE
A virtual ID interface to solve the inconvenience of a physical ID.
Category
UI/UX + Motion Design
time
4 weeks
programs
Figma, After Effects
the GOAL
Create an organized digital Id interface that can replace a physical DRiver’s license.
the SOLUTION
The final design consists of three screens - the homepage, a scrollable full ID view, and an age verification view.
For instances where full license information is needed (ie. law enforcement), users can share the full ID view.
The age verification view only shows the name and birthday to prevent irrelevant personal information from being shared or exposed.
To represent Michigan, there are some subtle features to allude to the state:
Michigan signature ‘robin-egg blue’
Monogram ‘M’ representing the Mackinac Bridge
Topographical map of Lake Michigan as background pattern, which moves slightly to prevent fake ID forging
Research
Physical IDs are easily misplaced and annoying to carry around, and the current layout can make finding information inconvenient. ID cards also lack any security measures, as the user has no choice but to show all of their information when presenting their identification.
Many of the existing digital ID interfaces fail to create an organized ID with multi-purpose usage. Colorado, along with many other states such as Florida, are developing a digital driver’s license with an app, however the interface simply looks like a picture of a physical ID.
I looked into other interfaces that dealt with tickets or cards. I focused a lot on the Delta Airlines mobile app, which provides services for flights, but can also acts as a digital boarding pass. Much of how I organized the hierarchy and information in the digital ID was inspired by the layout of apps such as the Delta Airlines.
Planning
I wanted to create a clean style while keeping familiarity to Michigan symbols. I chose to use glass-morphism due to its rising popularity and futuristic aesthetic, while using easily identified Michigan symbols, such as the Mackinac Bridge. From the inspiration board, I created sketches of multiple different layouts to see what worked the best.
After sketching different ideas, I created wireframes based off of them. I started iterating with two different layouts:
Usage of a card asset that would pull out when swiped, along with a darker and modern style
Usage of a tab design with a clean, bright style and illustrative elements
I did two iterations of the designs, and ended up combining the two by taking aspects that were working from each one.
With the second iteration, I continued to struggle with certain elements:
A coherent background that would not distract from the main content
Creating page links so that all screens are accessible at all times
A clear hierarchy or organization of information
To solve this, I implemented:
An abstract yet representative pattern of Lake Michigan
A menu bar to toggle between screens
Hairline strokes to separate sections of information
prototype
While animating the final product, I added the following in order to visualize the security features:
A moving topographical background; used to add visual interest and prevent fake IDs
A shifting tab animation; helps to highlight the view the user is currently on