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 – Time Tracking

Business

B2B SaaS

Duration

4 years

Role

Lead Product Designer

Areas

Team Lead, Research, Strategy, UI, Copy

Hampus Svallfors
Digital Product Designer

Work

About me

Resume

Contact

Hampus Svallfors
Digital Product Designer

Work

About

Resume

Contact

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

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.

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

Our user centric process starts with consolidating all sales, support, product and marketing channels into Productlane. Everything gets reviewed and linked to projects or tickets in Linear. We are 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

The new Memory tracker for Timely desktop app for Mac, Windows and Linux, built with Tauri, utilizing the best of native recognizable patterns with a custom cross-platform shell.

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.

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 talented product designers, handling everything from writing the ad to screening, interviews, and creating a thoughtful design challenge that respected their time and avoided any "free work" concerns. I focused on being a mentor—aligning them with our culture, supporting their personal growth, and balancing creative freedom with maintaining product consistency. Unfortunately, a strategic shift led to their teams being discontinued, but I’m proud of the work we did together.

🔥

Improving the app onboarding with a redesigned desktop experience

Our desktop tracker is a critical step in Timely’s onboarding process, but the old installation flow was a nightmare—full of dead ends that stopped users from accessing the core value of the app. We rebuilt it using Tauri, blending native OS patterns with a clean, streamlined shell. We tackled all the blockers—making permissions clearer, automating account connections, and adding solid self-help tools. The result? Double the successful installs, a 50% jump in short-term retention, and 113% more trial conversions. A huge win for the team!

💙

I love translucent color tokens

Modern gray-scale interfaces often suffer from inconsistent contrasts, where buttons blend into backgrounds as surfaces shift from white to gray when hovered or selected. This lack of clarity frustrated me, as it compromised both usability and aesthetics. To address this, I explored translucent color tokens that allow surfaces to stack, preserving contrast and structure without needing multiple surface variants. It took time to get the values right, but now most components in Timely use translucent color tokens—and it feels great.