Logo of UI Challenges
Sign in
Wireframe example for Roadmap
An example interpretation of the prompt
Icon of target

Roadmap

Icon of book open

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.

Icon of book open

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

Better at UI design with every challenge

Select complexity and generate challenge.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.