Skip to content

Timesheet · Toggl 2.0 · Web app

Toggl 2.0Toggl 2.0

One surface, still evolving.

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
    4 levels of grouping
  • that set the entry rules
    801 research responses
  • across my merged PR
    +2,405 lines added
  • in the shipped implementation
    31 files touched

Role

Sole product designer

Timeline

Mar 2026 – ongoing

Team

Product manager Front-end engineer

Scope

Research → UX → UI → merged PR

In short

  • The brief
    Bring Timesheet view from Track to Toggl 2.0 — an existing capability on a new surface and data structure — without making the Timesheet harder to scan or enter time into.
  • What I designed
    A hierarchy system, not a redesign: grouped views open collapsed, expand one level at a time, and read through neutral tiers and quieter log text.
  • The approach
    An 801-response screener and moderated sessions first, then live prototypes in the product on realistic data, worked through with the PM and engineer into my final PR that got merged.
  • What changed
    Four levels of hierarchy shipped to web and desktop in August 2026 — 31 files, +2,405 / −149 lines — and the same rule carried into roll-ups and responsive behaviour.

What shipped

Four ways to group the week, and depth only when you ask for it.

Process

One surface. Researched, grouped, tested in the product, shipped.

  2. Four levels of one grouped week — client, project, task, time log — every row in the same treatment02 —DiagnoseFour levels, one visual treatment
  3. The density console: neutral tiers, compact logs, tree guides and quieter log text as live switches03 —ExploreVisual hypotheses as live toggles in the product
  4. Three merged pull requests04 —ResolveExperimental PR → production PR → engineering review
  5. The squeezed sheet: the day columns clipped at Wednesday with the totals column pinned05 —ExtendRoll-ups, responsive behaviour, more capability
  6. The shipped grouping: Group by Client & project, and the four levels on neutral tiers with compact, quieter logs06 —ShipFour grouping modes · 31 files · PM + engineering review

The locked chapters

Some of the best parts aren’t public.

The full studies include deeper research, decisions, and outcomes from the work. One password opens all of them.

Ask me for a password via email or LinkedIn — also happy to walk you through them live!

More case studies

OROOM
Case studyThe hotel already had the trust. The website didn’t.Web design · hospitality
Toggl 2.0Toggl 2.0
Work gallerySole designer for the first MVP of the browser extensionBrowser extension · sole designer
Toggl 2.0Toggl 2.0
Case studyI didn’t prototype the screens. I prototyped the product.Product design · sole designer
Toggl Track
Case studySimplifying the timer without simplifying away what mattered.Mobile · iOS and Android