Information Design and User Experience

Why this matters

A page that makes perfect sense to the person who built it can still lose its visitors, because the builder knows where everything is and the visitor does not. Every technique here exists to pull the designer out of their own head.

The idea

A persona is a typical user written down as one concrete person: age, job, what they came for, what gets in their way. For example, someone in their thirties, office worker, comparing products on a phone during a commute, with very little time. Naming that person stops the design drifting, because "what does this user need" has an answer, while "what do users need" does not.

A wireframe is a layout blueprint with no colour, fonts or decoration, made to settle what information goes where and what matters most. Doing this before styling is not just tidiness. If colours come first, discussion slides into personal taste about appearance, which nobody can settle; agreeing placement and priority first is what makes agreement possible at all.

Then four principles, often shortened to CRAP:

All four sit inside user-centered design: designing from the user's perspective rather than the creator's convenience, starting from what the user needs and the situation they are in. A persona is one concrete way of practising it, and its goals are usability and accessibility.

Picture it

flowchart TD
  P["Persona: who is this for?"] --> W["Wireframe: what goes where, what matters most"]
  W --> D["Visual design: contrast, repetition, alignment, proximity"]
  D --> U[Usable, accessible page]
  U -.->|test with real users| P

Worked example

A product listing looks cluttered. Each entry has an image, a name, a price and a button, and the page is hard to scan. Which principle is missing?

Check proximity first. If the gap between an image and its own price is the same as the gap to the next product, the eye cannot tell where one product ends. Adding margin between groups while tightening space within them fixes the page without changing a single word or colour.

Contrast is the next suspect: if the name, price and button are all the same weight, nothing tells you what to read first. Make the price prominent and give the button an accent colour, and the entry gains an order.

Alignment catches the residual mess, left edges agreeing down the column. And repetition is what stops the next page feeling like a different site.

Notice none of this required a new idea about what to sell. That is the point of fixing the wireframe before the styling: these are layout problems, and they are cheapest to find before anyone has chosen a colour.

Your turn

Try the practice questions for this lesson. Judge statements about personas and wireframes, match each description to the design principle it names, and identify what user-centered design actually prioritises.

Take it further

A community clinic needs a website showing opening hours, services and directions. Should the design start from colours, or from the user?

1. Collect data. Ask eight to ten classmates: if you opened a clinic's website, what is the one thing you would look for first? Record the answers as a tally.
2. Analyse your users. Group the answers into user types. Include at least one who is not a typical smartphone visitor, such as an elderly patient with low vision, or someone on a library computer. Write what each type needs most.
3. Decide. Using your tally, set the priority order of the information, sketch a wireframe for it, and say which principle each layout choice uses.

If your tally and your own instinct disagree, the tally is the data and your instinct is a guess.

Recap

• A persona makes the user concrete; a wireframe fixes layout before any styling.
• Deciding placement before colour is what lets a team agree at all.
• Contrast, repetition, alignment, proximity make a page readable at a glance.
• User-centered design starts from the user, not the creator, and aims at usability and accessibility.