How a project runs

What we do for you

Before anyone writes code, your project goes through eight stages: we agree on the goal, choose between a new build and a conversion, pick the stack, collect your text and media, draw the block diagram, turn it into work stories, and estimate each story in AI time and developer time. You end up with a signed-off goal, a plan you can read, and an estimate that shows where the hours go.

Last updated

8 stagesNew builds and conversionsAI timeDev time

Free to use

This is the proven workflow we run on every project. Feel free to copy it and use it for your own projects and your own clients: the stages, the diagrams, the estimate and the checklist.

Each stage produces something the next one needs. Your goal shapes the path, the path shapes the stack, content and media fill the block diagram, and the block diagram turns into epics and stories we can estimate. Skip a stage and the gap shows up later as rework, which is the most expensive kind of work there is.

The eight stages in order, from goal to estimates01Goal and Purpose02New or Conversion03Tech Stack04Text Content05Media06Block Diagram07Work Stories08EstimatesDISCOVER AND DECIDEPLAN AND ESTIMATE
The eight stages. Select any block to jump to it. Stages 04 and 05 often run alongside 06, since collecting content takes the longest.

Stage 01

Define the goal and purpose

Every later decision traces back to this one. Before anyone picks a database or writes a story, we agree with you, in plain words, what the project must achieve and how you'll know it worked.

Purpose

Why build it

  • What problem does this solve?
  • Why now?
  • What happens if nothing gets built?
People

Who uses it

  • Customers, staff, admins, or all three?
  • What do they do today instead?
  • Which devices do they use?
Success

What moves

  • Which number should change?
  • By how much, and by when?
  • Who measures it?
Scope

What's in and out

  • Must-haves for launch
  • Nice-to-haves for later
  • What's explicitly out of scope
Constraints

What limits it

  • Budget and launch date
  • Accessibility, privacy, and compliance
  • Brand rules and hosting
Ownership

Who decides

  • Who approves the work?
  • Who supplies content?
  • Who maintains it after launch?

The answers go into a one-page project brief. It becomes the reference point for every scope question that comes up later.

Project brief

Example values
Project
Field-service company website and customer portal
Goal statement
Help customers book and track service visits online so that calls to the office drop by 30% within six months of launch.
Success metrics
Online bookings reach 40% of all bookings by month six. Office call volume drops 30%. Pages load in under two seconds on a phone.
Users
Customers, office staff, and site admins
In scope
12-page public site, booking form, and customer portal
Constraints
Launch before March 1. Meets WCAG 2.2 AA. Hosted on AWS.
Approver
Operations director
Tip

We write the goal as one sentence and ask you to sign off on it. If two of your stakeholders describe the goal differently, we settle it now. It's the cheapest point in the project to do so.

Stage 02

Choose a new build or a conversion

A new build starts from a blank page and your brief. A conversion starts from a system people already use every day, and that system becomes the source of truth. The two paths share the later stages but start very differently.

Decision fork between a new build and a conversion of an existing systemClient GoalIs There anExisting System?NO · NEW BUILDDiscovery and user researchWireframes and clickable prototypeMinimum viable product scopeYES · CONVERSIONInventory legacy screens and dataBuild the parity matrixPlan and rehearse data migrationCompare old and new side by sideChoose the Stack
The fork. Both paths end at the same place. A conversion has more steps up front, because the old system's behavior has to be written down before it can be matched.
New buildConversion
Starting pointA brief and a blank pageA running system with real users
Source of truthYour brief and approved wireframesWhat the legacy system does today
Biggest riskBuilding the wrong thingMissing a behavior customers depend on
First workDiscovery, wireframes, and scopeInventory of every screen, rule, and table
DataNew schema with seed dataReal data moved with repeatable dry runs
Done meansUsers finish their key tasksEvery feature matches legacy, row by row
New build

Get to a prototype fast

  • One or two discovery sessions with real users
  • Sketch the key screens before any design work
  • Click through a prototype together
  • Cut scope to what launch truly needs
Conversion

Write down what exists

  • List every screen, report, email, and integration
  • Map each legacy table and column to its new home
  • Track parity in a matrix, one row per feature
  • Keep the URLs your customers already use working
  • Decide which legacy bugs to fix and which to keep
  • Rehearse the data migration until it runs clean
Rule for conversions

Match the legacy behavior first. Redesign later, as its own project, once the new system proves it does everything the old one did. Mixing the two makes it impossible to tell a bug from a choice.

Stage 03

Pick the stack

The stack has three layers, and each answers a different question. The database decides how your data is stored and kept safe. The backend decides the business rules and who can do what. The frontend decides what people see and touch.

Three-layer stack with hosting on the left and outside services on the rightUsers · browser, phone, tabletFrontendScreens, forms, navigation, and client-side checksEXAMPLE · REACT · TYPESCRIPT · VITEHTTPS · JSON APIBackend APIBusiness rules, security, integrations, and jobsEXAMPLE · ASP.NET CORE · C#SQL · ORM · MIGRATIONSDatabaseRecords, history, reports, and backupsEXAMPLE · POSTGRESQLHostingand DevOpsCloud hostingCI/CD pipelineDev, staging,and productionBackupsMonitoringand alertsOUTSIDE SERVICESSign-in (SSO, OAuth)Email and SMSPaymentsFile storageAnalytics
The three layers. Requests flow down from the user to the database. Hosting wraps all three, and outside services plug into the backend, never straight into the frontend.
Database

We decide on

  • Relational or document data
  • Expected volume and growth
  • One database per client or shared
  • Backup and restore plan
  • How schema changes ship

Common choices
PostgreSQL, SQL Server, MySQL, MongoDB

Backend

We decide on

  • One app split into modules, or services
  • API style, REST or GraphQL
  • Sign-in and user roles
  • Background jobs and schedules
  • Integrations with other systems

Common choices
ASP.NET Core, Node.js, Django or FastAPI, Spring Boot

Frontend

We decide on

  • Single-page app or server-rendered
  • Search engine needs
  • Component library and design system
  • Responsive site or native mobile app
  • Accessibility target, such as WCAG 2.2 AA

Common choices
React with Vite, Next.js, Angular, Vue

How we choose

  • Team skills. A stack the team knows ships faster than a better one it doesn't.
  • Typed, compiled code. Type checks and builds catch mistakes in seconds, which keeps AI-written code honest.
  • Data shape. Records with relationships belong in a relational database.
  • Hosting and cost. We match where you already run things.
  • Longevity. Tools with a large community and a long support window.
  • Start simple. One deployable app split into clear modules beats early microservices.
LayerThe stack I usually build on
DatabasePostgreSQL, with schema changes shipped as migrations
BackendASP.NET Core (C#), one API split into modules that each own their tables
FrontendReact, TypeScript, and Vite, pre-rendered so search engines see every page
TestsUnit tests for the business rules, end-to-end tests for the key screens and flows
HostingWhere you already run things, deployed by one repeatable script

Stage 04

Collect the text content

Late content is one of the most common reasons a launch slips. We start collecting in week one, give every piece an owner and a due date, and treat it like any other dependency on the plan.

Where

Where it comes from

  • Your team
  • The existing site or legacy app
  • Subject-matter experts
  • Legal and compliance
  • Product data, such as prices and catalogs
What

What we collect

  • Page copy, headlines, and calls to action
  • Navigation and button labels
  • Error messages, empty states, and emails
  • Page titles and search descriptions
  • Privacy policy, terms, and accessibility statement
  • FAQs, bios, locations, and products
How

How we collect it

  • One content inventory keyed to the sitemap
  • One owner and one due date per row
  • A template per page type
  • A status on every row
  • A style guide for voice and terms
  • Approval in writing before it goes live
Content flows from four sources into one inventory, then through writing, review, and loadingSOURCESYour teamExisting siteExpertsLegalContentInventoryWrite and EditReviewCHANGESLoadAPPROVED IN WRITING
The content pipeline. Everything lands in one inventory first, so nothing arrives by email and gets lost. Review can send a piece back as many times as needed. Only approved text gets loaded.
PageSectionTypeOwnerDueStatus
HomeHero headlineCopyMarketingWeek 2Approved
HomeCustomer quoteTestimonialSalesWeek 3In review
PricingPlan tableStructuredProductWeek 3Draft
ContactForm errorsMicrocopyDev teamWeek 4Not started
FooterPrivacy policyLegalLegalWeek 4Draft

Example content inventory rows

Stage 05

Collect the media

Images, video, and drawings need the same tracking as text, plus two more checks: every file needs the right format and size for the web, and proof that you have the right to use it.

Media pipeline in six stepsCollectCheck RightsOptimizeName and TagStorePlaceLICENSE · CREDITFORMAT · SIZEALT TEXT · CAPTIONS
The media pipeline. A file without a confirmed license stops at step two. Alt text and captions get written at step four, not at launch.
TypeFormatSpecMust include
PhotosWebP or AVIF, JPEG fallbackTwice the largest display width, under about 300 KBAlt text, credit, and license
Logos and iconsSVGVersions for light and dark backgroundsBrand-approved source files
Illustrations and drawingsSVG or PNGExported at 2x for sharp screensEditable source file, such as Figma
VideoMP4 (H.264) or a hosted player1080p, with a poster imageCaptions (WebVTT) and a transcript
Screenshots and diagramsPNG or SVGExported at 2xAn owner who updates them when screens change
DocumentsPDFTagged for screen readersVersion date
media/
├── _source/          # originals, never served
├── home/
│   ├── home-hero-crew-at-sunrise-1920.webp
│   └── home-hero-crew-at-sunrise-960.webp
├── products/
│   └── product-a-overview.mp4
├── brand/
│   ├── logo-full-color.svg
│   └── logo-white.svg
└── rights.csv          # file, source, license, expiry
One folder per page, plus a source folder and a rights register.
Naming

One name pattern for every file

page-section-description-width.ext

  • Lowercase, with hyphens and no spaces
  • Describe what's in the picture
  • Add the width for each resized copy
  • Never name a file final-v2
Rights
  • Who took or made it
  • License type and where it's allowed
  • Expiry date, if any
  • Model releases for people shown

Stage 06

Draw the block diagram

We draw two pictures. The sitemap shows what pages exist and how people move between them. The system diagram shows which parts run where and how they talk. Together they turn a brief into something we can count, and every block becomes an epic or a story in the next stage.

Sitemap with six top-level pages and a signed-in customer portalHomeAboutProductsPricingResourcesContactCustomer PortalTeamCareersProduct AProduct BProduct CBlogHelp CenterFAQSign InDashboardBookingsProfilePUBLIC PAGESIGNED-IN AREA
Sitemap. Each box is a page. Pages built from one template, such as the three product pages, count as one story plus content.
System diagram from users through the web app and API to the database and outside servicesVisitors andCustomersCDNCached filesWeb AppFrontendAPIBackend APISign-in and rolesContentCustomers and bookingsNotificationsReportsDatabaseFile storageEmail servicePaymentsSOLID LINE · BUILT AND HOSTED BY THE TEAMDASHED LINE · OUTSIDE SERVICE, NEEDS AN ACCOUNT AND KEYS
System diagram. Each module inside the API is a candidate epic. Each dashed line is an integration that needs an account, keys, and a test plan, so we flag it early.
From diagram to backlog

We walk you through the two drawings before writing stories. Anything you point at that isn't on the drawing is new scope, and now is the time to price it.

Stage 07

Plan the work stories

The block diagram becomes a backlog in Jira or a similar tool. Epics come from the big blocks, stories come from the pages and features inside them, and sub-tasks are the steps a developer or an AI agent takes to finish a story.

Hierarchy from project to epics to stories to sub-tasksPROJECTEPICS · FROM BIG BLOCKSSTORIES · ONE OUTCOME EACHSUB-TASKSWebsiteFrontendBackend APIContent and MediaSign-in and user rolesContact form emailContent APIBuild the endpointWrite testsReview and verifyAIDEV
Backlog hierarchy. One epic and one story are expanded. Sub-tasks show who does the work, which is what makes the two-clock estimate in stage 08 possible.
Story · Backend API

Contact form sends email to sales

As a site visitor, I want to send a question from the Contact page, so that sales can reply within one business day.
Acceptance criteria
  • Form has name, email, company, and message fields
  • Blank required fields show an error next to the field
  • Submit sends an email to the sales inbox and shows a confirmation
  • Spam protection blocks automated submissions
  • Works at phone width and with a keyboard alone
EstimateAI 2 hDev 1 h
SizeS
Depends onEmail service account set up
BlockContact page, Notifications module
Definition of doneAgreed for the project, see below

Example story card

Good stories

Rules for writing them

  • One outcome per story
  • Small enough to finish in a day or two
  • Acceptance criteria a tester can check
  • Linked to the block it came from
  • Dependencies named up front
  • AI and Dev hours on every story
Done means

Definition of done

  • Code merged through a reviewed pull request
  • Unit tests and end-to-end tests pass
  • Each acceptance criterion checked in the running app
  • Final content and media in place
  • QA notes added to the ticket
Story workflow from Backlog to DoneBacklogReadyIn ProgressDev ReviewReady for QADone
Story workflow. A story moves to Ready only when it has acceptance criteria and an estimate. It moves to Done only when it meets the definition of done.

Stage 08

Estimate AI time and Dev time

With AI agents doing much of the building, one hour figure per story hides where the time really goes. We estimate two kinds of effort on every story, and track waiting separately.

Clock 1

AI time

Hours an AI agent spends building under a developer's direction. That covers writing code, running tests, and fixing what fails.

Clock 2

Dev time

Hours a person spends planning the work, reviewing code, making decisions, testing in the browser, and talking with you.

Not effort

Wait time

Calendar time spent waiting on content, approvals, or access. It's tracked on the plan, but never added to the hour estimate.

One story's life split into AI time, Dev time, and wait timeONE STORY, START TO DONEPlanAI builds and testsReviewFixWait for contentQA and acceptAI TIMEDEV TIMEWAIT · NOT ESTIMATED
Where a story's time goes. The drawing shows the pattern, not a measurement. The estimate is AI time plus Dev time; the hatched wait shows up only on the calendar.

Sizing guide

SizeAI timeDev timeExample
XSunder 1 h0.5 hCopy change or label fix
S1–2 h1 hNew form with validation and email
M3–4 h2 hNew page from an existing template
L5–8 h3–4 hNew feature with API, screens, and tests
XL——Too big to estimate, so split it into smaller stories

These numbers are a starting point. Dev time shrinks more slowly than AI time, because review and testing take about as long whether a person or an agent wrote the code. Small stories often carry as much Dev time as AI time.

Example estimate

Epic and storyAI hoursDev hoursTotal
Discovery and Setup6814
Project brief and success metrics145
Repository, CI/CD pipeline, and environments325
Database schema, first version224
Backend API9615
Sign-in and user roles437
Content API for pages and media325
Contact form sends email to sales213
Frontend161127
Layout shell, header, footer, and navigation325
Home page325
Product page template for three products437
Customer portal dashboard and bookings6410
Content and Media459
Load approved text content235
Optimize and place media224
Quality and Launch8715
End-to-end tests for key flows426
Accessibility and performance pass325
Launch, DNS, and monitoring134
Project total, 15 stories433780

Example estimate for the project in the brief: 43 AI hours and 37 Dev hours across 5 epics. Not a quote.

Calibrated after sprint one

Actual AI and Dev hours get logged on every closed story. After the first sprint we compare actuals to estimates and adjust the sizing guide, and you see both. Two sprints of real numbers beat any rule of thumb.

Before sprint one

Kickoff checklist

We go through this list together as the project moves. Try it: your ticks stay in this browser only.

0 of 12 done
Before the stack
Before the build
Before sprint one

Have a project in mind?

Tell me what you'd like to build or convert. Every engagement starts with a free 30-minute call, and stage 01 starts right there.