Demonstrating Digital Licenses in Online Banking

HIGHLIGHTS

I led visual and interaction design of high-fidelity prototypes demonstrating how mobile driver’s licenses (mDLs) enhance cybersecurity in digital banking

  1. I used Adobe XD and Figma to develop 4 prototypes illustrating 4 key use cases of mDLs in online banking.

  2. I worked closely with an agile, cross-functional team of engineers, project managers and policy analysts, continuously iterating based on ongoing feedback.

  3. By visualizing realistic user flows, these wireframes were crucial in prompting engineering teams to confront concrete implementation questions early.

  4. These prototypes have been published and are being used to support real-wold adoption by financial institutions and technology partners.

CONTEXT

As our lives become increasingly digital, the volume of personal information we share online continues to grow, along with the risk of exposure.

Protecting this data has become more critical than ever, prompting the need for innovative solutions.

​One such innovation is the mobile driver’s license (mDL), a secure, digital alternative to traditional physical IDs.

GOAL

Encourage the adoption of mobile driver's licenses (mDLs) by financial institutions by creating high-fidelity prototypes that demonstrate seamless integration into online banking platforms.

This project focused on concept development. Rather than testing with end users, the goal was about showcasing the product vision and feasibility, and getting buy-in.

How do Mobile Driver's Licenses Enhance Cybersecurity?​

Secure & Verifiable

Powered by encryption, your ID is protected and can’t be faked or altered.

Works Across Devices

Access your mDL from your phone, laptop, or tablet.

Biometric Protection

Only you can unlock your mDL using fingerprint or face recognition.

Choose What You Share

Share only what’s necessary (e.g., age, not full name or address).

APPROACH

I applied the Nielsen Norman Group’s design thinking framework to guide prototype development.

Given the agile nature of the project, I iterated the prototypes continuously based on ongoing feedback from our cross-functional team.

This allowed us to refine the concept in real time, identify implementation challenges early, and ensure the design remained grounded in technical and organizational realities

ACTIVITIES

I empathized with stakeholders to understand their goals, constraints, and success criteria for the prototypes.

UNDERSTAND

    1. Is there a style guide?

    2. What is the expected timeline?

    3. What are the main goals you want to achieve with this UI design?

    4. Which devices & versions should be supported? (mobile, tablets, desktops).

    1. When would a user encounter this product in their life? During what task?

      This helps anchor the experience in a concrete moment and allows me to design outward from a critical use case.

    2. Have any existing products come up in conversation during concept development?

      Clients don’t always name specific sources of inspiration, but products often get mentioned informally. I listen for those cues to better understand expectations and mental models.

    3. Should the wireframe focus narrowly on a specific moment in the user journey, or zoom out to show a broader context?

      This helps anchor the experience in a concrete moment and allows me to design outward from a critical use case.

  • We’ll focus on 1 of the 4 wireframes. This wireframe demonstrates how a user would apply online for a new checking account at a (fictitious) bank.

    Step 1: The user starts an online application for a new account.

    Step 2: The user presents their mDL by using their mobile device to scan a QR code on the bank application page.

    Step 3: The user confirms on their mobile device that they wish to present their mDL to the bank.

    Step 4: The application is populated with the mDL information.

    Step 5: The user submits their application.

User Flow for Prototype 1 of 4 - Using mDLs to apply for a bank account online

Ideate and create low fidelity sketches in Adobe XD using placeholders for graphics. Hone the sequence of events and blocking in important interactions.

I reviewed existing banking websites to understand the structure of pages and user flows.

→Time-efficient and rooted in industry awareness.

→Helps identify established patterns

→Aligns with user expectations

→Ensures our wireframes reflected recognized design standards

I incorporated recurring elements such as progress bars to reflect application stages and clickable info boxes to provide additional details where needed.

I blocked in key elements and interactions, then refined them iteratively based on feedback.

Once the foundational structure was in place, I moved on to detailing, such as establishing a color palette and selecting imagery with appropriate licenses. I included subtle visual details, such as footer disclaimers, to give the wireframes a more polished, realistic look and feel.

EXPLORE

MATERIALIZE

Present polished prototypes to the broader team and leadership to validate and gather feedback, ensuring alignment and refining the concept collaboratively.

By this stage, most small-scale design and interaction refinements had already been incorporated, so only minor adjustments were expected.

However, I did implement several key structural changes based on evolving backend development needs to align the front-end vision and the technical realities of implementation.

OUTCOMES

mdl_pics_5.png
mdl_pics_4.jpg
mdl_pics_1.jpg
mdl_pics_3.jpg
mdl_pics_2.jpg

I created prototypes for the National Institute of Standards and Technology (NIST) to facilitate the adoption of mobile driver’s licenses (mDLs) by financial institutions.

I accompanied each prototype with a narrated demonstration, which NIST published to share product vision, demonstrate feasibility, and gather feedback.

By visualizing realistic user flows, these wireframes were crucial in prompting engineering teams to confront concrete implementation questions early.

These prototypes are being used to support real-wold adoption by financial institutions and technology partners including:

  • Microsoft

  • Google

  • JPMorgan Chase

  • Capital One

  • PNC Bank

  • US Bank

  • Wells Fargo.

Four wireframes illustrating key use cases for mobile driver’s licenses (mDLs) in online banking:

1) Applying for a new account using an mDL

2) Enrolling in online access to an existing account

3) Instant approval for account opening using an mDL

4) Verifying identity for high-value transactions (step-up authentication)