Your Prototype Is Not Being Honest With Your Users (And Here’s How To Fix It) — Smashing Magazine

6 min readPrototypes,

User Experience,

User InterfacesThere’s a moment in almost every usability session where a participant pauses at the login screen, types something, and glances up: checking whether they’re “doing it right.” That pause is a clear sign. They’ve already clocked that this isn’t a real app, and every data point collected after that moment is filtered through that awareness.There’s a moment in almost every usability session where a participant pauses at the login screen, types something, and glances up: checking whether they’re “doing it right.” That pause is a clear sign. They’ve already clocked that this isn’t a real app, and every data point collected after that moment is filtered through that awareness.In financial product testing, the problem is sharper. Finance users are trained to notice when something feels off: a balance that doesn’t add up, a field that accepts anything. When a banking prototype skips real authentication, participants don’t just disengage; they stop mid-session to flag it. The team walks away with findings that reflect how users behave in a demonstration, not in a real product.The fix is narrower than you’d think. Identify the moment where participant trust is established and make that interaction real. In a banking app, that moment is the login.This tutorial builds it: credentials that validate, a live error state, and a biometric animation that feels native — no code required.What We’re Building: A Login That Behaves Like A Shipped ProductThe login flow, built around Pie Bank, a mobile banking prototype, includes functional text inputs, a masked password field, credential validation, a live error state, and a Face ID animation timed to feel indistinguishable from iOS.What you’ll need:A login UI from Figma (or any supported design tool)ProtoPie Studio — free to start, everything in this tutorial works on the free planA Lottie file for the Face ID animation (this one is what we used)The finished Pie Bank prototype file — download it to follow alongside, or use it as a reference after you buildStep 1: Import From Figma Choose Scene, Not FlattenedIn Figma, open the ProtoPie plugin with your login frame selected and choose Scene when exporting. Flattened collapses everything into a single image; Scene preserves your layer hierarchy so every element arrives in ProtoPie as a separate, targetable layer.Before moving on: rename every layer meaningfully. “Input Username” not “Rectangle 14”. You’ll reference these names in formulas: vague names compound into real time lost.Step 2: Swap Static Fields For Inputs That Actually Accept TextProtoPie’s native Input layer accepts real keyboard entry: participants type actual text, not tap a placeholder. Go to Text → Input, drag an Input layer onto your canvas, and nest it inside your username field group. Match it visually: placeholder text Username, background fill and font to match your design.Hit preview. Click the field. Type. That’s the prototype starting to behave like an app rather than depicting one.Rename this layer Input Username, duplicate it, and nest the copy inside your password field group.Step 3: One Property Change Masks The PasswordOn the duplicated layer, change placeholder text to Password and set Type to Text Password. ProtoPie handles the masking: no custom logic needed.Preview both fields: username shows text, password shows dots. It already feels real, and you haven’t written a single condition.(Image credit: ) (Large preview)Step 4: Build The Destination Scene Before Wiring NavigationAdd a new scene, even a blank one. The most common sequencing mistake in ProtoPie is trying to wire a navigation response before a destination exists. Create it first.Step 5: Wire The Button: It Works, But It Still Lets Everyone ThroughSelect Log In, add a Tap trigger, set response to Jump, target your dashboard scene, transition Slide in from right to left.Preview and tap. It navigates: but for any input, including nothing. The prototype is still lying. The next two steps are the fix.Step 6: Add Variables So The Prototype Remembers What Was TypedAt the bottom-left of ProtoPie, add two Text type variables: username and password. Bind each to its input layer with a formula:input("Input Username").text