Midnight Dossier is a cinematic interactive web experience where users investigate a case, connect clues, explore suspects and locations, and make a final accusation.

This project was built through an iterative workflow using Google Stitch as the core creative and prototyping tool. Instead of trying to reach a final result in one pass, each page evolved through multiple rounds of refinement until the full experience felt coherent both visually and narratively.

One of the most valuable features in the process was in-place AI editing. It made it much easier to target specific parts of the interface and improve them without rebuilding the whole page. For example, I used inline editing to remove redundant UI elements like unnecessary footers, simplify sections that were adding visual noise, and quickly adjust content blocks so they stayed consistent with other pages in the experience.

That was especially useful in a multi-page project like this one. Pages such as Briefing, Evidence Board, Suspects, Locations, and Accuse needed to feel distinct, but still clearly belong to the same investigation. Stitch made it possible to refine sections directly and keep story logic, interface tone, and visual language aligned across the entire experience.

I also used Stitch to make the interface feel more alive through motion and interaction. Some of the effects used in the final experience include subtle hover states, cinematic transitions, active card glow, scan sweep effects, animated evidence focus states, and small atmospheric motion details that helped the interface feel more immersive without becoming distracting.

Another important part of the workflow was exporting the code and taking the project live. After refining the experience, I exported the code and deployed the final build to Netlify, which made it easy to move from prototype to a publicly accessible experience.

What stood out most was how naturally Stitch fit into a real workflow. It was not just useful for generating ideas, but for refining them with speed and precision. The ability to edit specific sections, improve coherence across pages, add motion, and then export the project into a live deployment made the process much more practical and efficient.

My main feedback is that Stitch is especially powerful when used as part of an active creative loop: build, inspect, refine, and repeat. That iterative workflow made it much easier to move from concept to a polished interactive prototype.

Project in Stitch: https://stitch.withgoogle.com/projects/1012188385966799930

Live demo on Netlify: https://tiny-marzipan-252c09.netlify.app/stitch