New Jersey I.D

The New Jersey ID, or NJID, displays a digital driver’s license ID for NJ residents, emphasizing medical accessibility and ease of use.

Year

2022

Tools

Figma || After Effects

Links

Process Deck

UX/UI

UI Animation

Research

The Problem

Design Clutter: A costly oversight

If you were to take a look at your ID right now, you might notice that there is no medical identification. Not only that but the design is unorganized, cluttered and if you forgot your ID it can turn costly, fines range between $75 - $300. This would not be a problem if you had a digital I.D.

Colorado

Strengths

Affinity Icon

Disability Identifier Symbol

Two Step Identification

Weaknesses

Horizontal Landscape only

Disability Symbol does not specify medical condition

Louisiana

Strengths

Touch ID option

Remote Verify

License renewal alert

Weaknesses

Scan feature is hidden

Lack of security

Utah

Strengths

Tap to verify

Standards used outlined by the American Association of Motor Vehicle

Weaknesses

No accessibility features offered

Sketches & Wireframes

Nature vs Geometry

When looking for inspiration I tried to see what were some things that would fit NJ. I decided to go through a more floral and nature themed board, and a darker, more geometric based board.

Sketches

Wireframes

Iterations

Finding the best solution

Throughout my extensive iteration process, I thought about how both the asymmetric/geometric concept and the nature concept could be merged.

Iteration 1

The purple color theme is supposed to represent NJ's state flower color, the violet.
The style was inspired from my "On The Go" moodboard.

Iteration 2

The angular design is inspired by my "On The Go" moodboard, blending edgy aesthetics with colors of nature.

Iteration 3

I decided to shift my color palette to the color blue. Why? Because it gives the feeling of ease and trust!

Style Guide

Do you trust me?

Inspired by the blue hues of the NJ State flag, I infused my design with similar shades. Ensuring user trust is paramount to me. Given blue’s association with trust and ease, I made it my primary color, and used it throughout the interface.

Poppins

Light

The quick brown fox jumps over the lazy dog

Regular

The quick brown fox jumps over the lazy dog

Semi-Bold

The quick brown fox jumps over the lazy dog

Bold

The quick brown fox jumps over the lazy dog

00102E

R0 G16 B46

318FE8

R49 G143 B232

4A98E1

R74 G152 B225

66A4DE

R102 G164 B222

FFFFFF

R255 G255 B255

The Result

Fun and secure

After a lot of iterating I had come to the conclusion that the geometry and natural theme, did not mesh well. Instead, I went full force wth the geometric dark theme, while using blue tones to ensure a feeling of security.

What’s Next

While I achieved the goal I had, making a physical drivers license physical, with focus on medical information. There are still several elements that still needs improving that I am currently working on.

Adding more dimension to each screen

Open UI animation for button presses

Background pattern

Related Projects

Check out what else I’ve been working on!