Teamwork.

wiggle.png
 

Teamwork build software to help teams across the globe achieve more with project management and communication.

With an already established rebrand in the works, Teamwork approached me to help them develop a style and build an illustration system that could help the Teamwork product could thrive.

Here I have put together a background look at how I build this new style.

 
TW1.png
 

Some of the first styles I explored and shared with the team

Some of the first styles I explored and shared with the team

EXPLORATION

When Brad McLean and I first started chatting about the brief and what it was we were going to tackle for Teamwork I knew it was going to be a huge but super inspiring project. The needs outlined by Brad in those early calls and emails were very much centred around building a style that not only complements the shiny new rebrand that was underway but that it elevated the product all together, using illustration, iconography and even some motion should help users, those assets should build a users confidence and help them better their experience within the range of Teamwork products.

This means we had to be friendly without being condescending, approachable without being childish, informative without being over complicated. It was a huge task but from the very first email I was hooked, ready to build something incredible with this amazing team. I began with a few weeks of research, brief breakdown and style exploration.

 
From IPad to illustrator, how we arrived at Jenny

From IPad to illustrator, how we arrived at Jenny

 CHOSEN STYLE

After a good few days of back and forth on one of the hand drawn styles I'd played with using the illustrator app on the IPad Pro we landed on a style that me, Brad and the entire TW team fell in love with. Meet Jenny! Our first Teamwork illustration!

The right-hand illustration was the one that hit the mark, I used the IPad to create some rough, hand drawn lines that created a super unique and lovable style, I then dropped those lines into the full illustrator app and went to work refining the details.

Coupling the hand drawn style with all of the benefits of vector editing was a huge benefit, this meant all of the illustrations could be edited quickly, easily accessible by the team and most importantly could be scaled up or down infinity without any pesky raster issues.

PROCESS AND REFINEMENT

Body type sketches and IPad experimentation

Body type sketches and IPad experimentation

Now we had our style in mind, I needed to spend some time getting to grips with the process. Understanding how I would take a concept as complex as ‘dedicated customer success’ and use this process to create a simple, effective piece of imagery to convey such a complex message was quite a thinker. Brad had already started to build a colour palette for the new brand which he was experimenting with on the product design side of things so we worked together a lot to build a palette that would work seamlessly across product, marketing, brand, print and illustration.

Next I started to build out a range of characters, lots of diversity, lots of body shapes, lots of characteristics. This is probably my favourite part of any project! We refined a few details such as the heavy stroke width used for the facial details, after building some beginnings of an illustration guideline template we started to see the world coming together.

Some small changes to stroke width, colour and shape to move away from the ‘cartoony’ vibe

Some small changes to stroke width, colour and shape to move away from the ‘cartoony’ vibe

First batch of Teamwork characters using the newly forming illustration guidelines

First batch of Teamwork characters using the newly forming illustration guidelines

 

PURPOSE

As I mentioned earlier, it was an important note from the beginning that the illustrations help to elevate the user and the product. My next step was to work out how Teamwork uses UI elements within illustration in order to support the user when needed. We wanted illustration to be used purposefully, to take opportunity to build, never just decorate a blank space.

How UI elements are used to support the user within the Teamwork products.

How UI elements are used to support the user within the Teamwork products.

 

BUILD

So, now it’s time to build the huge library of Teamwork illustrations, I started with the site, helping people work out what Teamwork does, how it can help and understand how to utilise the product in a way that can benefit everyone.

After that I built a set of illustrations for the products including empty states, help prompts and iconography.

AARGH.png
 
 
 

WEB ILLUSTRATIONS

Cross product integration

Cross product integration

Easily manage resources

Easily manage resources

Organise your workspace

Organise your workspace

Teamwork Webinar

Teamwork Webinar

Product suite

Product suite

404

404

CRM

CRM

Exceed client expectations

Exceed client expectations

Teamwork Spaces

Teamwork Spaces

CRM webinar

CRM webinar

Take a tour

Take a tour

Teamwork Desk Process

Teamwork Desk Process

 

PRODUCT ILLUSTRATIONS

Reading list up to date

Reading list up to date

App and media Integration

App and media Integration

Team upgrades

Team upgrades

High-five

High-five

Conversations up to date

Conversations up to date

No team members

No team members

Create a conversation

Create a conversation

Your free trial has expired

Your free trial has expired

No search results

No search results

Payment failed

Payment failed

No companies

No companies

Notification

Notification

ICONOGRAPHY 

 
Iconography used throughout the web and apps

Iconography used throughout the web and apps

vsdvbs sdfjkvbnweibfweyuicfbin

cuiqwsncwenccdcsdcvsdcsdcdsczxmcbnsdfjk;vnae

- Leanne King, Teamwork

vsdvbs sdfjkvbnweibfweyuicfbi

ncuiqwsncwenccdcsdcvsdcsdcdsczxmcbnsdfjk;vnae

- Brad McLean, Teamwork