Chapter 4 · Web and Media Design
4-4 The Iterative Improvement Process for Websites
A website is never truly finished. The first version is only a best guess, and a team learns what really works only after real people use it. That is why good teams improve in loops: they plan a change, make it, measure the result, and act on what they learn. Small, repeated improvements beat waiting for one perfect launch.
Guiding question
Why is improving a website a repeated loop rather than a one-time job, and how do teams decide what to change?
Learning outcome. Explain the PDCA cycle and the steps of design thinking as ways of improving a website, and describe how A/B testing compares two options using real data — and why improvement is repeated in cycles.
With a partner. Think of something you both got better at — a game, a sport, a subject. Did you get good in one go, or by trying, seeing what happened, and adjusting? Websites are improved the same way, and this lesson gives that habit a name.
The PDCA cycle
PDCA cycle … a method that continuously advances improvement by repeating four steps. It is used widely in fields such as business improvement and quality management, not just websites.
| Step | Description | Example in website improvement |
|---|---|---|
| Plan | Set goals and create a plan for improvement | Set the goal “reduce bounce rate by 10%” and plan a redesign of the homepage. |
| Do | Execute according to the plan | Change the design of the homepage. |
| Check | Measure results and evaluate the level of goal achievement | Measure the bounce rate after the change and evaluate whether the 10% goal was achieved. |
| Act | Based on the evaluation, consider the next improvement measures | If the effect is sufficient, continue; if not, consider next steps such as revising headings or image placement. |
It is a loop, not a list.
The important point of the PDCA cycle is not to aim for completion in one round, but to gradually improve through repetition. A team that treats PDCA as four boxes to tick once has missed the whole method.
Press the button to start at Plan. Keep pressing — the cycle does not stop at Act, it goes round again. That is the whole idea.
Design thinking
Design thinking … a way of thinking that leads to discovering problems and generating solutions from the perspective of the user. It proceeds through five steps.
| Step | Description |
|---|---|
| ① Empathize | Put yourself in the user’s position and understand their challenges and needs |
| ② Define | Based on the information gleaned from empathy, clarify the problem to be solved |
| ③ Ideate | Generate many ideas to solve the problem |
| ④ Prototype | Quickly create a prototype based on the ideas |
| ⑤ Test | Have users try the prototype and obtain feedback from them |
It is not one-way either. Based on test results, one may go back to the empathize or define stage. Improvement proceeds back and forth, not in a straight line — the same loop-shaped idea as PDCA, applied to finding the problem rather than fixing it.
A fair objection to the whole idea: why go round a loop repeatedly instead of thinking carefully and building it right the first time? Looping sounds like an excuse for not planning. It is not, and the reason is worth having.
🧮 Two ways to spend the same three months
- 1
Plan A: spend three months building the whole redesigned site, then launch it.
Why this step: This is the instinct, and for some work it is right — a bridge is not launched in stages. It is worth taking seriously rather than dismissing.
- 2
Ask what you learn during those three months. Nothing, until the end.
Why this step: Here is the cost, and it is easy to miss. No real user sees anything until launch day, so every decision made in month one rests on assumptions that stay untested for twelve weeks.
- 3
Count what is at risk: if a decision made in week 1 was wrong, everything built on top of it is also wrong.
Why this step: Mistakes compound. A wrong assumption about how people navigate the site shapes every page built afterwards, so the cost of that one error grows every week it stays undiscovered.
Most people slip here: The dangerous errors are not the ones you know you are guessing about. They are the assumptions so obvious nobody wrote them down as assumptions.
- 4
Plan B: change one thing, release it, measure it, and use what you learn to choose the next change. Repeat.
Why this step: This is the loop from Point! 1. The point is not that it is faster — it is that you are never more than one cycle away from finding out you were wrong, so an error can only ever ruin one cycle’s work.
- 5
And notice why one change at a time matters: change three things and the numbers move — which one did it?
Why this step: This is exactly the reasoning behind A/B testing in the next section, and behind the explanatory variable in lesson 6-2. If two things change together you cannot tell which caused the effect. Isolating one change is what makes the measurement mean anything.
Where the comparison breaks down: A cook tastes instantly; a website change may take weeks to gather enough data to judge, which is precisely the trap in lesson 4-3 — stopping an A/B test the first day it looks good is tasting before it has cooked.
It is now standard for large sites to release changes to a small fraction of visitors first, measure, and expand only if the numbers hold. That is this lesson’s loop and lesson 4-3’s A/B testing used together — and it is the practical reason the book treats improvement as a cycle rather than a project with an end.
A pattern common enough to have shaped how large sites now ship changes.
A/B testing
A/B testing … a method in which two patterns (option A and option B) are prepared, each is shown to actual users, and data is examined to determine which is more effective.
e.g., compare option A with a red purchase button and option B with a blue purchase button to see which gets clicked more.
① Change only one element at a time
If multiple elements are changed, it is unclear which change produced the effect.
② Enough data before deciding
Make decisions only after collecting a sufficient amount of data.
Option B differs from option A in whichever elements you switch on. Clicks go up either way — the question is whether you learn anything from it.
Option B got more clicks than option A.
One element changed — so you know why. The only difference was the button colour, so that is what produced the effect. This test taught you something you can keep.
The second rule matters too: make decisions only after collecting a sufficient amount of data. Three clicks more is not a result.
How the real paper is built
The ministry sets half multiple choice and half written answer in every subject. The two halves are not the same skill. In the multiple-choice half you have to spot the wrong options quickly — and the wrong options are built out of the mistakes students really make. In the written half nobody gives you the answer to recognise; you have to produce it, in your own words, with a reason.
Practise both. Being good at one half and weak at the other costs you exactly half the paper.
- PDCA cycle
- — Plan → Do → Check → Act, repeated.
- continuous improvement
- — getting better a little at a time.
- design thinking
- — solve from the user’s view in five steps.
- prototype
- — a quick, testable draft.
- A/B testing
- — compare two options with real data.
- iterate
- — repeat the loop to improve.
Worked Example
(1) Mark each statement with ○ if it is true or × if it is false.
A The PDCA cycle is a method that repeats the four steps Plan → Do → Check → Act.
B Design thinking is a way of thinking that solves problems from the developer’s perspective.
C In A/B testing, it is important to change only one element at a time.
D The PDCA cycle is a method that is complete after one execution.
(2) Match each action (a–e) with its design-thinking step: A Empathize, B Define, C Ideate, D Prototype, E Test.
a Understand the user’s challenges and needs · b Clarify the problem to be solved · c Generate many ideas · d Quickly create a prototype · e Have users try the prototype
1 · Answer the following questions.
2(1) · Which corresponds to “Check” in the PDCA cycle?
Mark ○ for the one that is Check, and × for each one that is a different step.
Set the goal of reducing the bounce rate by 10%.
Change the design of the homepage.
Measure the bounce rate after the change.
Consider another improvement measure.
2(2) · Which is NOT an appropriate way of conducting A/B testing?
Mark ○ for each one that IS appropriate, and × for the one that is not.
Prepare two patterns and compare them.
Change multiple elements at the same time.
Make decisions only after collecting a sufficient amount of data.
Show each pattern to actual users.
Think as an Engineer — Investigate & Decide
Your school club runs a web page for its yearly event, but few students sign up through it. You lead one round of improvement using the PDCA cycle.
1 · Collect data (Check first).
Decide one number you could measure now — for example, how many of ten classmates find the “sign up” link within five seconds. Record the result as your starting point.2 · Plan one change.
From the users you watched, name the single biggest obstacle (for a specific group, such as a student opening the page on a small phone screen) and plan one change to fix it. State the goal as a number (e.g., “8 of 10 find it in five seconds”).3 · Do, Check, Act — and decide.
Describe how you would make the change, measure again, and decide the next step. Choose one element to settle with an A/B test, and say why you change only that one. In pairs, compare plans and agree on the single change to try first.
Notice that step 1 is Check, not Plan. You cannot tell whether a change worked without knowing what the number was before. Teams that skip the starting measurement can redesign for months and never prove they improved anything.
In a New Context
Lesson Question — Answered
A first version is only a guess, so teams improve continuously rather than once. The PDCA cycle repeats four steps — Plan (set a goal and plan a change), Do (make it), Check (measure the result) and Act (decide the next step) — and its point is not completion in one round but gradual improvement through repetition.
To decide what to change, design thinking works from the user’s side through five steps — Empathize, Define, Ideate, Prototype, Test — moving back and forth rather than one-way, while A/B testing compares two options with real data, changing only one element at a time and deciding only after enough data. Together they make improvement small, measured and repeatable.
1 · Quiz yourself first.
Cover the Point! sections and say the four PDCA steps with what each one does, the five design-thinking steps in order, and the two key points of A/B testing.
2 · Read the passage and fill in the blanks.
As a method for improving websites, there is the ( a ) cycle. It repeats four steps: ( b ), in which goals are set; ( c ), in which the plan is executed; ( d ), in which results are measured; and ( e ), in which improvement measures are considered. Also, ( f ), in which two patterns are prepared and compared with data to see which is more effective, is a useful method.
3(1) · Which most appropriately describes design thinking?
Mark each statement with ○ if it is true or × if it is false.
A method that uses numerical data to analyse website usage.
A way of thinking that leads to discovering problems and generating solutions from the perspective of the user.
A method in which experts identify UI problems based on rules of thumb.
A method of creating a blueprint that roughly shows the layout of a web page.
Every wrong option here is a real term from this chapter. Web analytics, heuristic evaluation and wireframes are all correct definitions — of something else. By the end of a chapter the distractors stop being nonsense and start being your other lessons.
3(2) · Which most appropriately describes the concept of the website improvement process?
Mark each statement with ○ if it is true or × if it is false.
If a perfect website is built initially, no improvement is needed.
It is enough to improve only the visual design.
It is important to gradually improve by repeating evaluation and improvement.
All improvements should be done with A/B testing alone.
Reflect: Think of a website you use often. Which one small change do you think would help most, and how would you measure whether it worked?
Challenge: You may run only one A/B test this month on the event page. Choose the single element to test, predict which option will win and why, and say what number would prove you right or wrong.
Sign In to Keep Going
You've reached the end of the free preview. Sign in — and upgrade to Plus or Pro — to keep going with Programming and Artificial Intelligence.
Full Access
Unlock all 30 lessons