← Back to all workProduct Design · Design System

DOOS

One workspace for a team's tasks and time — calendar, reminders, time-tracking and Trello-style boards folded into a single product, web and mobile.

Role
Sole Product Designer (design only)
Client
Freelance — internal team tool
Platform
Web · iOS
Duration
3 months — concept → product + prototype
Year
2021
DOOS on web — projects with nested tasks, status, tags and due dates
DOOS on web — projects with nested tasks, status, tags and due dates
01
The brief

A problem, not a product

In 2021 a client found me on a freelance platform with a team that was losing the thread — who was doing what, and how long it took. He needed to see every task at once,by day, by week, and by month, to read how busy the team actually was; to handle the time each task took; and to surface what was urgent. He arrived with a rough concept. I took it from there to a working product and prototype.

02
The reframe

From "which app" to "why not one app"

His instinct was a single, focused tool. But when I mapped the requirements, they weren't one thing — they were four describing the same work from different angles: acalendar, reminders, time-tracking, and aTrello-style board. So the question flipped. DOOS became one workspace that folds all four into a single place — the same tasks seen as a list, a calendar, or a board, with time tracked against them — on web and on mobile.

03
The model

One set of data, three ways to read it

The team's real need was a glance, not a feature list. So the spine of DOOS is three views of the same tasks: a list for detail, a calendarfor load over time, and a board for status at a glance. Priority lives in status and tags; time lives in an integrated timer and a work-versus-break report. One model, several lenses.

List view — tasks with status, tags, filters
List view — tasks with status, tags, filters
Calendar — workload over a week, colour-coded by type
Calendar — workload over a week, colour-coded by type
04
The hard part

A full calendar on a 2021 phone

The calendar was generous on desktop and merciless on mobile. A week or a month grid wants room, a phone has none, and in 2021 there was no settled pattern to borrow. The answer was to let the screen choose its scale — Today for focus, then3-day, Week and Month as you zoom out — each re-flowed for one thumb, every event still carrying the same colour so a glance reads the same at any scale. Making that legible on a small screen, that early, is the part of this project I'm proudest of.

Today
Today
3-day
3-day
Week
Week
Month
Month
05
On the phone

Status, time, and one-gesture actions

The board carries status — To do, In progress,Done — and on mobile it stacks into a single column with tap-and-drag. A start / stop / break timer runs against any task and surfaces in the status bar, and swipe-to-reveal keeps the common actions one gesture away.

Board — colour-coded columns, stacked for mobile
Board — colour-coded columns, stacked for mobile
Timer — work and break against a task
Timer — work and break against a task
Swipe-to-reveal — common actions, one gesture
Swipe-to-reveal — common actions, one gesture
The design system

One language, every surface

Across three views and two platforms, one system holds it together. Four colours carry state and category, and they keep their meaning whether they appear as a status, a tag, a calendar block, a board column, or a slice of tracked time. Build a task row once and it slots into every view — that consistency is what let a product this broad still feel like one thing.

Colour is the index

Coral#EF5736
Brand · To do · break time
Blue#1A84F3
In progress · meetings · work time
Green#34C759
Done · scheduling
Amber#E4B91C
On hold · category accent

One token, four components

The same value — Blue / In progress — across the product. Same hue, four components, zero re-learning.

Status
In progress
Calendar event
Meeting · marketing
Board column
In progress
Tracked work
Work75%

The component library

Status
To doIn progressDoneOn hold
Tags
#urgent#designteam
Task row
Finish QA HTML gamesIn progress
Board columns
To do
In progress
Done
Timer · work / break
25:00
Work75%
Break25%
Calendar event blocks
MeetingSchedulingQA taskOn hold
Reports — the same colour language rolled up: work vs. break time per task
Reports — the same colour language rolled up: work vs. break time per task
06
The outcome

The internal tool that became a business

DOOS shipped as an internal tool for the client's own team. He liked living in it enough that he stopped thinking of it as internal — he took DOOS to market as a product, and ran with it. Built to organise one team; it became something he sold. Delivered end to end in three months, concept to working prototype, as the sole designer on the project.