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