Prototype a Banking Report Flow

Design and test a clickable banking transaction-report prototype with Penpot.

Introduction

30 Second Summary

Spotting an unfamiliar card purchase can leave someone unsure about what to do next. A vague response after reporting it makes that uncertainty worse.

In this project, you will build a clickable mobile banking prototype in Penpot for reporting a fictional unfamiliar transaction. Evidence from a short usability check guides your improved confirmation screen.

What You'll Build

You will demo a mobile journey from reviewing an unfamiliar purchase through receiving a clear report status with next steps.

By the end of this project, you'll have:

A shareable prototype that demonstrates the complete reporting journey in a browser without exposing real financial data.
A neutral usability check that captures one observable behavior plus one direct participant quote.
A clear confirmation screen with a visible status. It also shows a fictional case reference. Next-step guidance reduces uncertainty. A disclaimer explains the prototype's limits.
Secret Mission: Add a card-security overlay that separates transaction reporting from protective card actions without pretending to contact a real bank.

Are there any prerequisites?

You need a Windows device for this guide. Google Chrome plus Penpot setup is covered from scratch.

Before We Start

Before any hands-on work begins, you need a clear product commitment to guide every screen. This statement keeps the fictional customer, the unfamiliar transaction, and the need for trust at the centre of your decisions.

Set Up Penpot on Windows

Your product commitment gives the prototype a clear customer problem. This setup creates the workspace where that idea becomes a testable journey.

A browser-based Penpot Cloud workspace removes development setup. Google Chrome gives you the supported Windows route into that workspace.

In this step, get ready to:

Confirm Google Chrome is current on Windows.
Create your Penpot Cloud account.
Open an empty Penpot file inside the named project.

Why Penpot Cloud?

Penpot Cloud gives you prototyping tools directly in your browser. Self-hosting adds infrastructure setup that this beginner project does not need.

Check Google Chrome

Penpot recommends the latest Google Chrome for the best experience. Checking the browser now gives you a dependable workspace for the rest of the project.

Press the Windows key to open Windows search.
Type Google Chrome into the search field.
Choose the path below that matches what Windows shows.

✔️ Chrome opens

Select Google Chrome in the Windows search results.
Select More in Chrome.
Select Help.
Select About Google Chrome.
Select Relaunch if an update is offered.
Leave Google Chrome open after the update check finishes.

Chrome checks its update status on the About Google Chrome page. No Relaunch option means the browser is already current.

If you selected Relaunch, Chrome closes before opening again with the update applied.

ⓧ Chrome is not installed

Visit the official Google Chrome download page using the browser available on Windows.
Download the Windows installation file from that page.
Open the installation file from your browser downloads.
Select Run if Windows asks whether to run the file.
Select Yes if Windows asks whether the app can make changes.
Press the Windows key after installation finishes.
Type Google Chrome into the search field.
Select Google Chrome to open it.

You will see Google Chrome open with a new browser window.

Chrome Still Not Opening?

Windows can block the installer. Your device also needs to meet Chrome's Windows requirements.

Use the Google Chrome installation guide to check the official Windows guidance.

Help me diagnose why Google Chrome is not opening on Windows.

Create your Penpot account

The account setup only needs an email address. Your fictional prototype stays separate from every real financial detail.

Select the address bar in the open Chrome window.
Enter https://design.penpot.app.
Press Enter to load Penpot Cloud.
Select Signup.
Keep every banking detail out of Penpot during account setup.
Enter your email address in the signup form.
Complete the remaining account prompts until the Dashboard loads.

You will see the Penpot Dashboard after signup finishes. That is an important setup win.

Your browser workspace is ready without holding any banking information.

Dashboard Not Loading?

Check that every required signup field is complete.
Return to https://design.penpot.app in Chrome.
Select Signup to retry the account flow.

Help me troubleshoot my Penpot signup.

Create the Penpot project and file

A Penpot project keeps related design work together. A file gives one prototype its own workspace.

Select + New project on the Dashboard.
Enter Banking Product Practice as the project name.
Confirm the project name in the dialog.

You will see Banking Product Practice listed on the Dashboard.

Select the Banking Product Practice project on the Dashboard.
Select the + button inside the project.
Enter Suspicious Transaction Flow as the file name.

Before you confirm the file name, where do you expect Penpot to place the tools, layers, and design controls?

Confirm the file name to open it in the Workspace.
Confirm the Toolbar is visible.
Confirm the Layers panel is visible.
Confirm the Design properties are visible.

You will see an empty viewport in the center. The Toolbar, Layers panel, and Design properties are visible around it.

Your setup is complete. The empty Suspicious Transaction Flow file is ready for the first prototype screen.

Your browser design workspace is ready. Next up, you will turn the product commitment into a visible transaction screen.

Build a Dead-End Transaction Screen

The empty Suspicious Transaction Flow file is ready in Penpot. You can now turn your customer commitment into the first screen a customer would see.

A report action can look complete while leaving the customer's next moment undefined. This first version lets you feel that uncertainty before you design the rest of the journey.

In this step, get ready to:

Create a 390 by 844 mobile board named Review Transaction.
Fill the board with fictional transaction details and a prominent report button.
Test the report action in View mode to expose the missing journey.

Create the mobile board

A board defines the screen boundary that appears in the prototype. The 390 by 844 dimensions give you a tall mobile canvas for the banking journey.

Press B to activate the Board tool.
Drag across the empty viewport to create a board.

You should see a new board in the viewport. A matching layer appears in the Layers panel.

Set the selected board's width to 390 in Design properties.
Set the selected board's height to 844 in Design properties.

The board should now resemble a tall mobile screen. Its dimensions show 390 by 844 in Design properties.

Press Alt N to rename the selected board.
Enter Review Transaction as the layer name.

You should see Review Transaction in the Layers panel. The named board now anchors the first stage of your prototype.

Add the fictional transaction

Dummy data lets you test a banking scenario without exposing anyone's financial information. Every merchant name and card detail on this screen stays fictional.

Press T to activate the Text tool.
Click near the top edge inside the board.
Type Fictional banking prototype.

You should see the prototype label at the top of the mobile screen. It signals that the journey is a simulation.

Press R to activate the Rectangle tool.
Drag a rectangle below the prototype label to create the transaction card.
Press T to activate the Text tool.
Click inside the transaction card.
Type Northstar Market, $84.20, September 18, 2026, and Card ending 4821 on separate lines.

You should see all four fictional transaction details inside the card. Together they give the customer enough context to recognize the unfamiliar purchase.

Press R to activate the Rectangle tool.
Drag a wide rectangle beneath the transaction card to form the prominent button.
Press T to activate the Text tool.
Click in the center of the button rectangle.
Type Report this transaction.

The screen now looks actionable. The report button still exists only as visual layers because no prototype interaction has been added.

Test the deliberate dead end

View mode displays the board as a customer would experience it. This test reveals whether the visible report action creates a complete journey.

Before you test it, what do you expect to see after selecting the report button?

Select the play button at the top right of the navbar to launch View mode.

You should see the Review Transaction board without the editing panels. Only the board and its contents appear in View mode.

Confirm that Northstar Market, $84.20, September 18, 2026, and Card ending 4821 are visible.
Select Report this transaction once.

The screen stays on Review Transaction. The button produces no response.

You found the trust gap first-hand. The report action leaves the customer without acknowledgment or direction.

View mode missing your content?

Return to the Penpot Workspace.
Move any missing text or rectangle inside the Review Transaction board.
Confirm that the layer named Review Transaction is a board.

Help me troubleshoot missing layers in Penpot View mode.

The trust gap is now visible. Next, you'll give the report action a review step and a clear destination.

Connect the Reporting Journey

The dead-end test in Penpot exposed a trust problem. A customer can begin a high-stakes action without receiving assurance or control.

You will connect three boards into an interaction flow. The review screen lets the fictional customer check the details before submission.

The basic confirmation gives the journey a visible ending. Its limited detail creates a focused question for the usability check.

In this step, get ready to:

Create two boards from the existing mobile design.
Shape each new board for its role in the reporting journey.
Connect the controls into a testable reporting flow.

Duplicate the transaction board

Duplicating the existing mobile board preserves its 390 by 844 size. It also carries the fictional transaction details into each stage of the flow.

Return to the Workspace from View mode.
Select Review Transaction in the Layers panel.
Duplicate the selected board with Ctrl+D.

You will see another board layer selected in the Layers panel.

Rename the selected copy to Check Report with Alt+N.
Duplicate the selected Check Report board with Ctrl+D.

You will see a third mobile board selected in the Layers panel.

Rename the selected copy to Report Received with Alt+N.

The Layers panel now lists Review Transaction, Check Report, and Report Received as three separate boards.

Shape the review and confirmation screens

The Check Report copy already contains Northstar Market, $84.20, September 18, 2026, and Card ending 4821. These details anchor the review checkpoint.

Select the Check Report board in the Layers panel.
Add I don't recognize this transaction beneath the transaction summary with the Text tool or T.
Add a Back text control near the top of the board with the Text tool.
Replace the existing button label with Submit report.

Good progress. The middle screen now lets the fictional customer review the transaction before committing to the report.

The final board needs a clean baseline for the later usability check. For now, it records receipt with a fictional case reference.

Clearing the copied child layers is a little fiddly because the board itself must stay in place.

Select the Report Received board in the Layers panel.
Select every content layer nested inside the board.
Press Delete to clear the copied content.
Add Report received with the Text tool or T.
Add BR-1042 beneath the confirmation message with the Text tool.

You will see only Report received and BR-1042 inside the final board. This deliberately sparse confirmation is ready for a usability check.

Connect the reporting flow

Prototype mode turns visible layers into controls. Each interaction combines a trigger with an action.

Select Prototype mode in the right sidebar.
Select the Report this transaction button on Review Transaction.
Drag its connection handle to the Check Report board.

You will see a connection line running from the report button to the review board.

Set the interaction trigger to On click.
Set the interaction action to Navigate to.

The first interaction now points from Review Transaction to Check Report.

Select the Submit report button on Check Report.
Drag its connection handle to the Report Received board.

You will see a second connection line leading to the confirmation board.

Set the interaction trigger to On click.
Set the interaction action to Navigate to.

The submission interaction now points from Check Report to Report Received.

Select the Back control on Check Report.
Add an interaction to the selected control in Prototype mode.
Set the interaction trigger to On click.
Set the interaction action to Previous screen.

The Back control now returns to whichever screen opened the review checkpoint.

How the interaction chain works

On click waits for the customer to select a control.
Navigate to sends the prototype to the connected board.
Previous screen lets the customer leave the review without submitting the report.

Before you launch View mode, which destination do you expect after each control?

Select the Review Transaction board in the Workspace.
Click the play button at the top right to launch View mode.
Select Report this transaction.

You will arrive at Check Report. The screen shows the fictional transaction summary with the reason I don't recognize this transaction.

Select the Back control.

You will return to Review Transaction. This proves the customer can step back before submission.

Select Report this transaction again.
Select Submit report on the review screen.

You will arrive at Report Received. The final screen shows Report received with reference BR-1042.

You have converted the silent report button into a complete three-screen journey with review, submission, confirmation, and a working Back control.

Flow not moving between boards?

Return to Prototype mode.
Select the control that failed.
Confirm its trigger shows On click.
Confirm its action shows Navigate to or Previous screen.
Confirm each navigation connection points to the intended board.

Help me diagnose a broken interaction in my Penpot reporting flow.

The reporting flow now works mechanically. Next, you will run a short usability check to see whether its language and feedback create enough confidence.

Run a Usability Check

The three-screen Penpot flow now moves from transaction review through report submission to confirmation. The next question is whether another person understands what happened after the final click.

A short moderated usability test lets you watch someone attempt the journey while saying what they think. Their behavior can reveal whether the bare confirmation creates enough confidence for a banking action.

In this step, get ready to:

Hide interaction cues during the usability check.
Share the fictional prototype through a restricted public link.
Record anonymous evidence from a neutral think-aloud check.

Prepare a neutral task

Interaction cues reveal which areas respond to clicks. Hiding them keeps the task neutral because the interface must communicate where to go.

Return to View mode by selecting the play button at the top right of the navbar.
Open the Interactions setting.
Select don't show.
Write this neutral task at the top of your usability notes: You notice an $84.20 card purchase you do not recognize. Show me what you would do and tell me what you expect after each action.

Click an empty area of the prototype to check the new interaction-cue setting.

You should see the prototype without highlighted click targets. The fictional transaction remains visible.

Why Use a Neutral Task?

The task gives the participant a believable goal without naming any controls. This leaves room for their behavior to expose unclear labels or missing feedback.

Share the prototype safely

A public URL can feel risky. Your prototype uses fictional banking data throughout.

Select Share prototype in the View mode from earlier.
Select Get link.
Select Manage permissions.
Choose only the page containing the three prototype boards under Pages shared.
Turn off Can comment.
Turn off Can inspect code.

You should see only the prototype page selected. Both permission toggles should appear switched off.

Select Copy link.
Store the copied URL here: your Penpot prototype link.

That is the sharing risk handled. Your copied URL now points to a fictional prototype with restricted permissions.

What Does Public Mean?

Anyone with the URL can view the shared prototype without a Penpot account. Keep real customer names out of every board.

Keep real account details out of the prototype. Apply the same rule to your usability notes.

Observe without leading

A think-aloud check reveals what someone notices at each point in the journey. Staying quiet protects the evidence because your hints cannot guide them toward the controls.

Create a fresh page for the session in your preferred notes app or on paper.
Add three sections titled Observable behavior, Hesitation, and Direct quote.
Use only fictional banking details in your notes.
Choose the path that matches who is available for your usability check.

✔️ I have a volunteer

A volunteer gives you a fresh view of the journey. Your role is to watch how they interpret it.

Send your Penpot prototype link to your volunteer.
Read this task aloud: You notice an $84.20 card purchase you do not recognize. Show me what you would do and tell me what you expect after each action.
Ask the volunteer to say each thought aloud as they use the flow.
Stay quiet while the volunteer attempts the task.
Avoid pointing to any controls.
Record one visible action under Observable behavior.
Record one pause or sign of uncertainty under Hesitation.
Record one sentence exactly as spoken under Direct quote.

ⓧ Nobody is available

A solo rehearsal lets you practise the same procedure. Its label keeps the evidence honest.

Open a separate Google Chrome browser window.
Load your Penpot prototype link in the address bar.
Label the top of your notes self-review.
Read this task aloud: You notice an $84.20 card purchase you do not recognize. Show me what you would do and tell me what you expect after each action.
Say each thought aloud as you use the flow.
Complete the reporting journey without switching back to the Workspace.

This pass produces practice evidence. The self-review label prevents it from being presented as user evidence.

Record one visible action under Observable behavior.
Record one pause or sign of uncertainty under Hesitation.
Record one sentence you said exactly under Direct quote.

Before you review the notes, which moment do you expect to contain the clearest sign of uncertainty?

Review the Observable behavior section for at least one action you could see.
Review the Hesitation section for at least one pause or sign of uncertainty.
Review the Direct quote section for at least one sentence recorded word for word.
Remove any names from the notes.
Remove any personal financial information from the notes.
Confirm that self-review appears at the top if you used the solo path.

Your notes should now contain an observable behavior plus a hesitation. They should also contain a direct quote with no identifying details.

That is a meaningful product milestone. You now have behavior-based evidence from the reporting journey.

Your prototype has now faced a neutral usability check. Next, you will use that evidence to make the final status screen clearer.

Improve the Status Screen

Your short session of moderated usability testing produced an observable behavior plus a direct quote. That evidence points to where the reporting journey loses trust.

The current Penpot confirmation says Report received, but the case state remains unclear. You’ll use your evidence to add status plus next-step guidance without promising a real banking outcome.

In this step, get ready to:

Use the recorded evidence to choose the largest trust gap.
Improve the confirmation screen with a visible status plus next-step guidance.
Verify the prototype limits across the full public journey.

Choose the largest trust gap

Evidence-based iteration connects an interface change to something a person did or said. Your recorded behavior plus quote gives you a focused reason to change the confirmation.

Switch back to your anonymous usability notes from earlier.
Highlight the observable behavior that showed uncertainty.
Underline the direct quote that revealed what the participant expected.
Compare both pieces of evidence with your intended reporting journey.
Record one sentence naming the largest trust gap.

Why do both pieces of evidence matter?

Observed behavior shows where confidence changed. A direct quote shows what the person expected.

Together, they give you a reason for a specific interface change. This keeps your decision grounded in evidence from the check.

Clarify the confirmation

Trust signals help a person understand what the system recorded. A visible status answers the immediate question about whether the report was received.

Switch back to the Penpot Workspace from earlier.
Select Report Received in the Layers panel.
Change the existing BR-1042 text to Reference: BR-1042.
Press T to activate the Text tool.
Add Status: Received above the reference.
Launch View mode by selecting the play button.
Select Report this transaction to move to Check Report.
Select Submit report to reach Report Received.

Good work. You’ll now see Status: Received above Reference: BR-1042 on the confirmation screen.

Status text missing in View mode?

Check that the status text layer sits inside Report Received in the Layers panel. View mode only displays content placed inside a board.

Confirm that you edited Report Received instead of one of the other boards.

Help me find why my status text is missing from the Penpot prototype.

The status confirms the current state. The next-step section explains what the fictional customer can do after seeing that state.

Return to the Penpot Workspace.
Select Report Received in the Layers panel.
Press T to activate the Text tool.
Add the heading What happens next below the reference.
Add Monitor your recent activity and contact your provider through a verified channel if you see more suspicious transactions.
Launch View mode by selecting the play button.
Select Report this transaction to open the review screen.
Select Submit report to open the updated confirmation.

You’ll see the What happens next section below the reference. The guidance now gives the fictional customer a safe next step.

Add prototype limits and replay the link

A prototype disclaimer separates simulated behavior from a real banking action. The same sentence must appear on every board so the limit stays visible throughout the journey.

Return to the Penpot Workspace.
Select Review Transaction in the Layers panel.
Press T to activate the Text tool.
Add Prototype only: no report was sent and no card status changed near the bottom of the board.
Select Check Report in the Layers panel.
Add Prototype only: no report was sent and no card status changed near the bottom of the board.
Launch View mode by selecting the play button.
Select Report this transaction to move through the first two boards.

You’ll see the disclaimer on Review Transaction before selecting the button. You’ll see the same disclaimer on Check Report after selecting it.

Return to the Penpot Workspace.
Select Report Received in the Layers panel.
Press T to activate the Text tool.
Add Prototype only: no report was sent and no card status changed near the bottom of the board.

Before you replay the public link, do you expect every screen to explain the prototype’s limits clearly?

Launch View mode by selecting the play button.
Select Share prototype.
Select Copy link.
Use Google Chrome’s top-right menu to open a separate browser window.
Paste the copied public link into the address bar.
Confirm the Interactions setting remains set to don't show.
Select Report this transaction in the public prototype.
Select Submit report to reach the final screen.

What should I see?

The public journey moves from Review Transaction through Check Report to Report Received.
The final screen shows Status: Received.
The final screen shows Reference: BR-1042.
The What happens next section provides guidance through a verified channel.
Every board shows Prototype only: no report was sent and no card status changed.
The public prototype keeps its interaction cues hidden.

Public link showing older content?

Return to the Penpot Workspace.
Wait for the latest changes to finish saving.
Refresh the separate public prototype window.

Help me update an older public Penpot prototype view.

Copy the public URL from Google Chrome’s address bar into your portfolio notes or demonstration notes.

Strong finish. Your public flow now communicates the received status, the next step, and the limits of the fictional prototype.

Secret mission

Add a Card-Security Overlay

Your confirmation screen now explains the report status. In this mission, you will add a separate card-security overlay that clearly states its limits. The overlay opens above the confirmation screen and closes without extending the main reporting journey.

Clean Up Your Resources

Your Penpot Cloud project and public prototype link cost $0 on this path. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

The Banking Product Practice project, including the Suspicious Transaction Flow file.
The public prototype link for Suspicious Transaction Flow.

Keep everything running

No action is needed while you are still refining or demonstrating the prototype. Anyone with the public URL can view the shared prototype.

Keep the Banking Product Practice project available in your Penpot account.
Share the public prototype link only with people who need to view your fictional flow.

Pause - I'll come back to this later

Pausing ends your local browser session. Your Penpot project and public link stay available.

Wait until File status in the Suspicious Transaction Flow file shows that the latest changes are saved.
Close every Google Chrome window.

Your project remains in your Penpot account. The same public link continues to show the prototype.

Delete - I don't want to use this again

Deletion can feel final because it is the permanent option. The public link is disabled before the project is removed.

Return to View mode for the Suspicious Transaction Flow file.
Open Share prototype.
Select Destroy link to disable the public URL.
Return to the Penpot Dashboard.
Right-click the Banking Product Practice project.
Select Delete.
Confirm the deletion.
Permanently remove Banking Product Practice from the Trash area if you do not want a recovery copy.

Refresh the public prototype link in the separate browser window from earlier.

You should no longer see the shared prototype. You have closed its public access point.

Nice Work!

You did it! You built a clickable fictional banking transaction-report flow in Penpot. The final prototype uses usability evidence to make a high-stakes confirmation clearer.

You've learned how to:

Turn a deliberate dead end into a clickable reporting journey. Move a customer from transaction review to submission. Finish with a clear confirmation.
Run a short moderated usability test with fictional banking data. Capture an observable behavior. Record a hesitation. Preserve a direct quote without personal information.
Use testing evidence to improve the final status confirmation. Show Status: Received. Show Reference: BR-1042. Explain the next step. State the prototype's limits on every board. Demonstrate the result through a public prototype link.
Secret Mission: Add a centered Card Security overlay with a darkened background. Explain that the prototype cannot lock a real card. Dismiss the overlay with its Close control.

Ready to quiz yourself?