case study

Automated timesheets with
activity tracking and AI analysis

At Timely, we transformed the tedious task of time tracking into an effortless, AI-driven process, enhancing productivity and billing accuracy for thousands of businesses worldwide.

Company

Timely

Business

B2B SaaS

Duration

4 years

Role

Lead Product Designer

Areas

Team Lead, Research, Strategy, UI, Copy

Hampus Svallfors
Digital Product Designer
Stockholm, Sweden

Hampus Svallfors
Digital Product Designer in Stockholm

Hampus Svallfors
Digital Product Designer in Stockholm

Hampus Svallfors
Digital Product Designer in Stockholm

Timely

Automating time tracking

Timely was launched in 2013 to address the tedious and often disliked process of filling out timesheets. It uses an app to track your computer activities, making it easier to remember exactly what you did, which greatly increases accuracy. To reduce the still tedious nature of assigning time to projects, Timely utilizes various AI features to automate as much of this process as possible, ultimately allowing some users a 'one-click action' to log their entire week's work.

Timely

Automating time tracking

Timely was launched in 2013 to address the tedious and often disliked process of filling out timesheets. It uses an app to track your computer activities, making it easier to remember exactly what you did, which greatly increases accuracy. To reduce the still tedious nature of assigning time to projects, Timely utilizes various AI features to automate as much of this process as possible, ultimately allowing some users a 'one-click action' to log their entire week's work.

Timely

Automating time tracking

Timely was launched in 2013 to address the tedious and often disliked process of filling out timesheets. It uses an app to track your computer activities, making it easier to remember exactly what you did, which greatly increases accuracy. To reduce the still tedious nature of assigning time to projects, Timely utilizes various AI features to automate as much of this process as possible, ultimately allowing some users a 'one-click action' to log their entire week's work.

Timely

Automating time tracking

Timely was launched in 2013 to address the tedious and often disliked process of filling out timesheets. It uses an app to track your computer activities, making it easier to remember exactly what you did, which greatly increases accuracy. To reduce the still tedious nature of assigning time to projects, Timely utilizes various AI features to automate as much of this process as possible, ultimately allowing some users a 'one-click action' to log their entire week's work.

Established

Norway, 2013

Funding

$20 M

Customers

5,000+

An interface that is sleek and simple, yet surprisingly powerful and customizable to support the diverse needs and requirements of solo freelancers, SMBs, and enterprise workspaces.

My role

Lead Product Designer

While leading the remote product design team at Timely, I emphasized trust, ownership, and shared goals to foster a supportive environment and maintain a consistent app experience. My focus was on helping each team member grow personally and professionally.

Later as the solo product designer, I continued to enhance user interactions throughout the customer journey, with a special focus on AI-enhanced features that automate time tracking. My role involved daily remote collaborations, balancing incremental improvements and significant innovations for a diverse client base from SMBs to enterprise-level customers.

Our user centric process started with consolidating all sales, support, product and marketing channels into Productlane. Everything got reviewed and linked to projects or tickets in Linear. We were blessed with a steady stream of feedback and insights from all channels, however when things starts business first, I reach out and conduct interviews, as well as observing Fullstory and Amplitude to validate our hypothesis and to inform leadership about further risks or opportunities.

My role

Lead Product Designer

While leading the remote product design team at Timely, I emphasized trust, ownership, and shared goals to foster a supportive environment and maintain a consistent app experience. My focus was on helping each team member grow personally and professionally.

Later as the solo product designer, I continued to enhance user interactions throughout the customer journey, with a special focus on AI-enhanced features that automate time tracking. My role involved daily remote collaborations, balancing incremental improvements and significant innovations for a diverse client base from SMBs to enterprise-level customers.

Our user centric process started with consolidating all sales, support, product and marketing channels into Productlane. Everything got reviewed and linked to projects or tickets in Linear. We were blessed with a steady stream of feedback and insights from all channels, however when things starts business first, I reach out and conduct interviews, as well as observing Fullstory and Amplitude to validate our hypothesis and to inform leadership about further risks or opportunities.

My role

Lead Product Designer

While leading the remote product design team at Timely, I emphasized trust, ownership, and shared goals to foster a supportive environment and maintain a consistent app experience. My focus was on helping each team member grow personally and professionally.

Later as the solo product designer, I continued to enhance user interactions throughout the customer journey, with a special focus on AI-enhanced features that automate time tracking. My role involved daily remote collaborations, balancing incremental improvements and significant innovations for a diverse client base from SMBs to enterprise-level customers.

Our user centric process started with consolidating all sales, support, product and marketing channels into Productlane. Everything got reviewed and linked to projects or tickets in Linear. We were blessed with a steady stream of feedback and insights from all channels, however when things starts business first, I reach out and conduct interviews, as well as observing Fullstory and Amplitude to validate our hypothesis and to inform leadership about further risks or opportunities.

My role

Lead Product Designer

While leading the remote product design team at Timely, I emphasized trust, ownership, and shared goals to foster a supportive environment and maintain a consistent app experience. My focus was on helping each team member grow personally and professionally.

Later as the solo product designer, I continued to enhance user interactions throughout the customer journey, with a special focus on AI-enhanced features that automate time tracking. My role involved daily remote collaborations, balancing incremental improvements and significant innovations for a diverse client base from SMBs to enterprise-level customers.

Our user centric process started with consolidating all sales, support, product and marketing channels into Productlane. Everything got reviewed and linked to projects or tickets in Linear. We were blessed with a steady stream of feedback and insights from all channels, however when things starts business first, I reach out and conduct interviews, as well as observing Fullstory and Amplitude to validate our hypothesis and to inform leadership about further risks or opportunities.

I redesigned the Timely activity tracker for Mac, Windows and Linux, built with Tauri, utilizing the best of native recognizable patterns with a custom cross-platform shell. Extra focus on easy installation and guiding users through the required system permissions.

Designing in the age of LLMs

From skepticism to expectations

Timely automates the tedious parts of time tracking. Before ChatGPT’s 2023 breakout, most AI lacked inherent trust and needed careful onboarding and transparency. In consumer products like Netflix, YouTube, or Google, recommendations already felt natural. But in a B2B productivity context where employees and managers rely on accurate records, the bar for trust was far higher. From ongoing research, I learned users had to understand how a recommendation was produced; accuracy alone was not enough.

Our ML grouped computer activity into time entry drafts that users approved or rejected. The system improved with use, but it had an onboarding gap. New customers often saw few drafts during their trials, meaning they rarely experienced the automation benefits in time. That gap hurt conversion.

ChatGPT reset expectations. People arrived with strong mental models and treated anything less as outdated. Manual approvals felt slow. Paradoxically, we no longer had to show exactly how conclusions were reached since default trust had increased. If results looked plausible, few users stopped to double-check. That shift created both opportunity and responsibility.

In this new landscape, we can ship automation that once required heavy trust building. But we also have to add guardrails so users are not harmed by confident errors.

At Timely we leaned in. Instead of recommending individual entries, we proposed whole days or weeks at once. We reused our proven ML pipelines and layered in LLMs for semantic matching and summarization. The impact was meaningful automation for new customers within minutes and new workspaces seeing value by day one. Links obvious to a human, such as a document and its project, became legible to the system.

When I left the company in 2025, a whole range of even more powerful AI features were already under development. I am genuinely excited to one day use them myself once they are released to the public.

New design system

Tokens-based and multi-level

I led the work together with the previous design and front-end teams to update the entire component and variable system I inherited from 2013.

I made the decision to make a multi-level system with shared tokens to power not only Timely's web interface, but also mobile and desktop native apps, as well as other business expansions that would utilize a different visual brand. This system was designed to be used by engineers moving between all products on a daily basis, requiring consistency and recognition between code bases.

The design system has a code-first source of truth, with components built with React, incorporating Radix, TanStack, and Shadcn. The color palette was created using a custom tool built with Leonardo by Adobe, for maintained contrast values a gorgeous shades and tones built around the established 2013 visual brand.

New design system

Tokens-based and multi-level

I led the work together with the previous design and front-end teams to update the entire component and variable system I inherited from 2013.

I made the decision to make a multi-level system with shared tokens to power not only Timely's web interface, but also mobile and desktop native apps, as well as other business expansions that would utilize a different visual brand. This system was designed to be used by engineers moving between all products on a daily basis, requiring consistency and recognition between code bases.

The design system has a code-first source of truth, with components built with React, incorporating Radix, TanStack, and Shadcn. The color palette was created using a custom tool built with Leonardo by Adobe, for maintained contrast values a gorgeous shades and tones built around the established 2013 visual brand.

New design system

Tokens-based and multi-level

I led the work together with the previous design and front-end teams to update the entire component and variable system I inherited from 2013.

I made the decision to make a multi-level system with shared tokens to power not only Timely's web interface, but also mobile and desktop native apps, as well as other business expansions that would utilize a different visual brand. This system was designed to be used by engineers moving between all products on a daily basis, requiring consistency and recognition between code bases.

The design system has a code-first source of truth, with components built with React, incorporating Radix, TanStack, and Shadcn. The color palette was created using a custom tool built with Leonardo by Adobe, for maintained contrast values a gorgeous shades and tones built around the established 2013 visual brand.

New design system

Tokens-based and multi-level

I led the work together with the previous design and front-end teams to update the entire component and variable system I inherited from 2013.

I made the decision to make a multi-level system with shared tokens to power not only Timely's web interface, but also mobile and desktop native apps, as well as other business expansions that would utilize a different visual brand. This system was designed to be used by engineers moving between all products on a daily basis, requiring consistency and recognition between code bases.

The design system has a code-first source of truth, with components built with React, incorporating Radix, TanStack, and Shadcn. The color palette was created using a custom tool built with Leonardo by Adobe, for maintained contrast values a gorgeous shades and tones built around the established 2013 visual brand.

The color palette was created using a custom tool built with Leonardo, for maintained contrast values a gorgeous shades and tones built around the established 2013 visual brand.

Example of how a single translucent color token ensures consistent contrasts across UI layers, simplifying implementation for engineers without needing multiple surface tokens.

Personal highlights

Over my four years at Timely, I've had the chance to work on almost every aspect of the product. Here are a few aspects that I'm extra proud of being part of.

🥳

Recruiting and leading the remote product design team

I recruited two product designers—writing the ad, running the process, and creating a fair design challenge. As their mentor, I aligned them with our culture, supported their growth, and balanced creative freedom with consistency. Watching their confidence grow was a peak moment for me at Timely.

🔥

Supercharging onboarding with a redesigned desktop experience

The old tracker flow was full of dead ends, blocking users before reaching Timely’s value. I redesigned it for with guided system permissions, automated OAuth, and a modern cross-platform shell. The result: 2× installs, +50% retention, and +113% trial conversions.

💙

Translucent color tokens is the GOAT

Gray-scale interfaces often create muddy contrasts as components shift between hover and active states. I solved this by introducing translucent color tokens, letting surfaces stack while preserving contrast and structure. It took careful tuning, but now most of Timely’s components use them. It feels great and is so much easier to work with.

Overview of Timely components

All Case studies ↓

All Case studies ↓

All Case studies ↓

All Case studies ↓

Currently

Experience

15 years

Design prefixes

UX, Product, Digital, Service, Interaction

Currently

Experience

15 years

Design prefixes

UX, Product, Digital, Service, Interaction

Currently

Experience

15 years

Design prefixes

UX, Product, Digital, Service, Interaction

Currently

Experience

15 years

Design prefixes

UX, Product, Digital, Service, Interaction

Create a free website with Framer, the website builder loved by startups, designers and agencies.