Journey to Turbo-Illustrations!!
So when I started with Turbohire, I was asked a question in my initial days “Do you like illustrating?”
Although I have never done that, I thought — “ehh how hard would it be to illustrate, I have been doing art since childhood”
and so, I said Yes to illustrate.
The brief was simple: The illustration should be humane and should bring life to the UI.
I started analyzing the existing illustrations to know why they are not fitting the brief that was given. The result of the analysis concluded three points-
- There were varied styles of illustrations on the platform.
- The Colours used were getting mixed with the UI and weren’t standing out.
- And the designs felt very rigid due to the use of sharp edges.
Adding Humane
I started creating these illustrations with mild humor, to remind the user to take breaks, added eyes and mouth to folders for adding cuteness, and used words like hurray and wohooo, for adding emotions to the illustrations, I thought it would make them more humane. PS: The pizza one was cute tho.
Although emotions were bringing joy and liveliness, the illustration style was still on the rigid side, the boxy approach was not able to bring out the emotions fully.
We gotta STANDARDISE!!
Sooner we ran into the concept of “Standardisation” — to make different things look like a part of one whole thing, we have to be consistent throughout the platform. We had various screens where we needed to convey some information and in some places, this information was not important, so we could take the liberty to add something else, but — for standardization, we had to take the hard decision of choosing one specific style.
So what should we go with?
When we balanced the type of screens, it tallied that we have more screens where we had to provide instructions to the user for how to use the specific page and it would be better if we can use illustrations to convey those instructions. And so we choose “Informative” as our style.
Along with style came Consistency. To create consistent illustrations the new designs were created within defined frames, the main elements used were either icons or shapes, and flat colors were used.
Shhh!!! Colors can speak too
Red for Error, Green for Success, Blue for New Additions, and Grey for Emptiness.
Pretty much self-explanatory, how colors can be related to emotions and help communicate the message. And so these colors were decided for particular types of illustrations.
Now our illustrations were set and defined, all we need to do was to make them look good. Experiment begins —
Let’s do it again
Wait WHAT!!
Now that we know it, we can do better. — Oh Yes We Can
This time I organized my process well — I did my secondary research, made inspiration boards, did the trend study, and went out for more inspiration. Yes, I took my sketchbook and went out for a walk. Sat on a park bench and sketched ideas for the illustrations.
Work SMART, Not HARD
Once I started building on these initial ideas, I figured out how to pace up the creation of these illustrations. I searched for illustrations on the Figma community and picked elements that matched my ideation and started creating compositions. Now that so many assets were available to me, more detailed & clean compositions started forming.
How we approached this time —
As most of our pages are empty when a user starts, We focused on completing the empty states and created single illustrations for the success and error states.
This time the illustrations were the product of our learnings, they took lesser time to create, looked consistent and clean, and they were well composed.
Adding a Dash of Life!
As these illustrations got implemented to the platform, although it was fulfilling its purpose, something felt like misssingggg. After staring at the screen for hours and having various discussions, we figured we were missing the element of “Life” they looked rather dull.
Suddenly after we were introduced to “3D illustrations” an emerging trend. They are bright, add dimension, and most importantly they had what we were looking for “FUN”. And so the drill begin again, it took us half a month to create our final Turbo-illustrations.
At last, all our learning from the past came with help. Now it seems difficult to imagine the platform without these. Special Thanks to the incredible design community for making things accessible.
