Plan and move product work through clear states with owner, priority, due date, and blockers visible on every card. The screen connects Board and My work so product teams can find the “New task” action while checking open tasks and blocked.
Use this reference when you need to design this workflow inside an existing product. The example includes practical records such as Billing migration and Mobile onboarding, rather than an empty visual shell.
Board
New task
Board
Default, loading, empty, error, permission, success
Adaptable product UI theme
Product teams need a clear “New task” action without losing sight of open tasks, blocked and the affected records. Keep the decision and its outcome clear before moving to the next task.
Board → My work → New task → Review outcome
Board, Board, My work, Projects, accessible states, contextual actions
Use meaningful stages and clear ownership. Keep the next action visible on each card; confirm high-impact moves.
In this design, people should be able to compare Billing migration with Mobile onboarding. Make open tasks clear, then use blocked to explain whether the next step needs attention.
Before handing this to a designer or engineer, check keyboard focus, error copy, permissions and what happens after they choose the “New task” action. The happy path alone is not enough.
Related UI examples: Project Timeline, Sprint Planning, Product Roadmap.
Design a task board screen for our existing software product. Use our real design-system tokens, components and product language. Show Board and My work, include believable records such as Billing migration, and make new task easy to find. Map loading, empty, failure, permission and success states before you create editable high-fidelity screens.