Changing illustrations, their purpose and style for a changing product
Illustrations in product design can be a useful method to communicate ideas and states to users. They can be the means to reflect the brand in the overall product.
So here in this post, I wish to showcase briefly some of the processes I went through, from exploration to realizing the visual style in its current form with the changing scope and requirements of the product.
Also keep in mind, when defining an illustration set, there can be two contexts in which product illustrations could play a role. namely :
1.Marketing and Communication
It could serve as a unifying element in marketing content to improve recognition as well as communicate the right ideas when used in the context of a landing page.
2.UI
Creative and engaging illustrations in error and loading screens could provide a more engaging way of communicating information than simply using blocks of text. At the same time, this cannot deflect attention from the rest of the important information.
Starting out
When we started work on a new product for goal-setting using OKRs(objective key result) last year, we wanted to start out first with a simple idea i.e. a Slack integration, which any slack user could simply plug and play. Being a plug and play integration tool, it would be mostly handled within the product and dev team, all we required in terms of design was a landing page to help promote the product in its current form and that's where my role began.
As part of the landing page brief which required to communicate the essentials of team collaboration and goal setting, I decided to go with a minimalistic illustration style, having in mind to reflect the simple idea of the product.
With its versatile pen tool, I was able to create the entire illustration set within Figma in addition to the design of the landing page.
A change in direction
Almost 6 months later, we had outgrown our tool, with a better understanding and a firmer grasp on OKRs than when we started. With all the feedback gathered from the initial attempt, we knew it was time to evolve our product in its operational scope from just a slack bot to also include a web app. This would become the new front-facing version of the OKR App.
This change in the direction called for an overall rebranding of the product, from changing its name from OKRbot to Amby( Further reading here ), updating the visual guidelines of the web app, which included an illustration style. I wanted to take a fresh look at the illustrations to fit the new direction that we were going forward with.
The process begins
After the initial exploration of the visual design direction, it was clear that we would retain the theme of humans and teamwork. So with this understanding, I began exploring a few different styles of representing this idea.
After a couple of iterations, we finally decided on a style that mimicked a watercolour painting. This gave us a broadened range of colour and texture to work with, which also provided the potential to represent the diverse global audience if need be.
For the next step to translate this illustration style digitally, I made use of the iPad and Procreate app, effectively enabling me to mimic the same effects I had achieved earlier on paper, thereby retaining its look and feel.
With the set of human characters defined, the set also required to have additional assets that could be used in the UI as part of communicating empty states(when there is no data to be displayed). Some of these can be seen below:
Conclusion
Although arriving at the current direction was a lengthy process, it was a fantastic experience. Seeing our work be realized in multiple aspects of the product, from the landing page to the web app and even the marketing material felt great. To add to that, the positive feedback we received from early users and the team itself makes the effort all the more worth it.
