Teamleader Focus

Work management system

Improved search and filtering, contributed to Ahoy design system, work orders flow for web and mobile, copy guidelines and more

ux, research, visual, interaction × 2019 – 2021
  • 2 years
  • Main contribution: New filtering functionality and global search concept, work orders for web and mobile, set up copy guidelines, upgrade flows, worked on Ahoy design system
  • focus.teamleader.eu

At Teamleader I was working on Teamleader Focus, a work management software for entrepreneurs with 1 to 20 employees who want to save time, work more professionally and grow. More business, less hassle.

When I joined, the product was going through change: the customer base grew, the development faced a lot of legacy code, the UI was in many areas outdated. In a word: challenging.

The most challenging part of working in Teamleader was finding my own voice and ways to improve our users' experience while balancing the business needs and development capabilities. I grew. A lot.

I was involved in a variety of projects during my work on Teamleader Focus:

  • contributed to design system: added components, icons, and documentation
  • search and filtering was my biggest project: from data analysis to user research to design iterations to test to finalizing designs to supporting development team;
  • improving copy and writing guidelines on messaging was my "ownership" project (every designer had to had one);
  • other impactful work and miscellaneous artefacts created while working at Teamleader.

Additional details of my work on Teamleader Focus application can be presented upon request in person.

Design system

Contributed to Ahoy design system

  • made a number of web components, such as filters and selects
  • documented the existing components
  • created mobile component library

Below is example of the list components, work in progress

Example of the list item component

Icons for special flows

Icons

Work orders

A work order is a task or a job for a customer, that can be scheduled or assigned to someone.

In Teamleader this functionality mostly targeted at customers from the Builders segment. That means there are two main use cases: for people who create a work order and people who execute it. The execution often happens somewhere else which means the work orders functionality is often used on the mobile device.

Challenge

Because the mobile use case was so dominant, for a long time Work Orders were not even a part of the web app. A bulk of research was already done, I didn't need to conduct any additional testing or interviews. When I joined the team, I was working on three things:

  • introducing work orders on the web, so that people from the back office could keep track of the work orders
  • improving mobile flows
  • moving mobile designs to Figma and creating the mobile UI components for the design system.

Introducing work orders for web

It was a very straightforward idea: put the overview of all work orders and the details of each into the web app.

Adding and editing flows are also available on request.

Improvements for mobile

One of main improvements was to link a work order with a meeting. Our users needed to create a work order from existing meetings, and we offered them such possibility. This flow doesn't show how to add the details of the workflow, rather adding a work order to a meeting.

It also demonstrates how to show deleted customer and changed statuses of the linked work order.

In the meanwhile I also had to move all the mock-ups from Sketch to Figma. Along the way, I was adding UI components to the design system.

Copywriting

Every designer in Teamleader has to pick the ownership project, a subject to improve upon, so that if other people have questions on it they would come to you.

My ownership project was copywriting.

As a part of that project among the UI guidelines I wrote guidelines for:

  • general copy,
  • error messages,
  • success messages,
  • empty states,
  • placeholders,
  • waiting time.

Other

Time tracking concept

Time tracking can definitely benefit from some improvements. This concept shows how it currently is, how it could be with only CSS changes (a realistic version), and how I would like to ultimately see it: a list and a calendar view.

Copy and rename quotations

Copying quotations along with renaming them brought a clear value to the users. They often wanted to send several different quotations to their customers and needed to name them properly.

Copy quotation became a part of the "Add quotation" flow: the users can choose if they want to create a quotation from scratch or based on the existing one.

Invoicing unbilled time

This was a tiny UI change – one additional column in the overview table, but it brought a lot of value to the users and good feedback to the team

UI and interaction improvements

  • table actions, adjustable column widths, adding and removing columns, drag and drop
  • responsive version of the web app
  • inline data editing

Team stickers ;)

Team Fraof