Roadmap design examples

Roadmap

Password recovery screen where the user enters their email address to request a reset link.

• Forgot Password

Roadmap

Signup screen where the user creates a new account by providing their name, team name, email, and password.

• Sign Up

Roadmap

Dashboard where a new user is guided by a product tour popover explaining the projects view, alongside a prominent card to create their first project.

• Dashboard
• Getting Started

Roadmap

Timeline view where a product tour popover instructs the user on how to add and assign phase names by clicking and dragging.

• Timeline
• Drag & Drop

Roadmap

Timeline view where the user can see project tasks scheduled across January and February.

• Timeline
• Table

Roadmap

Timeline view where the user edits project details, privacy settings, and manages members via a modal.

• Edit
• Team Management

Roadmap

Home screen where the user can view their existing projects or create a new one, with an active trial countdown visible in the top bar.

• Home
• Trial

Roadmap

Settings modal where the user updates their profile photo, name, and time zone.

• Account Settings
• Profile

Roadmap

Settings modal where the user configures email notification preferences for project changes and roadmap news.

• Notification Settings

Roadmap

Settings modal where the user can rename the team, toggle a Slack integration, and invite new members by email while assigning their roles.

• Team Management
• Roles & Permissions

Roadmap

Upgrade modal where the user reviews pricing per member and total monthly cost before confirming their subscription.

• Pricing
• Checkout

Roadmap

Dashboard with an open modal where the user enters their credit card details to set up a subscription payment.

• Payment Form
• Checkout