Figma, Adobe Illustrator

UI / UX Design Case Study

Redefining the Digital ID Experience: A Focus on Fluidity and Trust

Challenge: Design a supplementary mobile experience for the digital ID that feels as secure and reliable as the physical card, overcoming common user distrust in digital state transitions.

Discovering the Problems.

New York Physical Driver's License

Their physical license does not display information in the most convenient way for people to view it. The physical ID is difficult to read, difficult to understand, unless properly trained or researched.

The upsides:

  • Used as a tool needed for every day use

  • The design is familiar

  • Clear proof of legitimacy

New York Physical Driver's License

Their physical license does not display information in the most convenient way for people to view it. The physical ID is difficult to read, difficult to understand, unless properly trained or researched.

The upsides:

  • Used as a tool needed for every day use

  • The design is familiar

  • Clear proof of legitimacy

New York Digital Driver's License

New York State’s current digital ID is unrefined and unknown. There is a lack of identity and individuality focus on New York’s infrastructure and symbols. There are no aspects of "enjoyment" or "fun" implemented to keep the user coming back to use the app instead.

  • No interactions or transitions

  • Heavily content focused

  • UI design is “old fashioned”

  • No options to limit displayed information

The upsides:

  • Information is clear to differentiate and see

  • Clear visual hierarchy

  • Labels and legitimacy

My challenges are…

Security/Trust: Demonstrate a high-level solution for fraud prevention that is impossible to replicate physically.


Utility/Privacy: Addresses the user need for instant access to related documents without carrying multiple cards.


Inclusivity/UX: Highlights a commitment to accessible design, a critical requirement for government-adjacent services.

What is the opportunity?

This raises the idea to take this and completely redesign the New York State Digital ID while keeping the same functions as the original and to add other functions that were limited to a physical card.

Though required by a class project, it was an opportunity to learn and strengthen our designs through an iterative process of refinement and feedback.

Integrating an accessible UX features as a critical design requirement, and aligning the product with best-practice standards for inclusivity in government services.

My goals with this project were to create a simple and unique prototype of New York’s digital ID. I wanted to learn more about the design process, including and importantly, design iterations and feedback. This includes taking into account both experienced and inexperienced users.

DESIGN PROCESS

Ideas and Conceptualization

Rapid Sketching for Feature Mapping: This phase utilized concurrent sketching and feature-labeling to quickly transition abstract ideas (like "need for security" or "age check") into concrete UI solutions. This approach ensured that a broad range of features was conceptualized and mapped to specific interface placements early in the process.


Defining the Core Architecture: The initial sketches established the basic layout and primary navigation structure. This foundation was critical for defining the information hierarchy and ensuring the app's overall flow was intuitive before moving into high-fidelity mockups.


Bridging Concept to Execution: These initial ideas served as the bridge between high-level project goals and tangible design decisions, clearly labeling which features were essential (e.g., dynamic validation) and where they would be placed for maximum user efficiency.

DESIGN PROCESS

Solidifying Ideas into a Concise Layout

The wireframing phase was essential for establishing the foundational Information Architecture and User Flow, even though the visual design evolved significantly in later stages.

DESIGN PROCESS

Iteration I: Implementing the base layout to an established identity

Strategic Color Psychology and Branding: The initial color palette utilizes a muted gray-blue tone. This choice serves as a contextual brand anchor that visually referencing New York's specific regional climate while ensuring the app maintains a professional and trustworthy aesthetic appropriate for a government-adjacent service.

DESIGN PROCESS

Iteration II: Fixing low contrast and refining background and text colors

Establishing Brand Authority: I maintained the established card-based pattern for consistency, but refined the color palette. I shifted to a deeper, high-saturation blue to ground the visual identity and project a sense of official authority and trustworthiness.


Enhanced Readability & WCAG Compliance: The palette shift included a deliberate choice for darker tones and increased contrast.


Background Filtration for Focus: I implemented a blurred background filter over the foundational imagery. This technique successfully protects information fields from a complex visual backdrop, effectively managing cognitive load and ensuring the user's focus remains solely on the critical data presented in the foreground.

DESIGN PROCESS

Iteration III: Refining the illustration style and experimenting with composition

The key decision for this iteration was acknowledging that the previous muted color palette compromised visibility and that the rigid card structure felt too static. This led to a strategic pivot focused on achieving a more dynamic, readable, and personality-driven UI.

DESIGN PROCESS

Iteration IV: The previous iteration, while achieving visual integration, introduced challenges with readability and establishing a clear hierarchy necessary for a compliance-based credential. This led to a strategic decision to return to the card system, leveraging its inherent strengths for structure while executing it in a more dynamic and engaging way.

Clarity Over Clutter: The background was strategically simplified to a cityscape only illustration. This decision ensures the license information remains the dominant visual element, fulfilling the app's core purpose of efficient information display. The background now serves as a subtle contextual anchor rather than a competing focal point.


Fluid Movement and Information Segmentation: The card-based structure was maintained and refined as the optimal system for both scanability and interaction. By separating content into distinct, movable containers, the design facilitates clear information hierarchy and supports smooth, dynamic transitions between different views (e.g., full view vs. age view). This strategic choice directly contributes to a low-friction, intuitive user experience, making the app more likely to be adopted and used routinely.

FINAL SOLUTION

Styleboard

Color Strategy: Grounding the Brand in Authentic New York Identity

The primary color palette is built upon a strategic selection of deep, resonant blues that serve a dual purpose.

  1. Official Authority: The specific blue hues are directly inspired by the New York State flag and the "Excelsior" state seal, immediately establishing the app's official credibility and institutional trust.

  2. Emotional Context: The subtle tonality of the blues is intended to reflect the authentic regional atmosphere—the "beautiful, yet often moody" weather—anchoring the app in a realistic, relatable sense of place. This approach ensures the visual identity is professionally compliant while maintaining a strong emotional connection to the state.

FINAL SOLUTION

Iteration V: Balancing aesthetics with functional purpose

Final UI Design: Full View

Information Architecture & Verification Flow: The primary view is optimized for at-a-glance verification, displaying the user's name, photo, and age in a constant, fixed header to establish immediate identity. Secondary details (permits/endorsements) are intentionally layered behind a tap or swipe gesture, ensuring a clean primary visual field while maintaining efficient access to auxiliary data. This approach prioritizes clarity and speed for verifying agents.

FINAL SOLUTION

Final UI Design: Age View

Zero-Knowledge Verification (Privacy-First Design): This view is specifically designed to facilitate age-restricted transactions (e.g., alcohol, tobacco) by practicing data minimization. It strategically displays only the user's name and legally required age, ensuring that all other private, sensitive information (address, license number, etc.) remains completely hidden, thereby building trust and protecting the user's data privacy.


Verification Efficiency: The inclusion of an at-a-glance verification badge in the top-left corner allows for instantaneous confirmation of legal age, significantly reducing friction and time during transaction processes.

FINAL SOLUTION

Final UI Design: QR Code

The design employs tiered information display to give the user complete control over their sensitive data. This feature allows the user to select the appropriate verification level based on the context of the interaction.


For instance, the Age View satisfies low-risk scenarios like purchasing alcohol, while the Full View is reserved for high-security checkpoints, such as TSA. This approach ensures maximum user agency and establishes the app as a trusted tool for selective data sharing.

FINAL SOLUTION

Final UI Design: Splash Screen

Visual Hierarchy & Emotional Branding: The opening screen utilizes a dynamically composed cityscape to immediately anchor the user to the New York brand identity. The intentional off-center placement of the One World Trade Center against the sun creates an asymmetrical, engaging visual field, ensuring the building becomes the immediate, dominant focal point, thus setting a dynamic tone for the application experience.

FINAL SOLUTION

Final Design: Logo

Strategic Design Rationale: The concept centers on creating an enduring symbol for New York State that simultaneously communicates its civic values and cultural identity.


Visual Execution & Technique: I leveraged negative space to seamlessly merge two of New York's most globally recognizable symbols: the Statue of Liberty's crown (representing democracy and freedom) and the "I ❤️ NY" heart (representing tourism and cultural spirit).


Intended Impact: The resulting mark is designed to function as a powerful, two-in-one visual mnemonic. It offers a historical reminder of immigration and democratic ideals while ensuring scalability by echoing the established success of the existing brand identity.

SOLUTION AND EXECUTION

I created a system of micro-interactions and unified state animations to ensure a single, consistent, and recognizable unit. This process required deep user research into mental models of identification and leveraging tools like Figma to deliver high-fidelity prototypes.


To reflect on the goal of creating a supplementary app to the physical digital license, using familiar principles to create animations with the illusion of everything being one consistent unit connects to user recognition.


The final prototype delivers a highly accessible and memorable interaction model, specifically designed to reduce cognitive load and boost user confidence in the transition to digital identification.

High-Fidelity Prototyping: Building Visual Trust through Dynamic Security

Corina Lougie

corina.lougie@gmail.com

Create a free website with Framer, the website builder loved by startups, designers and agencies.