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.
8 stagesNew builds and conversionsAI timeDev time
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.
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.
Why build it
- What problem does this solve?
- Why now?
- What happens if nothing gets built?
Who uses it
- Customers, staff, admins, or all three?
- What do they do today instead?
- Which devices do they use?
What moves
- Which number should change?
- By how much, and by when?
- Who measures it?
What's in and out
- Must-haves for launch
- Nice-to-haves for later
- What's explicitly out of scope
What limits it
- Budget and launch date
- Accessibility, privacy, and compliance
- Brand rules and hosting
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
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.
| New build | Conversion | |
|---|---|---|
| Starting point | A brief and a blank page | A running system with real users |
| Source of truth | Your brief and approved wireframes | What the legacy system does today |
| Biggest risk | Building the wrong thing | Missing a behavior customers depend on |
| First work | Discovery, wireframes, and scope | Inventory of every screen, rule, and table |
| Data | New schema with seed data | Real data moved with repeatable dry runs |
| Done means | Users finish their key tasks | Every feature matches legacy, row by row |
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
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
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.
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
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
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.
| Layer | The stack I usually build on |
|---|---|
| Database | PostgreSQL, with schema changes shipped as migrations |
| Backend | ASP.NET Core (C#), one API split into modules that each own their tables |
| Frontend | React, TypeScript, and Vite, pre-rendered so search engines see every page |
| Tests | Unit tests for the business rules, end-to-end tests for the key screens and flows |
| Hosting | Where 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 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 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 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
| Page | Section | Type | Owner | Due | Status |
|---|---|---|---|---|---|
| Home | Hero headline | Copy | Marketing | Week 2 | Approved |
| Home | Customer quote | Testimonial | Sales | Week 3 | In review |
| Pricing | Plan table | Structured | Product | Week 3 | Draft |
| Contact | Form errors | Microcopy | Dev team | Week 4 | Not started |
| Footer | Privacy policy | Legal | Legal | Week 4 | Draft |
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.
| Type | Format | Spec | Must include |
|---|---|---|---|
| Photos | WebP or AVIF, JPEG fallback | Twice the largest display width, under about 300 KB | Alt text, credit, and license |
| Logos and icons | SVG | Versions for light and dark backgrounds | Brand-approved source files |
| Illustrations and drawings | SVG or PNG | Exported at 2x for sharp screens | Editable source file, such as Figma |
| Video | MP4 (H.264) or a hosted player | 1080p, with a poster image | Captions (WebVTT) and a transcript |
| Screenshots and diagrams | PNG or SVG | Exported at 2x | An owner who updates them when screens change |
| Documents | Tagged for screen readers | Version 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 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
- 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.
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.
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
Example story card
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
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
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.
AI time
Hours an AI agent spends building under a developer's direction. That covers writing code, running tests, and fixing what fails.
Dev time
Hours a person spends planning the work, reviewing code, making decisions, testing in the browser, and talking with you.
Wait time
Calendar time spent waiting on content, approvals, or access. It's tracked on the plan, but never added to the hour estimate.
Sizing guide
| Size | AI time | Dev time | Example |
|---|---|---|---|
| XS | under 1 h | 0.5 h | Copy change or label fix |
| S | 1–2 h | 1 h | New form with validation and email |
| M | 3–4 h | 2 h | New page from an existing template |
| L | 5–8 h | 3–4 h | New 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 story | AI hours | Dev hours | Total |
|---|---|---|---|
| Discovery and Setup | 6 | 8 | 14 |
| Project brief and success metrics | 1 | 4 | 5 |
| Repository, CI/CD pipeline, and environments | 3 | 2 | 5 |
| Database schema, first version | 2 | 2 | 4 |
| Backend API | 9 | 6 | 15 |
| Sign-in and user roles | 4 | 3 | 7 |
| Content API for pages and media | 3 | 2 | 5 |
| Contact form sends email to sales | 2 | 1 | 3 |
| Frontend | 16 | 11 | 27 |
| Layout shell, header, footer, and navigation | 3 | 2 | 5 |
| Home page | 3 | 2 | 5 |
| Product page template for three products | 4 | 3 | 7 |
| Customer portal dashboard and bookings | 6 | 4 | 10 |
| Content and Media | 4 | 5 | 9 |
| Load approved text content | 2 | 3 | 5 |
| Optimize and place media | 2 | 2 | 4 |
| Quality and Launch | 8 | 7 | 15 |
| End-to-end tests for key flows | 4 | 2 | 6 |
| Accessibility and performance pass | 3 | 2 | 5 |
| Launch, DNS, and monitoring | 1 | 3 | 4 |
| Project total, 15 stories | 43 | 37 | 80 |
Example estimate for the project in the brief: 43 AI hours and 37 Dev hours across 5 epics. Not a quote.
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.
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.