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](http://images.ctfassets.net/pf9dgi4r6y0i/5vPF60YLyr5Tlp8g7z015K/baa77fcb8ad8cb6231e5ccfe157053d8/teamleader-invoices.png)
About
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
Tools
Sketch
Abstract
React prototype
GitHub
Overview
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.
Project
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.
Invoicing
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](http://images.ctfassets.net/pf9dgi4r6y0i/2XBOLSmkC2URGPEuae3rAj/1eea22453a207581de51c1dee225cf51/HQ_Homepage_VideoThumbnail_2021-06-02-114241.png)
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.
![undefined](http://images.ctfassets.net/pf9dgi4r6y0i/4DAy9IMKhG055rVjObqUoc/2dcdc4d3e6080a39a1465627fd47ad96/quick-actions-2.gif)
Bulk actions on the invoice lines in the initial interactive prototype I made.
![undefined](http://images.ctfassets.net/pf9dgi4r6y0i/EQdV6XVzkJnC3ozrGjkvO/7616b52bbb5015939f9249648c62c01d/micro-interactions-2.gif)
Some invoice line micro interactions that I designed directly in code (React).
Process
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.
![undefined](http://images.ctfassets.net/pf9dgi4r6y0i/2yxQMOMdLtNKPutucsh0JQ/dcc471a0cec5174597e572f78140ee6b/Group_1028.png)
First iteration of the new invoicing overview design and the redesign of the Teamleader interface.
![undefined](http://images.ctfassets.net/pf9dgi4r6y0i/AOnAxMBss0nax7uPlb4Ro/d3e634320214979477d74a68d24d95d1/Group_1028-1.png)
Final iteration of the new invoicing overview design and new visual language.
![undefined](http://images.ctfassets.net/pf9dgi4r6y0i/2AVlml64UyP45YgoUeuY32/187b0edc42df7716776ee0b576e152c5/Group_1029.png)
Style guide of Teamleader, the first step towards Teamleader's new design system.
![undefined](http://images.ctfassets.net/pf9dgi4r6y0i/765k1gyxpY8R9Rbfnd8JtA/d0f292fb33c513d6e02468b2ab1fc111/INVOICE-CREATE.png)
Create a new invoice.
![undefined](http://images.ctfassets.net/pf9dgi4r6y0i/4Dxkd25kniMYOurD1z964P/74ca29efb5b8bb13d3f42eabb64d9379/INVOICE-SHOW.png)
Detail view of an invoice.
Check out other projects
Building an online real-estate portal from scratch
This case study will focus on the redesign of the search system of Realo. I had the chance to join this start-up prior to the launch of the product.
Optimising employee training to help them grow
The goal of that project was to redesign Intuo's employee training platform.