When the development team handed me a “wireframe,” it was nothing more than a plain ASCII sketch. Just text boxes saying things like [ QR Code Image ] and [ 1 2 3 4 5 6 ]. That was the entire brief.

This post shares how I transformed that rough sketch into a clean, intuitive, and user-friendly TOTP verification UI, all while ensuring the experience was smooth for both developers and end users.

🧩 The Challenge

The goal was simple:
Create a popup UI for TOTP (Time-based One-Time Password) setup that included:

1. A QR code for Google Authenticator
2. A fallback secret key for manual entry
3. An input field for 6-digit OTP
4. Proper error handling for invalid codes

But the challenge wasn’t in the components—it was in the user flow. With no visual hierarchy or clear structure, the original idea risked overwhelming users or causing confusion.

🎯 Design Goals

To address the challenge, I set the following UX goals:

✅ Guide users step by step, instead of showing everything at once

✅ Provide fallback options (manual key entry) without distracting the main flow

✅ Deliver helpful error feedback when the OTP is wrong

✅ Keep the interface lightweight and clean

🧠 My Design Approach

Here’s how I broke it down:

1. Two-Step Verification Flow

I divided the popup into two visual sections:

• Step 1: Scan QR Code or manually enter the secret key

• Step 2: Enter the 6-digit code generated by the authenticator app

This structure helps users focus on one task at a time.

2. Emphasis on Clarity

Each section was clearly labeled and visually separated. I used number icons (“1”, “2”) for intuitive flow, added spacing, and used card-style UI elements to avoid clutter.

3. Error States That Make Sense

Instead of vague or intimidating alerts, I used a friendly message:
⚠️ “Invalid code. Please try again!”
Red input borders and warning icons make the issue obvious without being harsh.

4. Secondary Actions: Optional, Not Distracting

The “Remind Me Later” button is visible but styled less prominently than the primary “Verify and Enable” CTA. This helps users understand the ideal path without forcing it.

🖼️ Final UI Design

The final design balances functionality with clarity—exactly what the dev team needed.

✅ Results

👉 The design was integrated smoothly by the developers

👉 Users intuitively understood the process without extra instructions

👉 The flow avoided common pitfalls like stacked actions and confusing fallback paths

💬 Reflection

This project reminded me that even the simplest sketches like an ASCII wireframe can spark thoughtful design decisions. It’s not about how detailed the brief is; it’s about translating logic into empathy through UI.

Whether you’re working with devs or designing a secure authentication flow, always ask: “What would make this easier for the user?”