N.J.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
Project Length
8 weeks
Tools
Figma || After Effects
UX/UI
UI Animation
Research
The Process
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.
Competitive Analysis
Medical ID: Ignored?
Through my research, I listed each competitor's strengths and weaknesses. The competitor's designs showed little emphasis on medical IDs and specific medical conditions. Therefore, I wanted to make my project a more effective and accessible option for users who need them. Below, I will show a summary of my analysis.
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
Inspiration Boards
The Inspiration
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 themeed board, and a daker, more geometric based board.
The Garden State
When making this inspiration board I really wanted to give emphasis on the New Jersey title, being the Garden State. The intention behind this scheme is to give off a soft, natural, and fun ambiance.
On The Go
New Jersey has a fastpaced lifestyle, hence why I wanted to created a board that showed that. The intention behind the scheme was to make it a geometric, modern, and clean design.
Sketches and Wireframes
Nature vs geometry
Initially I designed a natural theme inspired by Garden State, and and stayed in this state for a while. I tried exploring different ways the layout could be done.
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
Making it better
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!
GlucoTrakker
Blood glucose & mood in sync.
Mobile
UX/UI
Research
Wanna die in America?
Raising awareness of the U.S. Healthcare System
Website
UX/UI
Research
View all
Contents
The Process
Competitive Analysis
Inspiration Boards
Sketching & Wireframes
Iterations
Style Guide
The Result
Whats Next

Call me, beep me, if you want to me reach me