Visual language -
illustration system

Background

As part of Design system team, we introduced illustrations to our Desktop product - RingCentral Office as a start, with the hope of bringing more:

1. Visual language and personality to current product;
2. Delight and emotional connection with our customers;
3. Visual guidance in the product.

Inspiration

As I was browsing through tons of different product illustrations, I found something interesting that caught my attention: In Shopify’s illustrations, there is always a turtle shadowing next to a human figure.

Shopify is a platform that helps users to grow their own businesses and so does the turtle. It makes Shopify memorable and more fun to use. In this way, just like People will think of Geico when they see a lizard - people think of Shopify when they see the turtle.

I think this is a fantastic idea and a great way to bring personality to our products, also an opportunity to leap frog our competition by looking outside.

Create our own visual element
Since the goal was to bring a personality that's warm, delightful, and distinct to RingCentral - I gravitated to children story books to learn about how they made stories memorable through fun characters and storytelling skills. We were excited to include some of these cues that are grounded in real emotions like nostalgia for the past and happiness into our own illustration making.

Thus we created Thor, who will appear in all our illustrations to help create a more memorable and seamless experience. Similar to the Geico lizard, Shopify turtle - Thor will be our mascot that reminds people of RingCentral. She will help connect with users in delightful and unexpected ways.

Sketches
With the help of Thor, we created low-fidelity sketches. Keeping in mind that We use only illustrations intentionally to tell stories, capture the intangibles to make our product memorable and connected.

Internal workshop
With a fairly chunk of work done, we are thinking to test these sketches on our teammates.I flew to Xiamen, China to lead a workshop with our designers. I gave them tasks of finding their own inspirations and sketching out ideas.

It was exciting to see the teams’ whimsical ideas, but they were all different styles. People don’t necessarily have a shared vision. Their ideas and drawing styles lacked consistency. We can realize that this is going to be a problem if we want to scale the work. 

Guideline
After I came back from China, we started build the guidelines that will help circulate and scale, also can power our team members.

Interested in seeing more?
Here is a pdf of the complete guideline, feel free to check it out 🐕:

Learnings
This 6-month project has been a unique experience to me. Instead of focusing on doing interviews, reading data and iterate on user flows, I got to learn more about how to bake delight into the product with intention. I would like to dive deeper into the Illustration testing and see how users actually react to different styles of visual language if given the opportunity.

Here are some key takeaways I would like to share:
1. Guideline helps to execute high quality and consistent illustrations;
2. Component library aids to scale the work and create lasting value;
3. Adding delight intentionally in the product to create a sentimental bond with the users.