Michael RamosRelease readiness example
This example takes one product brief through three review stages. Each stage is a separate, self-contained HTML file so it can be opened directly, copied, and changed without build tooling.
1. Wireframe
The wireframe keeps the visual treatment deliberately plain and compares three structural directions:
- Decision first keeps the release verdict visible beside the checks.
- Evidence ledger favors dense comparison and auditability.
- Guided gate turns the decision into a step-by-step review.
Decisions at this stage include content, grouping, navigation, task order, and mobile reflow. Color, typography, component styling, and animation remain open.
| Decision first | Evidence ledger | Guided gate |
|---|---|---|
 |
 |
 |
2. Mockup
The mockup develops the decision-first direction into a release-control workspace. It adds a product-specific visual hierarchy, responsive composition, readable state styling, and realistic evidence without adding product behavior.
Decisions at this stage include type, spacing, color, contrast, visual density, and how the desktop composition collapses on mobile. Data flow, permissions, persistence, and transitions remain open.
3. Prototype
The prototype adds the smallest complete flow needed to test the decision:
- Review the failed iOS smoke test.
- Record a passing rerun in a keyboard-accessible dialog.
- See the release change from blocked to ready.
- Request a production release and reach the explicit prototype boundary.
The artifact includes loading, error, success, disabled, empty-notes, mobile, and reduced-motion states. It does not authenticate a user, save data, or start a real release.
See the validation record for browser, interaction, accessibility, clean-invocation, and packaging checks.
Clone and adapt
Copy the stage closest to the question you need to answer:
cp examples/release-readiness/wireframe.html my-flow.html
cp examples/release-readiness/mockup.html my-mockup.html
cp examples/release-readiness/prototype.html my-prototype.html
Replace the brief, labels, data, and state model before changing the visual direction. A useful adaptation keeps the review question clear and removes controls that do not support it.