📝
🕒
✅
💬
🔔
🗓️
🖍️
🗂️
🔎
From Blank Canvas to a Fully Functional Task Card
From Blank Canvas to a Fully Functional Task Card
From Blank Canvas to a Fully Functional Task Card
How I designed a flexible, scalable, and user-friendly core component of a productivity tool that adapts to any workflow.
How I designed a flexible, scalable, and user-friendly core component of a productivity tool that adapts to any workflow.
How I designed a flexible, scalable, and user-friendly core component of a productivity tool that adapts to any workflow.
DOMAIN
Project Management & Productivity
TIMELINE
2020 - 2022
MY ROLE
Sr Product Designer
Team Lead
TEAM
+6
DOMAIN
Project Management & Productivity
TIMELINE
2021 - 2022
MY ROLE
Sr Product Designer
Team Lead
TEAM
+6
TEAM
+6
DOMAIN
Project Management & Productivity
TIMELINE
2021 - 2022
MY ROLE
Sr Product Designer
Team Lead
TEAM
+6
TEAM
+6
CONTEXT
CONTEXT
CONTEXT
Timebook, founded in 2020 in San Francisco, is a productivity and project management app that reimagines how people plan, schedule, and manage their time and workload. I led the design of its core task management module from 0-1, navigating its complex entities and dependencies.
Timebook, founded in 2020 in San Francisco, is a productivity and project management app that reimagines how people plan, schedule, and manage their time and workload. I led the design of its core task management module from 0-1, navigating its complex entities and dependencies.
Timebook, founded in 2020 in San Francisco, is a productivity and project management app that reimagines how people plan, schedule, and manage their time and workload. I led the design of its core task management module from 0-1, navigating its complex entities and dependencies.
PROBLEM
PROBLEM
PROBLEM
The Task Card Dilemma: Designing the Heart of Task Management
The Task Card Dilemma: Designing the Heart of Task Management
The Task Card Dilemma: Designing the Heart of Task Management
The task card is the backbone of the task module. All other module functionality and cross-module interactions rely on it. I was responsible for building this critical component from scratch, aiming to incorporate market best practices and add extra value. I faced several high-level challenges:
The task card is the backbone of the task module. All other module functionality and cross-module interactions rely on it. I was responsible for building this critical component from scratch, aiming to incorporate market best practices and add extra value. I faced several high-level challenges:
The task card is the backbone of the task module. All other module functionality and cross-module interactions rely on it. I was responsible for building this critical component from scratch, aiming to incorporate market best practices and add extra value. I faced several high-level challenges:
The task card had to be comprehensive.
The task card had to be comprehensive.
Each task is unique, so the card should cover all essentials for completion, such as notes, files, and comments.
The task card had to be scalable.
The task card had to be scalable.
It was intended to form the basis of a future project management module (similar to Jira) and needed to accommodate all key project-related information.
The task card had to be easily adjustable.
The task card had to be easily adjustable.
Future plans included personal customization options to tailor the card layout to any user needs.
User Needs
User Needs
User Needs
Research Insights: Breaking Down Complexities
Research Insights: Breaking Down Complexities
Research Insights: Breaking Down Complexities
Together with the CEO, PMs, and other designers, we conducted 12 interviews with professionals from various levels and backgrounds. Through this research, we identified key challenges in designing the task card, ensuring it effectively supports complex workflows.
Together with the CEO, PMs, and other designers, we conducted 12 interviews with professionals from various levels and backgrounds. Through this research, we identified key challenges in designing the task card, ensuring it effectively supports complex workflows.
Together with the CEO, PMs, and other designers, we conducted 12 interviews with professionals from various levels and backgrounds. Through this research, we identified key challenges in designing the task card, ensuring it effectively supports complex workflows.
1/ Visibility of Task Dependencies
1/ Visibility of Task Dependencies
1/ Visibility of Task Dependencies
Users need to see the "big picture" of task dependencies to manage complex workflows. An intuitive parent-child hierarchy clarifies project scope and helps track progress without losing sight of interdependencies.
Users need to see the "big picture" of task dependencies to manage complex workflows. An intuitive parent-child hierarchy clarifies project scope and helps track progress without losing sight of interdependencies.
Users need to see the "big picture" of task dependencies to manage complex workflows. An intuitive parent-child hierarchy clarifies project scope and helps track progress without losing sight of interdependencies.
12/12
interviewees preferred to stay within the context and view the entire hierarchy of complex tasks.
interviewees preferred to stay within the context and view the entire hierarchy of complex tasks.
interviewees preferred to stay within the context and view the entire hierarchy of complex tasks.
2/ Role-Based Permissions
2/ Role-Based Permissions
2/ Role-Based Permissions
Tailoring task access for different roles is essential for collaborative teams. Setting permissions within the task card secures data and keeps team members focused on relevant work.
Tailoring task access for different roles is essential for collaborative teams. Setting permissions within the task card secures data and keeps team members focused on relevant work.
Tailoring task access for different roles is essential for collaborative teams. Setting permissions within the task card secures data and keeps team members focused on relevant work.
3/ Calendar Integration
3/ Calendar Integration
3/ Calendar Integration
Linking tasks with the calendar paves the way for a future Agenda module. This enables users to view and allocate time for tasks within their schedules, enhancing planning efficiency.
Linking tasks with the calendar paves the way for a future Agenda module. This enables users to view and allocate time for tasks within their schedules, enhancing planning efficiency.
Linking tasks with the calendar paves the way for a future Agenda module. This enables users to view and allocate time for tasks within their schedules, enhancing planning efficiency.
8/12
interviewees wanted to block out time in their schedule to focus on tasks.
interviewees wanted to block out time in their schedule to focus on tasks.
interviewees wanted to block out time in their schedule to focus on tasks.
4/ Scalability
4/ Scalability
4/ Scalability
The task card needs to be robust enough to support an advanced project management module. As Timebook evolves, it should accommodate everything from simple tasks to complex, multi-phase projects.
The task card needs to be robust enough to support an advanced project management module. As Timebook evolves, it should accommodate everything from simple tasks to complex, multi-phase projects.
The task card needs to be robust enough to support an advanced project management module. As Timebook evolves, it should accommodate everything from simple tasks to complex, multi-phase projects.
EXPLORATION
EXPLORATION
EXPLORATION
Making the Right Choice for a Task Card Layout
Making the Right Choice for a Task Card Layout
Making the Right Choice for a Task Card Layout
I began by analyzing established patterns for layouts, features, and task-related actions across key competitors in task management, including Asana, Trello, and ClickUp.
I began by analyzing established patterns for layouts, features, and task-related actions across key competitors in task management, including Asana, Trello, and ClickUp.
I began by analyzing established patterns for layouts, features, and task-related actions across key competitors in task management, including Asana, Trello, and ClickUp.
Option 1: Right-Side Drawer
Option 1: Right-Side Drawer
Option 1: Right-Side Drawer
Familiar Pattern: Widely used in task management, making it comfortable and familiar for users.
Familiar Pattern: Widely used in task management, making it comfortable and familiar for users.
Familiar Pattern: Widely used in task management, making it comfortable and familiar for users.
Focused View: Allows to organize information into tabs, creating a cleaner, less cluttered experience.
Focused View: Allows to organize information into tabs, creating a cleaner, less cluttered experience.
Focused View: Allows to organize information into tabs, creating a cleaner, less cluttered experience.
Works Well in Split-Screen: Allows users to view related information alongside tasks without extra back-and-forth.
Works Well in Split-Screen: Allows users to view related information alongside tasks without extra back-and-forth.
Works Well in Split-Screen: Allows users to view related information alongside tasks without extra back-and-forth.
Potential Drawback: A full-height drawer might feel awkward and visually unbalanced on large screens.
Potential Drawback: A full-height drawer might feel awkward and visually unbalanced on large screens.
Potential Drawback: A full-height drawer might feel awkward and visually unbalanced on large screens.
Option 2: Center Pop-Up
Option 2: Center Pop-Up
Option 2: Center Pop-Up
Familiar Pattern: Commonly used in productivity apps, making it easy for users to adopt.
Familiar Pattern: Commonly used in productivity apps, making it easy for users to adopt.
Familiar Pattern: Commonly used in productivity apps, making it easy for users to adopt.
Comprehensive View: Shows all task details at once, convenient for users needing a full overview.
Comprehensive View: Shows all task details at once, convenient for users needing a full overview.
Comprehensive View: Shows all task details at once, convenient for users needing a full overview.
Overwhelming for Simple Tasks: Users with simpler task flows may feel frustrated by the display of advanced features.
Overwhelming for Simple Tasks: Users with simpler task flows may feel frustrated by the display of advanced features.
Overwhelming for Simple Tasks: Users with simpler task flows may feel frustrated by the display of advanced features.
Final Decision: Why Right-Side Drawer?
Final Decision: Why Right-Side Drawer?
Final Decision: Why Right-Side Drawer?
Simplified View: Not all tasks require extensive details; showing only essential options at first keeps the interface clean. Advanced options are easily accessible in tabs, but only if users need them.
Simplified View: Not all tasks require extensive details; showing only essential options at first keeps the interface clean. Advanced options are easily accessible in tabs, but only if users need them.
Simplified View: Not all tasks require extensive details; showing only essential options at first keeps the interface clean. Advanced options are easily accessible in tabs, but only if users need them.
Proven Pattern: This approach is effective across our competitors and aligns with user expectations.
Proven Pattern: This approach is effective across our competitors and aligns with user expectations.
Proven Pattern: This approach is effective across our competitors and aligns with user expectations.
Scalability: The drawer layout can expand in the future, allowing an optional full-width, centered view for users who prefer it.
Scalability: The drawer layout can expand in the future, allowing an optional full-width, centered view for users who prefer it.
Scalability: The drawer layout can expand in the future, allowing an optional full-width, centered view for users who prefer it.
ITERATION
ITERATION
ITERATION
Iterating from a Raw Concept to a Scalable Design
Iterating from a Raw Concept to a Scalable Design
Iterating from a Raw Concept to a Scalable Design
Together with the PM and Tech Lead, I iterated on the task card layout to define its key elements, input behaviors, tab navigation, user roles and permissions, and address both existing and potential technical constraints. Here’s a glimpse of some key versions we explored along the way:
Together with the PM and Tech Lead, I iterated on the task card layout to define its key elements, input behaviors, tab navigation, user roles and permissions, and address both existing and potential technical constraints. Here’s a glimpse of some key versions we explored along the way:
Together with the PM and Tech Lead, I iterated on the task card layout to define its key elements, input behaviors, tab navigation, user roles and permissions, and address both existing and potential technical constraints. Here’s a glimpse of some key versions we explored along the way:
Feedback on Variant 4 Implementation
Feedback on Variant 4 Implementation
FINAL DESIGN
FINAL DESIGN
FINAL DESIGN
The Task Card: Designed, Tested, Perfected
The Task Card: Designed, Tested, Perfected
The Task Card: Designed, Tested, Perfected
After defining all key task card entities and transitioning from draft versions to detailed designs, we began testing the iterations. Ultimately, we arrived at a final version that met all user needs, aligned with technical constraints, and supported future scalability.
After defining all key task card entities and transitioning from draft versions to detailed designs, we began testing the iterations. Ultimately, we arrived at a final version that met all user needs, aligned with technical constraints, and supported future scalability.
After defining all key task card entities and transitioning from draft versions to detailed designs, we began testing the iterations. Ultimately, we arrived at a final version that met all user needs, aligned with technical constraints, and supported future scalability.
Task Card Documentation
Task Card Documentation
1
Task Status
Task Status
Default is “To Do.” Users can switch to “In Progress” or “Done” via a dropdown (future scalability for custom types).
2
Task Title Section
Task Title Section
Completion Checkbox – Instantly marks the task as done (always visible).
Subtask Indicator – Shows parent-child relationships (hidden if not a subtask).
Task Title – Wraps to 2 lines before truncating with an ellipsis.
3
Quick Actions Section
Quick Actions Section
Task Type – Default is “Task”. Users can switch to “Bug,” “Epic,” or “Story” via a dropdown (future scalability for custom types).
Priority – Default is “No priority”. Users can select “Urgent,” “High,” “Medium,” or “Low” via a dropdown (future scalability for custom types).
Due Date – Not set by default. Users can edit it via a calendar dropdown.
Assignee – Default is the task owner. Users can edit assignees via a dropdown.
4
Tags
Tags
Empty by default. Can include up to 10 tags, wrapping across multiple lines if needed. Users can create, edit, or select existing tags via a dropdown.
5
Tabs Panel
Tabs Panel
In addition to the Info tab, users can access three more:
Subtasks – Users can create, remove, or link existing tasks as subtasks.
Notes – Users can add, delete, or attach existing notes.
Attachments – Users can upload, remove, or link existing files.
6
Location
Location
Default: Workgroup is Personal, List is General. Users can change the workgroup and select a list within it.
7
Parent Task
Parent Task
Empty by default. Users can link the task as a subtask to any task within the list. When a parent task is added, an icon appears next to the task title, allowing users to open the parent task card.
8
Workstream
Workstream
Empty by default. Users can assign the task to any workstream.
9
Task Owner
Task Owner
Displays the creator of the task. Not editable.
10
Description
Description
Allows users to add text, links, checklists, and more. The editing panel appears when the field is active.
11
Recurring Task
Recurring Task
Allows users to set task recurrence parameters, such as daily, weekly, or custom intervals. When enabled, the icon changes color to indicate it’s active.
12
Task Scheduling
Task Scheduling
Allows users to add a task to the agenda (single or multiple scheduling). When active, the icon changes color and displays an indicator.
13
Action Menu
Action Menu
Includes Pin, Copy Link, and Delete options. More actions may be added in the future.
FINAL DESIGN
FINAL DESIGN
FINAL DESIGN
Refining Every Step of Task Editing
Refining Every Step of Task Editing
Refining Every Step of Task Editing
I carefully designed all user flows for editing task card parameters, including dropdowns and more complex flows like adding a parent task, changing location, and adding to a workstream. I also refined actions within tabs, such as creating and editing subtasks, notes, and attachments.
I carefully designed all user flows for editing task card parameters, including dropdowns and more complex flows like adding a parent task, changing location, and adding to a workstream. I also refined actions within tabs, such as creating and editing subtasks, notes, and attachments.
I carefully designed all user flows for editing task card parameters, including dropdowns and more complex flows like adding a parent task, changing location, and adding to a workstream. I also refined actions within tabs, such as creating and editing subtasks, notes, and attachments.
IMPACT
IMPACT
IMPACT
Our team ensured a seamless company-wide transition of 30+ people from Jira to Timebook for daily work and long-term planning, allowing us to spot usability issues early, refine workflows in real scenarios, and iterate faster.
Our team ensured a seamless company-wide transition of 30+ people from Jira to Timebook for daily work and long-term planning, allowing us to spot usability issues early, refine workflows in real scenarios, and iterate faster.
Our team ensured a seamless company-wide transition of 30+ people from Jira to Timebook for daily work and long-term planning, allowing us to spot usability issues early, refine workflows in real scenarios, and iterate faster.
89% of users reported high satisfaction with the task management module, praising its user-friendliness and the significant reduction in time spent on task, according to our Customer Satisfaction Score survey.
89% of users reported high satisfaction with the task management module, praising its user-friendliness and the significant reduction in time spent on task, according to our Customer Satisfaction Score survey.
89% of users reported high satisfaction with the task management module, praising its user-friendliness and the significant reduction in time spent on task, according to our Customer Satisfaction Score survey.
LEARNINGS
LEARNINGS
LEARNINGS
Internal adoption helps catch issues faster and at a lower cost. Using your product daily reveals pain points sooner and allows for more effective refinements.
Internal adoption helps catch issues faster and at a lower cost. Using your product daily reveals pain points sooner and allows for more effective refinements.
Internal adoption helps catch issues faster and at a lower cost. Using your product daily reveals pain points sooner and allows for more effective refinements.
Regular collaboration helps find better solutions – not just build features. Frequent check-ins with the Tech Lead and PM ensure alignment, bring diverse expertise to the table, and lead to a smoother implementation process.
Regular collaboration helps find better solutions – not just build features. Frequent check-ins with the Tech Lead and PM ensure alignment, bring diverse expertise to the table, and lead to a smoother implementation process.
Regular collaboration helps find better solutions – not just build features. Frequent check-ins with the Tech Lead and PM ensure alignment, bring diverse expertise to the table, and lead to a smoother implementation process.
Not everything needs to be customizable from day one. It’s better to start with a solid core functionality and introduce customization later based on real user needs.
Not everything needs to be customizable from day one. It’s better to start with a solid core functionality and introduce customization later based on real user needs.
Not everything needs to be customizable from day one. It’s better to start with a solid core functionality and introduce customization later based on real user needs.
Design with future scalability in mind. When working on complex solutions, thinking ahead can save significant time and effort that would otherwise be spent on redesigns and workarounds.
Design with future scalability in mind. When working on complex solutions, thinking ahead can save significant time and effort that would otherwise be spent on redesigns and workarounds.
Design with future scalability in mind. When working on complex solutions, thinking ahead can save significant time and effort that would otherwise be spent on redesigns and workarounds.
Next Project
Next Project
Next Project
Timebook | 2020–2023
Turning Scheduling Chaos into a Seamless Flow
How cross-team collaboration led to a 4.8/5-rated smart scheduling feature.
Timebook | 2020–2023
Turning Scheduling Chaos into a Seamless Flow
How cross-team collaboration led to a 4.8/5-rated smart scheduling feature.
Timebook | 2020–2023
Turning Scheduling Chaos into a Seamless Flow
How cross-team collaboration led to a 4.8/5-rated smart scheduling feature.