Demonstrating Digital Licenses in Online Banking

Role

UX/UI Designer

Tasks

Lo/High Fidelity Wireframes

Create public-facing wireframe demonstrations

Presenting Prototype Demo to Leadership

Team Members

Project Managers

Cybersecurity Engineers

Financial Institutions

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

Applying for a new account using an mDL
Enrolling in online access to an existing account
Instant approval for account opening using an mDL
Verifying identity for high-value transactions (step-up authentication)

I accompanied each wireframe with a narrated demonstration, which the National Institute of Standards and Technology (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 wireframes have been instrumental in supporting conversations and working sessions with cross-industry collaborators including:

Microsoft
Google
JPMorgan Chase
Capital One
PNC Bank
US Bank
Wells Fargo.

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.

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

Goal

Encourage the adoption of mobile driver's licenses (mDLs) by financial institutions by creating interactive wireframes 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.

Approach

I applied the Nielsen Norman Group’s design thinking framework to guide wireframe development. Although these wireframes weren’t intended for direct user testing, this framework provided a valuable structure for shaping wireframe development.

Given the agile nature of the project, I iterated the wireframes 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

Understand

I began by empathizing with stakeholders to understand their goals, constraints, and success criteria for the wireframes.

Explore

Next, I define core requirements and explore ways to express those needs visually, using ideation and prototyping techniques to iterate on design directions.

Materialize

I then share early versions with the client for feedback, ensuring alignment and refining the concept collaboratively.

Activities

Understand - Define objectives and key parameters for the wireframes.

During our design brief, I asked foundational questions frequently used to guide wireframe development:

Is there a style guide?
What is the expected timeline?
What are the main goals you want to achieve with this UI design?
Which devices & versions should be supported? (mobile, tablets, desktops).

I also asked additional questions that help me with my UX/UI design process:

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.

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.

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.

My team and I developed a step by step user process that I would use for the next stage of wireframe development.

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.

Step-by-Step User Process

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

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

→This approach is time-efficient and rooted in industry awareness.

→I helps me identify established patterns, align with user expectations, and ensure 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.

Materialize - “Test” the prototype by presenting it to the broader team and leadership.

I presented the polished wireframes to the broader team and leadership to validate the prototype and gather feedback.

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.