A smartphone-based digital driver's license.
A smartphone-based digital driver's license.
Role
UI/UX (Individual Project)
UI/UX (Individual Project)
Skills
UI/UX Design, Prototyping,
Information Design
UI/UX Design, Prototyping,
Information Design
Tools
Figma, After Effects,
Illustrator
Figma, After Effects, Illustrator
Figma, After Effects,
Illustrator
Duration
6 weeks
6 weeks
Project Overview
Project Overview
Project Overview
Digital technology is becoming increasingly prevalent in today's world, and the transition from physical to digital driver's licenses is just beginning.
MassID challenged me to design for sensitive information, which required special consideration for efficiency and security. It also challenged me to ensure my designs were inclusive of a target audience with ages ranging from 16 to 80+ years old.
Digital technology is becoming increasingly prevalent in today's world, and the transition from physical to digital driver's licenses is just beginning.
MassID challenged me to design for sensitive information, which required special consideration for efficiency and security. It also challenged me to ensure my designs were inclusive of a target audience with ages ranging from 16 to 80+ years old.
Digital technology is becoming increasingly prevalent in today's world, and the transition from physical to digital driver's licenses is just beginning.
MassID challenged me to design for sensitive information, which required special consideration for efficiency and security. It also challenged me to ensure my designs were inclusive of a target audience with ages ranging from 16 to 80+ years old.
PDF | 30MB
PDF | 30MB
PDF | 30MB
Problem
Problem
Problem
Digital licenses are in early stages of development and many conform to exactly matching their corresponding physical license. This leaves little room for state branding, improved typographical hierarchy, and a breathable layout.
Digital licenses are in early stages of development and many conform to exactly matching their corresponding physical license. This leaves little room for state branding, improved typographical hierarchy, and a breathable layout.
Digital licenses are in early stages of development and many conform to exactly matching their corresponding physical license. This leaves little room for state branding, improved typographical hierarchy, and a breathable layout.
Solution
Solution
Solution
Create an application that allows the user to control what information is shared and introduces security features to prevent fakes. By focusing on efficient, secure, and inclusive design, my digital license will share legal information quickly and effectively.
Create an application that allows the user to control what information is shared and introduces security features to prevent fakes. By focusing on efficient, secure, and inclusive design, my digital license will share legal information quickly and effectively.
Create an application that allows the user to control what information is shared and introduces security features to prevent fakes. By focusing on efficient, secure, and inclusive design, my digital license will share legal information quickly and effectively.
01. Research
01. Research
01. Research
I conducted extensive comparative analyses and branding research on this topic, the highlights of which are included below. View my process deck for more in-depth information.
I conducted extensive comparative analyses and branding research on this topic, the highlights of which are included below. View my process deck for more in-depth information.
I conducted extensive comparative analyses and branding research on this topic, the highlights of which are included below. View my process deck for more in-depth information.
PDF | 30MB
PDF | 30MB
PDF | 30MB
Comparative Analysis
LA Wallet
Louisiana's digital ID. Allows the user to have a digital license as well as other information, such as vehicle registration, health cards, and hunting/fishing registration.
Louisiana's digital ID. Allows the user to have a digital license as well as other information, such as vehicle registration, health cards, and hunting/fishing registration.
Louisiana's digital ID. Allows the user to have a digital license as well as other information, such as vehicle registration, health cards, and hunting/fishing registration.
Generally intuitive UX and good security features
Relies on physical license, which hinders opportunities for branding
Generally intuitive UX and good security features
Relies on physical license, which hinders opportunities for branding
Generally intuitive UX and good security features
Relies on physical license, which hinders opportunities for branding
Delaware MiD
Powered by Idemia, a standardized digital ID template that provides interactive security features and information verification.
Powered by Idemia, a standardized digital ID template that provides interactive security features and information verification.
Powered by Idemia, a standardized digital ID template that provides interactive security features and information verification.
Good user control of information sharing and security features
Redundant screens create possible confusion for user
Good user control of information sharing and security features
Redundant screens create possible confusion for user
Good user control of information sharing and security features
Redundant screens create possible confusion for user
CA MDL
California's digital license pilot, with possible plans for it to roll out as a larger wallet application.
California's digital license pilot, with possible plans for it to roll out as a larger wallet application.
California's digital license pilot, with possible plans for it to roll out as a larger wallet application.
Good integration and doesn't rely on physical license layout
Opportunity to condense tabs to increase efficiency and improve consistency of visual style
Good integration and doesn't rely on physical license layout
Opportunity to condense tabs to increase efficiency and improve consistency of visual style
Branding Research
Boston.gov
Boston's municipal website received an overhaul recently, and could set a fantastic standard for the branding of my digital ID.
Boston's municipal website received an overhaul recently, and could set a fantastic standard for the branding of my digital ID.
Boston's municipal website received an overhaul recently, and could set a fantastic standard for the branding of my digital ID.
use of seal as branding element
mixture of sharp and rounded elements
sophisticated blue color palette with red accents
line to break up sections
serif and sans serif fonts create contrast
use of seal as branding element
mixture of sharp and rounded elements
sophisticated blue color palette with red accents
line to break up sections
serif and sans serif fonts create contrast
use of seal as branding element
mixture of sharp and rounded elements
sophisticated blue color palette with red accents
line to break up sections
serif and sans serif fonts create contrast
02. Iteration
02. Iteration
02. Iteration
Sketches & Wireframes
Sketches
Ideation of logo possibilities and early UI sketches.
More in-depth UI sketches, including a preview and full-view screen for license info, an age-only screen, and a scanning screen.
Wireframes
Taking my ideas into Figma, I began to flesh out the information hierarchy, keeping in mind my goal of inclusive design.
Taking my ideas into Figma, I began to flesh out the information hierarchy, keeping in mind my goal of inclusive design.
Taking my ideas into Figma, I began to flesh out the information hierarchy, keeping in mind my goal of inclusive design.
focused on making intentional decisions about the largest elements in each composition
sectioning of information for increased readability
focused on making intentional decisions about the largest elements in each composition
sectioning of information for increased readability
focused on making intentional decisions about the largest elements in each composition
sectioning of information for increased readability
Round 1
Moodboards
I explored two visual approaches: Bright & Bold (left) and Soft & Elegant (right).
I explored two visual approaches: Bright & Bold (left) and Soft & Elegant (right).
I explored two visual approaches: Bright & Bold (top) and Soft & Elegant (bottom).
UI Designs
The corresponding UI designs for Bright & Bold (top) and Soft & Elegant (bottom).
The corresponding UI designs for Bright & Bold (top) and Soft & Elegant (bottom).
The corresponding UI designs for Bright & Bold (top) and Soft & Elegant (bottom).
Round 2
After Round 1, I felt that my second visual direction had more potential.
After Round 1, I felt that my second visual direction had more potential.
After Round 1, I felt that my second visual direction had more potential.
applied Boston site's color scheme
tried to fill background space with seal, but wasn't feeling cohesive & took attention away from relevant elements
shrank the bottom nav and added clarifying descriptions to all tabs
applied Boston site's color scheme
tried to fill background space with seal, but wasn't feeling cohesive & took attention away from relevant elements
shrank the bottom nav and added clarifying descriptions to all tabs
applied Boston site's color scheme
tried to fill background space with seal, but wasn't feeling cohesive & took attention away from relevant elements
shrank the bottom nav and added clarifying descriptions to all tabs
Round 3
For my third iteration, I prioritized clarifying hierarchy and continuing to balance compositions.
For my third iteration, I prioritized clarifying hierarchy and continuing to balance compositions.
reworked seal as a logo element & simplified my wordmark
reorganized information so that users didn't need to scroll to see all license info
reworked seal as a logo element & simplified my wordmark
reorganized information so that users didn't need to scroll to see all license info
03. Final Designs
03. Final Designs
03. Final Designs
From iteration round 3, I had found a structure that I felt confident conveyed all information in an efficient manner. From here, I focused on refining UI elements, further simplifying the color palette, and making small final tweaks to visual hierarchy.
From iteration round 3, I had found a structure that I felt confident conveyed all information in an efficient manner. From here, I focused on refining UI elements, further simplifying the color palette, and making small final tweaks to visual hierarchy.
From iteration round 3, I had found a structure that I felt confident conveyed all information in an efficient manner. From here, I focused on refining UI elements, further simplifying the color palette, and making small final tweaks to visual hierarchy.
UI Screens
Splash screen
Preview view of full license
Preview view with security feature
Scan page
Age view
Full license information
Final Prototype
Full prototype video, including loading animations on the splash screen, interactive security features, and transitions in and out of the preview and full view of license information.
Full prototype video, including loading animations on the splash screen, interactive security features, and transitions in and out of the preview and full view of license information.
Full prototype video, including loading animations on the splash screen, interactive security features, and transitions in and out of the preview and full view of license information.
Takeaways
Takeaways
Takeaways
I was successful in my goals of efficiency through scannability, security through interactive features, and inclusivity through consistent grid layout.
The seal as a cornerstone left me with a clean, modern, and adaptable brand.
I would have saved significant time and iterations if I had nailed down my branding earlier in the design process.
I was successful in my goals of efficiency through scannability, security through interactive features, and inclusivity through consistent grid layout.
The seal as a cornerstone left me with a clean, modern, and adaptable brand.
I would have saved significant time and iterations if I had nailed down my branding earlier in the design process.
I was successful in my goals of efficiency through scannability, security through interactive features, and inclusivity through consistent grid layout.
The seal as a cornerstone left me with a clean, modern, and adaptable brand.
I would have saved significant time and iterations if I had nailed down my branding earlier in the design process.
Next Steps
Next Steps
Next Steps
Develop a deeper prototype video that also functions as a product pitch for my digital ID
Develop a template from my DDL that other states can apply their branding and specific needs to
Develop a deeper prototype video that also functions as a product pitch for my digital ID
Develop a template from my DDL that other states can apply their branding and specific needs to
Develop a deeper prototype video that also functions as a product pitch for my digital ID
Develop a template from my DDL that other states can apply their branding and specific needs to
