Case study

Rethinking digital invoicing & creating a design system

I worked on the redesign of the invoicing module for which I made interactive prototypes and the design of the Teamleader Marketplace. I also helped with the overall redesign of Teamleader.

Rethinking digital invoicing & creating a design system for Teamleader


Project for Teamleader where I worked as a Product Designer between Feb 2017 and Oct 2017. I worked on this project for about 2 months.

My responsibilities

  • UX & UI design

  • Prototype development

  • Assist user testing

  • Visual Design


  • Sketch

  • Abstract

  • React prototype

  • GitHub


Teamleader is a SaaS scale-up founded in 2012. They offer an all-in-one platform for CRM, sales, project management and invoicing, helping more than 11,000 SMEs work smarter.


I started at Teamleader as the only designer, as the previous designer went for a different role in the company. I had the opportunity to work on different new features and start with setting up a design system.

This is an non-exhaustive overview of projects I did at Teamleader:

Teamleader Marketplace

I designed the Teamleader Marketplace from scratch, a central platform that allows users to browse through all available integrations with Teamleader.


Another significant project I had the chance to work on was the redesign of Teamleader's invoicing module. Back then, users reported a lot of problems with that module. My task was to redesign the module to make it more user friendly and accessible.

Calendar and time-tracking

Time-tracking is a crucial feature of Teamleader. The goal was to make it easy to track time and to provide insights.

Teamleader CRM visual

Design System

When I started working for Teamleader, the UI wasn't consistent at all, there was no single source of truth, it looked outdated and there were a lot of accessibility issues. The redesign of the invoicing module was an an opportunity for me to completely rework Teamleader's interface and start building a design system - what eventually became Teamleader Ahoy.

Coded prototype

I've made multiple realistic prototypes (based on screens I designed) in code that feel real to the user. I've started creating prototypes in code (from - React - components) because of the confusion some users had when conducting user tests with image-based prototypes. Users usually felt lost when doing these tests: "why can't I click here", "why can't I select a value", ... In my experience, building prototypes in code with a design system that is in sync with the codebase, is much more time efficient.


Bulk actions on the invoice lines in the initial interactive prototype I made.


Some invoice line micro interactions that I designed directly in code (React).


You can read more about my process on Intuo's Conversation Redesign case study.

End result

Here is an overview of some screens I designed for Teamleader, divided per category.


First iteration of the new invoicing overview design and the redesign of the Teamleader interface.


Final iteration of the new invoicing overview design and new visual language.


Style guide of Teamleader, the first step towards Teamleader's new design system.


Create a new invoice.


Detail view of an invoice.