The problem
The company was preparing to launch a redesigned website. Before going live, the team needed to test 64 cases across 8 functional areas on a staging environment. The existing process was spreadsheet-based:
Before vs After
Before: Spreadsheet (6 steps)
flowchart TB
B1["Download Excel template"] --> B2["Test on staging site"]
B2 --> B3["Mark pass/fail in spreadsheet"]
B3 --> B4["Take screenshots separately"]
B4 --> B5["Email file to QA lead"]
B5 --> B6["Manual merge all spreadsheets"]
style B1 fill:#f8f8fa,stroke:#6e6e88,color:#3c3c4e
style B2 fill:#f8f8fa,stroke:#6e6e88,color:#3c3c4e
style B3 fill:#f8f8fa,stroke:#6e6e88,color:#3c3c4e
style B4 fill:#f8f8fa,stroke:#6e6e88,color:#3c3c4e
style B5 fill:#f8f8fa,stroke:#6e6e88,color:#3c3c4e
style B6 fill:#f8f8fa,stroke:#f0a03a,color:#3c3c4e
After: Web form (1 step)
flowchart TB
A1["Open link"] --> A2["Test + mark pass/fail inline"]
A2 --> A3["Attach screenshot per test case"]
A3 --> A4["Submit"]
A4 --> A5["Auto-consolidated in Notion"]
style A1 fill:#f8f8fa,stroke:#6366f1,color:#3c3c4e
style A2 fill:#f8f8fa,stroke:#6366f1,color:#3c3c4e
style A3 fill:#f8f8fa,stroke:#6366f1,color:#3c3c4e
style A4 fill:#f8f8fa,stroke:#6366f1,color:#3c3c4e
style A5 fill:#f8f8fa,stroke:#6366f1,color:#3c3c4e
The spreadsheet approach had several pain points: no single source of truth (multiple copies floating around), no real-time visibility into testing progress, no way to link screenshots directly to specific test cases, and a time-consuming manual merge step that delayed triage.
What I built
A branded, responsive web form that presents all 64 test cases organized by functional area. For each test case, the tester marks Pass or Fail, optionally adds a comment, and can attach a screenshot inline. Results submit directly to a shared Notion database.
- 64 test cases organized across 8 functional areas
- Inline screenshot support: images are compressed client-side and attached directly to the test case in Notion
- Visit page shortcuts: each test area links to the relevant staging page
- Incomplete warning: the form prevents submission if any test case is untested
- Automatic consolidation: all results flow into one Notion database, filterable by tester, browser, status, and test area
- No login required: branded with the company design system, accessible via a single URL
Reusable by design. The form can be reused for future site launches or redesigns by swapping the test cases and staging URLs. The architecture (React form, serverless proxy, Notion database) doesn't change.
Architecture
flowchart TB
subgraph Browser["Browser"]
A["React form\n64 test cases"]
B["Screenshot\ncapture + compress"]
end
subgraph Netlify["Netlify"]
C["uat-submit\nserverless fn"]
D["upload-screenshot\nserverless fn"]
end
subgraph Notion["Notion"]
E[("Test Results DB")]
end
subgraph Ext["External"]
F["External\nimage host"]
end
A -- "POST results" --> C
C -- "Create page\nper tester" --> E
B -- "Upload image" --> D
D -- "Store image" --> F
F -- "Image URL" --> D
D -- "Attach to\ntest case" --> E
style Browser fill:#f8f8fa,stroke:#6366f1,color:#3c3c4e
style Netlify fill:#f8f8fa,stroke:#f0a03a,color:#3c3c4e
style Notion fill:#f8f8fa,stroke:#6e6e88,color:#3c3c4e
style Ext fill:#f8f8fa,stroke:#6e6e88,color:#3c3c4e
How I built it
Same pattern as my other tools: human-led, AI-augmented. I handled strategy, UX decisions, design system compliance, and creative direction. A QA colleague authored the 64 test cases. Claude handled the technical execution: React state management, Notion API integration, serverless functions, and screenshot upload logic.
| Human contributions | AI contributions |
|---|---|
| Test case authoring (colleague) | React app with state management |
| UI/UX and design system | Notion API database schema |
| QA process and strategy | Serverless proxy functions |
| Creative direction | Screenshot compression and upload |
Build timeline
| Day | What shipped |
|---|---|
| Day 1 | Ingested 64 test cases, created Notion database, built React form, first successful test submission. |
| Day 2 | Deployed to Netlify. Added serverless functions, screenshot upload, confirmation modal. Fixed CORS issues. |
| Day 3 | Simplified to Pass/Fail only. Added incomplete warning, Firefox support, split upload function for reliability. End-to-end test with the QA team. |
Results
- 5 steps to 1: Testers go from "open link" to "submit" in a single flow. No downloads, no email, no merge.
- 0 files to merge: All results consolidate automatically in Notion. The QA lead sees progress in real time.
- ~60% time saved: Estimated based on eliminating the download/screenshot/email/merge steps.
- Screenshot evidence per test case: Each failure includes the screenshot inline, directly linked to the specific test case.
- $0 cost: Built on existing Netlify free tier and Notion workspace.
The real win was team enablement. A creative operations team, not a software engineering team, shipped a production internal tool in 3 days. AI-assisted development extended the team's capabilities without requiring dedicated developer support.
What I learned
- Scope ruthlessly on day 1. The original plan included weighted scoring and multi-round tracking. Cutting to Pass/Fail only made the tool simpler to build and easier for testers to use.
- Browser quirks still matter. Day 3 was mostly Firefox compatibility and upload reliability. AI-generated code still needs real-device testing.
- Good enough ships faster than perfect. The form could have been more polished, but it solved the problem completely in 3 days. The team used it the same week.
Stack
React
HTML / CSS / JS
Netlify Functions
Notion API
Claude