# Task Management App: Case Study | Gr8r Studio

> A task workspace that shows the whole team's work at a glance. Projects, tasks, deadlines and updates in one calm workspace, from each person's own list to the whole company's timeline.

Source: https://gr8rstudio.com/work/task-management-app

# A task workspace that shows the whole team's work at a glance.

Projects, tasks, deadlines and updates in one calm workspace, from each person's own list to the whole company's timeline.

Built by Gr8r for its own portfolio. Not client work.

Client

Task management app

Project

Project and task management

Platforms

Web app, desktop and mobile

- [Product Design](https://gr8rstudio.com/services/product-design)
- [Product Engineering](https://gr8rstudio.com/services/product-engineering)

[View live demo](https://gr8r-task-management.vercel.app/)[★ 1.8K+ stars on GitHub](https://github.com/gr8rstudio/gr8r-studio)[Discuss your product](https://gr8rstudio.com/contact)

The problem

## Make a busy team's work easy to follow.

As a team grows, work scatters across boards, chats and calendars. People lose track of what is theirs, what is late and which project is at risk. The product had to give each person a clear list and give leads the whole picture, without adding process.

- 1
### Work is scattered
Tasks sit in boards, chats and calendars, so nobody sees one list of what is theirs.
“What's mine today?”
- 2
### Late work hides
A project can slip for days before anyone notices, because progress lives in people's heads.
“Which project is slipping?”
- 3
### Updates get buried
Comments, mentions and status changes scroll past in chat and get lost.
“Did anyone answer my comment?”

Workspace health: active projects, open tasks, what's overdue and how each project is moving.

Each person's day: overdue, today, upcoming and done.

Problem map

## Six themes behind the product.

We grouped a growing team's problems into themes first, then gave each one a view in the product.

- ### My work

  - No single list of my tasks
  - Due dates in many places
  - Priorities unclear
- ### Projects

  - Progress hard to see
  - At-risk projects noticed late
  - Scope lives in docs
- ### Planning

  - Deadlines and meetings apart
  - Quarter view missing
  - Workload unclear
- ### Updates

  - Mentions lost in chat
  - Status changes unseen
  - Comments away from the task
- ### Teams

  - Who owns what?
  - Handoffs unclear
  - New people get lost
- ### Process

  - Too much setup
  - Tools don't match
  - Boards go stale

Design hypotheses we built the product around, drawn from the product brief. Not interview data.

Information architecture

## Personal, workspace, projects, teams.

The sidebar moves from your own work out to the whole company, as in the app. Each project opens into five views.

Task management app

1. Personal

  - Home
  - Inbox
  - My Tasks
  - Favorites
  - Search
  - Notifications
2. Workspace

  - Overview
  - Projects
  - Tasks
  - Calendar
  - Timeline
  - Members
  - Activity
3. Projects

  - Website Redesign
  - Mobile App
  - Marketing Campaign
  - Product Launch
  - Design System
  - Customer Portal
  - Archive
4. Teams

  - Design
  - Engineering
  - Marketing
  - Product
5. Inside a project

  - Board
  - List
  - Overview
  - Files
  - Activity

The workflow

## From plan to done, in one place.

1. 1
Plan
Create a project and break it into tasks on a board.
2. 2
Assign
Give each task an owner, a priority and a due date.
3. 3
Track
Follow progress on the board, calendar and timeline.
4. 4
Follow up
Mentions, comments and status changes arrive in one inbox.

The product

## One workspace, viewed the way you need it.

The same work as a board, a calendar, a timeline or an inbox, so each person sees it the way that helps them act.

1. Board
### A board for every project
Backlog to done, with labels, IDs, priority, due dates and owners on every card.

  1. 1Board, list, overview, files and activity
  2. 2Backlog to done, with counts
  3. 3Labels on every card
  4. 4ID, priority and due date on the card
2. Inbox
### Updates in one place
Mentions, assignments, comments and status changes, each opening the task it is about.

  1. 1Filter by mentions, assignments and comments
  2. 2Who did what, in one sentence
  3. 3New items marked
  4. 4The task opens beside the list
3. Calendar
### Deadlines and meetings together
Every task due date and meeting across the workspace on one month view.

  1. 1Today highlighted
  2. 2Meetings with their times
  3. 3Move by month or jump to today
4. Timeline
### Every project against the quarter
Where each active project sits between now and its due date, with its status beside it.

  1. 1Each project against the quarter
  2. 2Status beside each project
  3. 3The due date at the end of the bar

Interaction

## From a card to done, without leaving the board.

One real path through the product, captured frame by frame.

1. Trigger Open a card Every card on the board opens in a side panel, so the board stays in view.
2. Transition Everything about the task Status, priority, owner, labels, subtasks and comments in one panel.
3. Result Tick off a subtask Subtasks check off in place and are struck through, so progress is visible to the whole team.

Light and dark

## Built for both themes.

A warm light theme and a full dark theme from the same tokens. Drag to compare.

Light Dark

Style guide

## Colour and type.

Read from the product's own design tokens: warm neutrals, one accent, and a colour for each task status.

Background

HEX #FBFAF8

\--bg

Overdue

HEX #B23C30

- Surface
#FFFFFF
\--surface
- Text
#1D1C1A
\--text
- Accent
#4B5BD6
\--accent
- In progress
#C88A14
\--st-progress
- Review
#7652C2
\--st-review
- Done
#2E8456
\--st-done

Geist

- Regular
- Book
- Medium
- SemiBold

Every screen

## The full product, desktop and mobile.

Real screens from the live demo, with demo data.

- Workspace home
- Projects
- All tasks
- Home on mobile · My Tasks on mobile
- Calendar
- Inbox
- Timeline

Engineering

## One set of tasks behind every view.

The same tasks appear as a board, a list, a calendar, a timeline and each person's own list. Company and personal modes, search, and project, team and member views share one navigation. Add the stack details once your engineer confirms them.

- Board and list views
- Calendar and timeline
- Inbox for mentions and updates
- Company and personal modes

Outcomes

## Designed for teams that want less chasing.

What the product demonstrably does. Measured business results will be added only with evidence and approval.

- ### 1.8K+ stars on GitHub
We open-sourced the app, and developers have starred the repository more than 1,800 times.
- ### A clear list for everyone
Each person sees what is overdue, due today and coming up.
- ### Risk is visible early
Projects at risk and overdue tasks stand out on the home screen.
- ### Updates without the chat
Comments, mentions and status changes collect in one inbox.

## Building a product your team will live in?

Gr8r helps teams turn complex workflows into clear products and working software.

[Discuss your product](https://gr8rstudio.com/contact)

## Next project

- [SaaSCRMCloseCRMA structured CRM for busy sales teams: tasks, deals, records and automation that reps can scan in seconds. Read the case study ](https://gr8rstudio.com/work/closecrm)
- [AISaaSSellerOSOne workspace for marketplace sellers: sales, stock, shipments and profit, with an AI briefing. Read the case study ](https://gr8rstudio.com/work/selleros)
- [AIFintechLedgerOSFinance operations where AI agents handle the routine work and people make the risky calls. Read the case study ](https://gr8rstudio.com/work/ledgeros)
- [ProcurementOnboardingVelunoSupplier onboarding with parallel reviews, documents, renewals and a supplier portal in one workspace. Read the case study ](https://gr8rstudio.com/work/veluno)
- [AIAutomationRelayA workflow automation workspace where AI agents run the work and people approve the risky steps. Read the case study ](https://gr8rstudio.com/work/relay)
- [DronesLogisticsSortieMission control for autonomous delivery drones, with a live 3D map of every flight. Read the case study ](https://gr8rstudio.com/work/sortie)
- [LogisticsOperationsAxleA fleet command centre for live tracking, dispatch, safety, compliance and maintenance. Read the case study ](https://gr8rstudio.com/work/axle)
- [HealthcareSaaSCendaraHealthcare claim denials worked to resolution: documents, appeals, reviews and payer replies. Read the case study ](https://gr8rstudio.com/work/cendara)
- [3DLogisticsLoadlineA transport operations platform with 3D load planning, dispatch and live fleet tracking. Read the case study ](https://gr8rstudio.com/work/loadline)
- [WebsiteTravelContrailFlight search where every flight opens a 3D model of its aircraft, so you choose your seat inside the cabin. Read the case study ](https://gr8rstudio.com/work/contrail)
- [WebsiteLearningKnowspaceA zoomable canvas of surprising facts, explored by topic, search and a small daily goal. Read the case study ](https://gr8rstudio.com/work/knowspace)
- [WebsiteWellbeingHinterlandAn illustrated mental health publication: topics, essays, short practices and a clear route to support. Read the case study ](https://gr8rstudio.com/work/hinterland)
- [WebsiteAgencyAtlasA design agency website told as a gallery visit, with old master paintings reworked as dot prints. Read the case study ](https://gr8rstudio.com/work/atlas)
- [UX auditProcurementVeluno UX AuditOur own supplier onboarding product, audited like a client’s: 13 findings, 3 high, and what to leave alone. Read the case study ](https://gr8rstudio.com/work/veluno-ux-audit)
- [UX auditHealthcareCendara UX AuditOur own claims product, audited like a client's: 12 findings ranked by impact, from sideways tables to hidden logins. Read the case study ](https://gr8rstudio.com/work/cendara-ux-audit)

Ask Ali