Timesheet · Toggl 2.0
Five months on one surface.
The timesheet kept getting more complicated. The interface didn’t have to.
From an MVP time-entry surface to grouped rows, deeper hierarchy and richer summaries, I kept evolving the Timesheet as its complexity grew — using research, product critique and production prototypes to decide what users needed to see, and when.
- one surface, from a flat grid to grouped hierarchy
- 5 months
- task, project, client, and client & project
- 4 levels of grouping
- grouped views open collapsed and expand one at a time
- 1 level per click
- shipped to web and desktop in August 2026
- 2 platforms
Role
Senior product designer
Timeline
Mar–Aug 2026 Research Apr Grouping merged 12 Aug
Team
Product manager Front-end engineer
Platform
Web · Toggl 2.0
In short
- The problem
- The Timesheet began as a flat weekly grid: one row per task, seven cells, a total. Every capability added after that — grouping by project, by client, by client and project — made the surface more useful and more crowded at once. Deeper hierarchy was being asked to read as simply as the flat grid, and the PM’s verdict was the honest one: “It feels very dense.”
- Who it was for
- People who fill in a weekly timesheet for an employer or a client. They enter time far more than they review it, and the friction they name is finding the right row, not the number of rows.
- What I designed
- A rule set rather than a redesign. Research fixed the entry model first: inputs stay immediate, grouping organises without gating. When hierarchy deepened, the interaction took control of depth — grouped views open collapsed and expand one level at a time — while a neutral light-to-dark tier system, tree guides and smaller log text made each level legible. Built and tested in the product itself, negotiated in the open, then cleaned into the PR that merged.
- What shipped
- Grouping by task, project, client, and client & project shipped to Toggl 2.0 on web and desktop in August 2026. Roll-ups and the responsive work followed on the same principle.
Process
One surface. Researched, grouped, tested in the product, shipped.
- 01 — ResearchScreener + moderated testing set the entry rules
