Rochester Website Redesign

PA Digital Identification

PA Digital Identification

PA Digital Identification

Role

UI/UX (Solo Project)

Sustainability Tech

Timeline

January - February 2024

Skills

UX Design, UI Design, Prototyping

Tools

Figma

Role

UI/UX (Solo Project)

Sustainability Tech

Timeline

January - February 2024

Skills

UX Design, UI Design, Prototyping

Tools

Figma

View process deck →

Role

UI/UX (Solo Project)

Timeline

January - February 2024

Skills

UX Design, UI Design, Prototyping

Tools

Figma

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.

  • Apple users can scan their physical driver’s license or state ID, take a selfie, and perform facial and head movements. The issuing state verifies the ID before it is added to Apple Wallet, where it can also be stored on an Apple Watch. This process is similar to adding credit cards, event tickets, and transit passes to the wallet.


  • Google mandates that users enable a screen lock to protect their ID from unauthorized access. Users can upload photos of their ID or take photos in real time. To verify identity, Google Wallet requires users to record a video that matches the ID photo. Similar to Apple, the submitted information must be approved by the state, which typically takes a few minutes.

  • Apple users can scan their physical driver’s license or state ID, take a selfie, and perform facial and head movements. The issuing state verifies the ID before it is added to Apple Wallet, where it can also be stored on an Apple Watch. This process is similar to adding credit cards, event tickets, and transit passes to the wallet.


  • Google mandates that users enable a screen lock to protect their ID from unauthorized access. Users can upload photos of their ID or take photos in real time. To verify identity, Google Wallet requires users to record a video that matches the ID photo. Similar to Apple, the submitted information must be approved by the state, which typically takes a few minutes.

  • Apple users can scan their physical driver’s license or state ID, take a selfie, and perform facial and head movements. The issuing state verifies the ID before it is added to Apple Wallet, where it can also be stored on an Apple Watch. This process is similar to adding credit cards, event tickets, and transit passes to the wallet.


  • Google mandates that users enable a screen lock to protect their ID from unauthorized access. Users can upload photos of their ID or take photos in real time. To verify identity, Google Wallet requires users to record a video that matches the ID photo. Similar to Apple, the submitted information must be approved by the state, which typically takes a few minutes.

Concept Sketches

  • Keystone Symbolism

    Incorporated the iconic Keystone symbol of Pennsylvania, representing the state's central role in American history and its significance in the formation of the nation.


  • Type Considerations

    Explored various font styles for "PA ID" to find a balance between legibility and aesthetic appeal. Often considered serif or sans-serif fonts that complement the overall design.


  • Proportions

    Always ensured that the size/placement of "PA ID" within the keystone was visually balanced. Experimented with different proportions to find the optimal arrangement.

  • 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.

  • Keystone Symbolism

    Incorporated the iconic Keystone symbol of Pennsylvania, representing the state's central role in American history and its significance in the formation of the nation.


  • Type Considerations

    Explored various font styles for "PA ID" to find a balance between legibility and aesthetic appeal. Often considered serif or sans-serif fonts that complement the overall design.


  • Proportions

    Always ensured that the size/placement of "PA ID" within the keystone was visually balanced. Experimented with different proportions to find the optimal arrangement.

Wireframes

My futuristic, tech-inspired mooboard features a color palette of electric blues, purples, and metallic tones, creating a striking atmosphere. This approach ensures the digital driver's license app is intuitive and forward-thinking, catering to Pennsylvania's tech-savvy audience.

Key words:


  • Dynamic


  • Metallic


  • Forward-Thinking

My futuristic, tech-inspired mooboard features a color palette of electric blues, purples, and metallic tones, creating a striking atmosphere. This approach ensures the digital driver's license app is intuitive and forward-thinking, catering to Pennsylvania's tech-savvy audience.

Key words:


  • Dynamic


  • Metallic


  • Forward-Thinking

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.


email

jeo8561@rit.edu

Looking for full-time Product & UX Design opportunities!

email

jeo8561@rit.edu

Looking for full-time Product & UX Design opportunities!

email

jeo8561@rit.edu

Looking for full-time Product & UX Design opportunities!