Roadmap

Design a roadmap screen for planning work over time. This is not a generic timeline poster; it should help someone scan what is happening now, what comes next, and what is blocked. The main job is to make the sequence of milestones easy to read and easy to update.

Use a clear vertical or horizontal path with milestones grouped by phase or quarter. Each item should show a title, status, target date, and a short description. Completed items should feel settled, the active item should stand out, and future items should be lighter but still legible. If a milestone depends on another, show that connection directly in the layout.

Build in detail reveal for each step. A collapsed state should show the minimum needed to scan the plan; an expanded state should expose notes, owners, links, or progress details without breaking the overall structure. The screen should also support filtering or switching views, such as by team, status, or time range.

Design for density and responsiveness. On smaller screens, the roadmap should keep the order obvious, preserve the current step, and avoid hiding critical context behind tiny controls.

Inject personality into the design with custom icons or illustrations that align with the theme or content of the roadmap.