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.

TW1.png

EXPLORATION

I had chance to work with Brad McLean, Teamwork’s lead designer on this 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 rebrand but that it elevated the product all together, using illustration to help users feel confident and welcome in the Teamwork universe.

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

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

 CHOSEN STYLE

After some exploration, we landed on a style that me, Brad and the entire TW team fell in love with.

I used my 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.

From IPad to illustrator, how we arrived at the chosen style

From IPad to illustrator, how we arrived at the chosen style

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.

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.

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