THE DESIGN LAB / 4 CONCEPTUAL EXAMPLES

Small changes.
Better questions.

Look closely at the decisions behind a clearer experience. Compare a starting point with an alternative, then decide what you would test.

Original fictional practice examples—not client work, user-research findings or measured conversion improvements. The screens below are illustrations, not functioning checkout or signup forms.
01 / ONBOARDING

A first step worth taking

The task: Create the first project in a new workspace.

BEFORE / STARTING POINT
CONCEPT SCREEN

Welcome to Orbit

Set up your profile, invite your team, connect your tools and customize your workspace.

Company size ▾
Phone number
Invite five teammates
Continue
AFTER / DESIGN HYPOTHESIS
CONCEPT SCREEN

Create your first project

Start with one project. Invite your team when you are ready.

Project name
Website refresh
Step 1 of 2 · You can change this later.
Create project
01

One immediate job

Bring the core task forward. Ask for other information when it supports a specific step.

02

Visible commitment

The action explains what will be created. This version assumes a name is all the system needs.

03

A recoverable first move

Make editing possible so getting started does not feel permanent.

The tradeoff

Deferring team invitations can delay collaboration. Offer a contextual invitation after the project exists.

What to test

Ask a first-time participant to create a project. Observe hesitation, assistance and whether they understand what comes next.

02 / CHECKOUT

Let the total tell the truth

The task: Understand the full cost before placing an order.

BEFORE / STARTING POINT
CONCEPT SCREEN

Your bag

Studio notebook · $24.00

Subtotal$24.00

Shipping calculated later.

Create an account to continue
Continue
AFTER / DESIGN HYPOTHESIS
CONCEPT SCREEN

Review your order

Studio notebook · Quantity 1

Item$24.00
Shipping$5.00
Estimated tax$1.74
Total$30.74
Illustrative order · Guest checkout available
Place order · $30.74
01

Expose the commitment

Show the total and explain estimates before the final purchase action.

02

Remove an unnecessary gate

Offer guest checkout where the service can support it. Explain optional account benefits later.

03

Match the action to the outcome

The final action states that it places an order and names the amount.

The tradeoff

Tax and shipping require enough location data to calculate. Show an estimate honestly and confirm the final total before payment.

What to test

Ask participants what they expect to pay, whether the next action charges them, and how they would change the order.

03 / FORMS

Make an error a next step

The task: Correct an email address without losing the rest of a request.

BEFORE / STARTING POINT
CONCEPT SCREEN

Send your request

Something went wrong.

Email
Message
Invalid input.
Submit
AFTER / DESIGN HYPOTHESIS
CONCEPT SCREEN

Check your email address

Your message is still here. Fix one field to send your request.

Email address
alex@example
Add a complete domain, such as alex@example.com.
Message
I would like help reviewing our signup flow.
Send request
01

Locate the problem

Identify the field and provide a useful correction. An error should not depend on red color alone.

02

Keep valid work

Preserve the message so recovery does not require starting again.

03

Complete the interaction

In implementation, associate the error with its field, manage focus and announce feedback appropriately.

The tradeoff

A format check cannot establish that an address belongs to a person. Do not present syntax validation as identity verification.

What to test

Try an invalid email, correct it with the keyboard and a screen reader, then confirm that the message survives and success is clear.

04 / DASHBOARD

Give an empty screen a purpose

The task: Understand how to start when a workspace has no projects.

BEFORE / STARTING POINT
CONCEPT SCREEN

Dashboard

No data available.

0   0   0
Nothing to show
Refresh
AFTER / DESIGN HYPOTHESIS
CONCEPT SCREEN

Your projects start here

Create a project to organize tasks, people and decisions.

✳
No projects yet. That is a perfectly good place to start.
Need inspiration? Preview a clearly labeled sample project.
Create first project
01

Explain the state

Tell the person why there is nothing here. Distinguish a new account from a loading failure.

02

Give a relevant action

Create the missing object rather than refreshing a state that cannot change on its own.

03

Teach without fabricating

Use optional sample content, labeled as sample, to show the value without pretending real work exists.

The tradeoff

A new project may require permission. People without access need an explanation and a way to request it instead of an unusable create action.

What to test

Check whether a new user can explain the screen and start the task. Also test no-permission, loading and failed-request variants.

Implementation reference: W3C WAI guidance on form feedback. These examples are not a conformance audit.

Learn how to test a before-and-after hypothesis ↗