Over years of projects, our teams had developed habits that sometimes put collaboration second. Designers and developers would work sequentially, leading to misunderstandings, frustration, and rework.
I saw an opportunity to use rough, content-driven wireframes as a shared language between the teams.
The goal was not to create polished designs. It was to give designers and developers enough structure to work in parallel, align on the page's purpose and content, and then bring their work together later in the process.
This solved both a collaboration problem and a velocity problem.
I developed a content-first process that connected user needs, business goals, information hierarchy, and the existing component design system.
The process had three basic steps:
Process overview: a content-first framework connecting page content, priorities, components, and wireframes.
I started with the content rather than placeholder text.
Lorem ipsum is not enough to make meaningful decisions about page hierarchy or information architecture. Even at a rough stage, understanding what a page actually needs to communicate makes it possible to prioritize information according to user goals and business strategy.
I extended Kristina Halverson's Page Description Diagram approach by combining content planning with elements of the experience map and wireframe.
The result was an ultra-low-fidelity content framework that could serve as the foundation for the page design.
The core content diagram established an atomic workflow for each page: