Lean Website Production: A Faster, Lower-Waste Workflow
Lean website production means delivering the pages a client actually needs, in small finished pieces, with as little waiting, rework and unused work as possible. For a web team that comes down to five habits: scope by outcome, build from a shared design system, limit work in progress, catch defects early with automation, and use AI where it saves time without lowering quality.
Lean comes from manufacturing, specifically the Toyota Production System. Its ideas map onto web projects better than you might expect, because a website project is also a flow of work that passes through people. Most of the delay is not in the work itself but in the gaps between steps.
What lean means for a web team
The Lean Enterprise Institute summarizes lean thinking in five principles: define value from the customer’s point of view, map the value stream, make the steps flow, let the customer pull work, and keep improving until waste is gone (lean.org). Here is how each one translates to a site build.
| Lean principle | In website production |
|---|---|
| Define value | Write the outcome (“book a demo”, “buy a plan”) before any page list |
| Map the value stream | List every step from brief to launch and mark where work sits idle |
| Flow | Ship small vertical slices (one page type, fully done) instead of every page half done |
| Pull | Start a task only when the next stage has capacity for it |
| Perfection | Review the process after each launch and change one thing |
Cut the waste that studios actually have
Lean practitioners classify waste into categories such as overproduction, waiting, defects and unnecessary motion. Each has a recognizable form in web work.
- Overproduction: designing 12 page variations when the brief needs four, or building a custom CMS feature nobody asked for.
- Waiting: a layout is finished but the copy, photography or sign-off is not. This is the most common and most expensive delay.
- Defects and rework: a component is built three slightly different ways, and every fix has to be made three times.
- Handoff friction: design files that do not match the build, because the build uses different spacing and colors than the mockup.
- Wrong order of work: wireframes before goals, or copy before the page structure is agreed.
The fix for most of these is the same: agree the inputs first, and do not let the next stage start without them. A one-page “ready to design” checklist (goal, audience, page list, real copy or a copy owner, brand assets) removes more delay than any tool does.
Scope by outcome, then by page
Start the project with one sentence per page: who it is for, and what they should do next. If a page cannot be described that way, it is a candidate for removal. This keeps the page count honest and gives you a clear definition of done.
Then split the work into slices a visitor could use on their own. “Services page, including its form, mobile layout and copy” is a slice. “All the headers” is not. Slices let you launch early, get real feedback, and avoid a big-bang review at the end where every problem lands at once.
Build once with a design system
The biggest source of rework is rebuilding the same button, card or form field on every page. A small design system fixes this. You do not need a large library: a set of tokens plus 10 to 15 components covers most marketing sites.
Design tokens are named values for color, spacing, type and radius. The Design Tokens Community Group has published a stable, vendor-neutral JSON format for them (designtokens.org), so the same values can feed your design tool and your code. On the web, CSS custom properties are the delivery format:
:root {
--color-brand: #3355cc;
--radius-control: 8px;
--space-3: 0.75rem;
}
.btn {
background: var(--color-brand);
border-radius: var(--radius-control);
padding: var(--space-3) 1.125rem;
}
@media (prefers-color-scheme: dark) {
:root { --color-brand: #8fa6ff; }
}
This is poka-yoke, the lean idea of mistake-proofing, applied to a stylesheet. When a designer or developer can only pick from approved values, off-brand colors and inconsistent spacing become hard to produce. If you want to get more out of your styles, our guide to 20 pro CSS tips and the walkthrough on CSS flexbox cover layout fundamentals that components lean on.
Limit work in progress and make flow visible
A board with columns for each stage of your process, and a hard limit on how many items each column may hold, is the simplest pull system there is. When a column is full, you do not start more work upstream. You help clear the blockage instead.
In the example above, review is overloaded and one item is blocked by missing copy. A lean team swaps from starting new design work to chasing the copy and clearing review. That is the lean idea of managing the constraint: find the stage that limits output and focus effort there, rather than speeding up the stages around it.
Any tool works, including a physical wall. The rules matter more than the software: visible stages, explicit limits, and a standing question of “what is blocked, and who can unblock it?”
Catch defects before the client does
Lean says to build quality into each step rather than inspect it at the end. For websites, that means automating the checks that are the same on every project:
- Performance: track the Core Web Vitals. At the 75th percentile of page loads, “good” means Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint within 200 milliseconds and Cumulative Layout Shift of 0.1 or less (web.dev).
- Accessibility: run an automated checker in your build or pull request, then spot-check keyboard navigation and focus order by hand. Automation finds only part of the problems, so treat it as a first filter.
- Links and images: check for broken links and missing alt text on every deploy.
- Preview environments: give each change a shareable preview URL, so a client reviews the actual page rather than a screenshot.
Speed problems are a classic example of a defect that is cheaper to prevent than fix. Our guide on speeding up a slow WordPress site shows what to look for if you inherit one.
Use AI to remove busywork, not judgment
AI assistants are good at the tasks that cause waiting and rework: drafting first-pass page copy for a human to edit, generating alt text suggestions, turning a rough brief into a page checklist, producing component boilerplate, and writing test cases. They are poor at deciding what a business needs, so keep goals, structure and final copy approval with people.
Two rules keep AI in line with lean thinking. First, review everything it produces against your design system and checklist, because unreviewed output is a source of defects. Second, use it to shorten a specific delay you have measured on your board. If the bottleneck is copy, draft assistance helps. If the bottleneck is client sign-off, it will not.
Standardize the shared tools and routines
The original lean “5S” method is about keeping a workspace sorted, organized and standardized. A digital version is a tidy project template:
- Sort: archive old files, unused plugins and dead branches.
- Set in order: one agreed folder structure, naming scheme and component library.
- Shine: update dependencies and fix small issues on a schedule instead of letting them pile up.
- Standardize: a starter repository or site template with your tokens, checks and deploy setup already in place.
- Sustain: hold a short review after each launch and write down one change to make next time.
Choosing a lean toolset is part of this. If you freelance or run a small studio, our list of 25 free freelance tools is a good place to find project, invoicing and design tools that do not need a budget. Once your components are in place, a pattern like the responsive navigation menu is a good first one to standardize.
A lean checklist for your next project
- Write the outcome for each page in one sentence and remove pages without one.
- Do not start design until goals, page list and copy owners are agreed.
- Define tokens and core components before building page-specific styles.
- Deliver in slices that could go live independently.
- Limit work in progress per stage and review the board daily.
- Automate performance, accessibility and link checks.
- After launch, hold a short retrospective and change one thing.
None of this requires a Toyota-sized operation. Pick the stage where work waits longest, fix that first, and repeat. Lean is a habit of finding the next constraint, not a one-time process change.
The topic of lean thinking is a very interesting one. Applicable in all kinds of business throughout the world and also in web design and development. This post is OK, although the views presented here are not comprehensive.
For further study of this concept I would recommend reading this book:
“Lean Thinking: banish waste and create wealth in your corporation” by Womack & Jones (various editions, buy a recent one ;-) ).
It is a well-known, very practice-oriented book. It contains some great examples that illustrate each part of the lean thinking concept. Some of these examples might serve as great inspiration for your own business.
Good article anyway…
great article!
I often find myself trying to optimize “web production”.
Since I have no background on management, I’ve been reading several articles on project management, agile methods and such so I can improve all the stages of website production. This article have some nice ideas for work optimization. I don’t advocate any particular methodology but learning from several of them.
I’m not totally convinced by this idea. If I were producing the same website time after time, I would be able to apply the principles. But it’s the resource of the client that dictates the “production line” – and you have to make sure your process is flexible enough to accomodate them, or you’ll be turning away perfectly good contracts.
Bookmarked the post, definitely needs a further reading.
intersting topic..i like it>>
and the Poka Yoke…..it’s new
thanx
Interesting application of lean. I went through training at a warehouse, corporate setting, but I’ve never directly applied it to my web work. Once people were on board, and this was the hard part, it produced some good results.
Interesting outlook for web development and programming methodologies.
Interesting to see that regular BPM / Lean is going to transform over in to web design, I would like to see the first “real” mapping of this to a real case with the benefits achieved in a creative web project.
Really enjoyed the post.
Would be cool to see a second part where Lean has been applied in the webdesign business, maybe amongst the followers of the blog. Just a thought.
Lean manufacturing techniques are a genius idea to cut production time in half. By putting half the hours, a third of the hours of engineering effort, half the factory space, resulting in half of the defects and a tenth or less of in process inventories, it will benefit the web design industry by allowing the client t get “a first class website as soon as possible at a competitive price.” While I think this post is good topic and a productive outlook, I feel like the views are not presented thoroughly to the readers.
I’m a information architect and wireframe guru and I can say we have produced websites very quickly by using IA and wireframes and including development on each review. Once we have firmed up aspects of a website, we release that to dev, then we also use the wireframe specs to QA. Awesome article!
Hey there! I’m at work browsing your blog from my new iphone 4! Just wanted to say I love reading your blog and look forward to all your posts! Keep up the outstanding work!
After having a website created, it’s important to do the proper steps for search engine optimization. Without doing marketing for a website, it would be pretty much useless unless you have some form of marketing to drive the traffic there.
We do Direct Marketing, which is a direct unique visitor that would be searching for your specific product or service. These type of leads are much more beneficial than indirect flyers or emailing.
Reducing work time for website designers is really helpful. Now they won’t get caught up with so many hours on a chair in front of their PC. With fast turnover of their work I believe they can also have brighter opportunity to earn more. Is there also a way for you to make a tutorial for easy website making? Hope you can have it on your next blog post.
WMS
This is a bit ridiculous, considering the client is so crucial to the equation in design. When you are building a boat, a retailer handles ‘clients’ – they are called customers. In design, the client is usually in your face, all of the time.
Imagine having a boat customer needing to approve each decision the boat builders are making. You could never achieve those levels of efficiency. That is the world of web design more often than not.
I believe Lean as discussed in this article has merit in the design arena. For instance, having well-planned, efficient processes in how you educate clients, extract info from them, and how you bring about, implement and manage steps in design and collaboration, can all help save time and money, and get the clients the ultimate results.
Good article, however, process improvement in the manufacturing sense doesn’t apply to the creative process of innovating on NEW work.
Boat manufacturing can be improved so long as the boat design never varies. What if the boat design had to change with each unit produced?
imho, designers are better served to develop agile/iterative design habits and learn to structure facilitated client meetings.
3M is famous for having toyed with this idea and found it removed all of the creativity from their scientific teams who were used to dabbling with products in order to make them better. One of these ideas was the creation of their sticky-notes.
The most famous version of this lean philosophy is Lean Six Sigma which also has some heavyweight criticism:”A Fortune article stated that “of 58 large companies that have announced Six Sigma programs, 91 percent have trailed the S&P 500 since”
It’s an interesting article, but I don’t think taking all of the creativity out of web design and development is the way to a better product. I believe that web design and development needs to have some chaos and inefficiencies to create an original product.
K
To me your example of ‘lean’ just means normal project management. Research and plan out the project in true and tried phases.
I have been looking at a lot of management techniques for processes. So far the most successful one I have applied was the KJ method for solving problems.
We used this to asses the requirements of a web project. The biggest part of it was giving everyone the opportunity to voice the opinion in a concise manner and then to manage the priorities of it.
The Lean concept doesn’t, to me, seem like anything at all, other than common sense. Using the example in the case study, I don’t know what the reason behind the fault that caused the damaged hulls, and what problem solving skills were employed to resolve it and generate such a massive improvement in performance of the chain.
I think perhaps with a fully fleshed out example it would be easier to see how these manufacturing processes can be applied to web design.
Interesting article but I’m not sure the connection with website development is all that clear. Organsing workstations so rigidly for example doesn’t really seem like such a brilliant idea. Perhaps this is more suited to production line type websites that are heavily templated.
very good. I like the way you present your content.
Bookmarked the post, definitely needs a further reading.
There are some useful points in here, but 95% of it is corporate enrichment nonsense. For example, ‘Apply DOCTOR/NURSE principle to bottlenecks’ – no doubt if I Google this unexplained powerphrase I will just drill down to the next semantic level of useless jargon.
I’m not a person averse to new ways of working, but I don’t believe that being able to construct fancy phrases and concepts can lead to 80% efficiency improvements; and are you seriously telling me that by ‘widening our pipe’ and putting bits of coloured tape on our tools we can sell off a quarter of our office space? It’s just another sector for management coaches to poke their nose into and justify their existence.
Re Comment #47: Tom, Thanks for the opportunity to expand on the doctor/nurse principle. It deserves fuller explanation because it can be a critical element to expanding process productivity. Let’s start by looking at a process as a ‘pipe’ with a variable diameter, the diameter at any one point along the pipe representing the capacity to add value at that point. The area with the smallest diameter will act as a bottleneck for the entire pipe. That is, no matter how much (material, information, etc.) goes into the process pipe, what comes out the other end (downstream / client deliverable) will be restricted to how much can get through the smallest diameter within the pipe. This is the bottleneck. Here’s why it is of critical importance. Let’s say you run a highly successful business with sales of $12,000,000 per year, assuming for the sake of demonstration that all of your ‘product’ is processed through the same steps. If your company operates one shift, it will be in operation about 2000 hours per year. Your billing capacity therefore will be $12,000,000 divided by 2000 hours, or $6,000 per hour ($100 per minute). No matter how hard or how efficiently work is done anywhere else in the process, you can’t get any more through than what the bottleneck can handle.
From a Lean point of view, the worker (or machine) at the bottleneck is like the heart surgeon in your company. Everything depends on what he/she/it can produce. In an operating room when a heart surgeon operates on a patient, he cuts through the epidermal layers, opens the rib cage and is ready to cut into the heart. At this point he doesn’t go back to his locker to get a scalpel; he calls for it and a nurse places it in his hand.
A similar thing can happen at your bottleneck. When the worker there (your company’s heart surgeon) needs something (a tool, jig, die, pattern, etc.) if he stops what he’s doing to get what he needs, you lose $100 a minute. However, if some other worker is available to hand him what he needs when he needs it, the bottleneck opening is maximized. This is the doctor/nurse principle.
How does it work in reality? One of my clients, a wooden truss maker, had a bottleneck at the assembly table. When you assemble a truss, you place a number of carefully cut pieces of lumber in a pattern and join them with metal plates. Time was constantly being lost by the truss assemblers (doctors) fetching the appropriate plates. With the use of one non-bottleneck worker (nurse) to hand the correct plates to the assemblers as needed, total productivity was increased by 27%.
How does this work in website production? First, you need to know where the major process constraint (bottleneck) is. Next, you need to differentiate between value added (VA) and non-value added contribution at the bottleneck and what work absolutely must be done by the ‘surgeon’ and what can be done by a ‘nurse’ in order to allow the surgeon to spend a greater proportion of his time creating value. The results can be remarkable, and when bottleneck techniques are combined with other Lean tools, an 80% efficiency improvement is not out of sight.
Now, as for office space, it is my experience, based on my personal observation over the past 14 years, that the vast majority of North American companies occupy too much space, leading directly to wasted movement, transportation, work in process and process time. I’m not saying that workers should be crammed into little cubicles; rather the space requirement should be assessed in terms of human efficiency and comfort. When you do this, in combination with the application of Lean thinking tools such as the Pareto principle (80-20 rule) and layout design, the worker is more comfortable and more productive. When you apply this kind of thinking to the bottleneck, the sky’s the limit.
Have you ever regarded as including much more videos to your blog posts to maintain the readers additional entertained? I necessarily mean I just learn by way of the total article of yours and it was very very good but considering that I am additional of a visual learner,I discovered that to be additional useful. Just my my strategy, Good luck
Recently i am looking fot the white iphone 4 conversion kit. If you have any recommendation, plz tell me. I will be very grateful!
very good. I like the way you present your content.
Bookmarked the post, definitely needs a further reading.
Associate researchers. Dr. Shah, people with ADHD “different thinking” they know better than laboratory measurements, but this situation in real life it could do with this work a success and said they did not know çevirmediklerini turn.
As a former Six Sigma Black Belt and now the owner of a web design company I can tell you all the above information is true. It’s actually made me think more about using my Six Sigma (lean) skills for our own process. Something I should have thought about before. Thanks for the article.