A first build for your website

Build one
useful change.

You don’t need to rebuild your whole website to try Aware Design. Start with one visitor question and one response you can explain.

This guide shows how to change the order of information on a fictional photography-workshop page. It is one small pattern—not the whole Aware Design approach.

Inspect the working rule

You are the designer here

Follow one choice
from input to result.

Imagine you are building a photography-workshop website. Below, you can inspect what it would do with a visitor’s stated question. The visitor is fictional; your role is to understand the design.

The interactive controls are unavailable. This is the complete no-answer view. Open “See all four rules” below to compare the other possible orders.

No answer → normal overview. No visitor preference has been inferred.

1 · Input

What the website knows

No preference is available.

Only the answer selected here. No identity, browsing history or hidden signal is used.

2 · Decision

What the rule does

Use the normal overview order.

No answer is not a reason to guess. Start with the introduction and keep every detail available.

3 · Result

What the page shows

Content from a fictional photography workshop, in this order. These are information blocks—not booking controls.

  1. The idea

    Learn to see the light.

    Practice framing, natural light and portraits. Spend the day taking photos, not learning a menu of camera settings.

  2. Who it is for

    Beginners are welcome.

    Bring a phone or a camera. No specialist equipment or previous course needed.

  3. Time and cost

    One day. $120.

    10am–3pm, with a small group and a guided outdoor practice session. Lunch is not included.

  4. Availability

    Saturday, 7 November.

    Six places available in this fictional example. You would choose a date before entering payment details.

The rule changes order, not facts. The same four information blocks remain. The sample price, date and availability are fictional; nothing can be booked here.

See all four rules, including the default
No answer or an unfamiliar value
Use the normal overview order. No answer is not a reason to guess. Start with the introduction and keep every detail available.
What will I learn?
Put the introduction and who it is for first. Those details answer the stated question. The cost and date remain on the same page.
Is it worth the time and cost?
Put time and cost first, then who it is for. Bring the practical answer forward without changing the price or removing the introduction.
When can I attend?
Put the date first, followed by time and cost. The answer is about availability—not evidence that someone has agreed to book or pay.
See the equivalent decision rule in JavaScript

These IDs name information blocks, not separate pages: learn, fit, cost and date. The three known answers are explore, compare and act.

function contentOrder(answer) {
  switch (answer) {
    case 'explore': return ["learn","fit","cost","date"];
    case 'compare': return ["cost","fit","learn","date"];
    case 'act': return ["date","cost","fit","learn"];
    default: return ["learn","fit","cost","date"];
  }
}

This function only returns an order. It is not a complete website component, an AI model, or proof that this order helps real visitors. You still need the complete base page, accessible controls and a useful test.

From this example to your first build

Build the ordinary page first.
Then add the change.

These steps are for the workshop pattern above. Use the same discipline on your own site, but choose a real visitor task rather than copying the example’s questions blindly.

  1. Write one complete version.

    Include the introduction, who it is for, time and cost, and availability. Put them in a sensible default order. Someone who ignores the choice must still have a useful page.

    Before moving on: can someone answer the basic questions without anything adapting?

  2. Ask a question that earns its place.

    Offer a small, optional choice whose answers lead to useful differences. Explain what choosing will change. If every answer leads to the same result, the question is probably unnecessary.

    In this example: the visitor chooses which workshop question they want answered first. No identity is required.

  3. Change one thing and explain why.

    Move the relevant information earlier. Keep the same facts and every information block. Let the person choose again or return to the default, without losing keyboard focus or their place.

    In this example: “Time-and-cost question → cost first” is visible beside the controls.

  4. Check whether it actually helps.

    Give someone a real task on the ordinary page and on the changed version. Watch whether they can find the answer, understand the change, and change their mind without coaching.

    Keep it only if: the task becomes easier without creating confusion or extra work. A moving page is not evidence on its own.

Design the boundaries too

The default is part of the design.
So is the privacy decision.

If the choice cannot be used

No answer—or an answer the rule does not recognize
Show the complete normal overview. Do not turn missing information into a guessed preference.
The page’s interactive code does not run
Keep useful content in the HTML—the page markup a browser displays. Do not leave a blank result or controls that look usable but do nothing.
The visitor changes their mind
Apply the new choice, or restore the default. Keep all information reachable and focus on the control they used.

For this first version, keep it local

The inspector uses only the selected answer, in this open page. It does not save the choice, identify a person, send the answer to a service, or call an AI model.

For your implementation: decide explicitly whether anything needs to leave the page. If you later add analytics, remembered preferences or a handoff to another person, explain the purpose and destination and provide the appropriate choice before collecting or sharing.

Do not treat “use this answer now” as “remember me next time.” Those are different decisions.

Before you call the small build ready

Try the awkward cases,
not just the easy ones.

This is a practical check of this pattern—not a certification or a substitute for watching real people use your site.

  • Start without choosing.Can the visitor still find every essential answer?
  • Try every answer, then reset.Does the rule match the visible result, with the same facts in every version?
  • Use only the keyboard.Can the person reach, understand and change the choice without focus jumping into the content?
  • Use a narrow phone screen.Can they see what their choice changed without clipped text or sideways scrolling?
  • Block the script and try an unknown value.Both should lead to the useful default—not an invented visitor profile.
  • Ask someone to explain it.Can they say what changed and why, and show how to choose something else?

A useful next step for your team

Take a small brief into the build.

Here is the brief for this fictional example. Replace the visitor task and content with your own; keep the boundaries specific.

Visitor task
Decide whether a photography workshop fits their needs.
Input we will use
One optional, explicit answer: learning, time/cost or availability.
Response
Reorder the same four information blocks. Never change the price or hide an answer.
Default and reset
Complete overview: introduction, fit, time/cost, date.
Data boundary
Use the answer only in the open page. No saved preference, tracking or model call.
Evidence to look for
A person completes the chosen task and understands the change without coaching. Remove the adaptation if the ordinary page works better.
Talk through a first buildBring one visitor task and the smallest change you want to test.Check whether a simpler fix is enoughCompare problems and alternatives before choosing a technique.Read the broader design principlesThe reference behind the approach, beyond this small rule.