TaskFlow

The brief

Task management tools tend to grow into cluttered cockpits. TaskFlow’s goal was the opposite: a dashboard a team lead can read in ten seconds: who’s overloaded, what’s overdue, what needs a decision, without hunting through menus.

What we did

We designed the full product surface in Figma: dashboard, tasks, projects, analytics, calendar, reports, chat, and help, nine-plus screens sharing one token system and one component library. The data visualization carries the product: status distributions, priority donuts, team-activity heatmaps, and workload tables designed to be read, not decorated.

Every component ships with states, hover, empty, loading, overflow, so development starts from answers, not questions.

A dashboard that answers who is overloaded

The dashboard opens on four numbers a team lead checks first: active projects, utilization, the average time a task takes and the projects at risk. Below them, the split between tasks in progress, completed and overdue, and the spread of high, medium and low priority work.

The team workload table does the rest. Each person’s active and overdue work sits beside a plain status, on track, under pressure, overloaded or balanced, so the answer to who needs help is a word, not a calculation. A heatmap of team activity by day and hour shows when the work actually happens.

Tasks you can scan

The task list is a table built for scanning: the task, its assignees, priority, status, due date and a progress bar on every row, with search, filters and a create button above it. Priority and status use the same colours on the dashboard and the list, so a high priority task reads the same wherever it appears.

Analytics that say what changed

Analytics leads with completion rate, average response time, team velocity and sprint success, then shows tasks completed against tasks created by month, team efficiency over time, and the spread of work across development, design, testing, documentation and planning. Quick insights put the changes into sentences, the best day of the week, a rise in overdue tasks, a jump in velocity, the projects at risk, so a manager does not have to read them off a chart.

Workload you can see coming

The calendar shows the month with its sprint planning, reviews, demos and deadlines, colour coded by type, and today’s events with their attendees beside it. A meeting can get its video link from the same panel, so planning the week and booking the meeting happen in one place.

The result

A dev-ready design system a team can build from directly: consistent spacing and color tokens, componentized charts, and screens that scale from a five-person startup to a fifty-person team without redesign.