Project Summary
In a digital age where smartphones are extensions of ourselves, this project aimed to create a smartphone-based DDL, reimagining visual design and interaction to merge physical and digital identification. Key goals include:
Legibility, user-friendliness, and functionality
Effortless switching between a comprehensive ID display and an age-specific view.
Ensuring the reliability of digital licenses while prioritizing user convenience at the same time.
Problem Statement
The challenge is to transition to a digital driver's license while maintaining Pennsylvania's identity, ensuring the solution reflects state values and builds user trust. Key focus areas include:
Designing an intuitive and seamless user experience
Improving accessibility for all citizens
Highlighting Pennsylvania's unique identity through visual and functional elements
Building a sense of trust and belonging for users in the digital space
Digital Licenses Gain Traction
Digital driver's licenses are quickly gaining popularity as modern alternatives to physical IDs in states like Louisiana, Maryland, Delaware, and internationally in countries like Australia and the UK. Things to note:
They're often accessed via smartphone apps with encryption and authentication for security and even offer offline access and additional features like insurance and vehicle registration.
Challenges include universal acceptance, security concerns, and varying state laws. Security is a top priority for effective UI design in this project.
Concept Sketches
Full ID View
Explored layout that mirrors the physical layout of a traditional driver's license, with sections for personal information, license number, and address, ensuring clarity and readability.
Navigation Experimentation
Tested the placement of navigation options both fixed to the bottom and on the right side of the screen to evaluate accessibility and user preference.
Space Optimization
Optimized the use of space at the top of the screen to balance branding elements with navigation options and DDL information.
Wireframes
Inspiration
My first moodboard explored a modern minimalist approach, featuring clean lines, uncluttered layouts, and a neutral color palette with subtle blues and greens. The idea was to be more abstract with the use of geometric shapes and line.
Key words:
Polished
Streamlined
Contemporary
UI Style Guide
Visual Comps V1
In this visual direction, I aimed to evoke sophistication through a symphony of purple hues, set against a cityscape backdrop that suggests a lavender-filled urban area. Key design elements include:
Color Palette: Various shades of purple to enhance elegance.
Layout: Navigation positioned in the top right corner for subtle functionality.
Branding: Refinement of branding elements to align with the overall aesthetic.
Typography: Enhancement of typography for improved readability and impact.
Visual Theme: Combination of cityscape and lavender motifs.
In exploring the next visual direction, I experimented with abstract colors and shapes to create a playful aesthetic. However, I realized this approach limited space for essential information, prompting a return to the previous design. I did enjoy playing around with this one though!
Visual Comps V2
In this iteration, I focused on refining the app's branding and enhancing its visual appeal. Key updates include:
Logo Redesign: Created a logo that better represents Pennsylvania, distinguishing "PA ID" from the previous "paid" appearance.
Typography Improvements: Enhanced typography for better readability and user engagement.
Age Emphasis: Improved emphasis on the user’s age in the third view.
Final UI Designs
In finalizing my visual direction, I adopted a cleaner design approach. Key refinements include:
Streamlined splash screen featuring only the logo
Static navigation bar positioned beneath the logo for improved tap navigation
Replaced redundant barcodes with an organ donor section for enhanced utility and space efficiency
Developed a custom Pennsylvania seal, integrating it into the design for a unique state identity
Takeaways
Reflecting on this project, I recognized several key areas for growth:
Visual Consistency: Maintaining a consistent visual identity across all app screens enhances usability and reinforces the brand's identity.
Constant Iteration: Embracing an iterative design process and refining my work based on peer feedback has proven invaluable. Starting prototyping early also aids in this process.
Mobile Optimization: I learned the importance of considering screen size to maximize accessibility, as I initially made the text too small.