Product illustration workshop with Ryan McCullah!
What are product illustrations? Illustrations are commonly seen in digital products these days, and it is a visual representation of a text explainer, a process that the product wants to convey to users. The Design Associates were curious about usage of illustrations and how to create a great one, so we reached out to our illustration expert in our company - Ryan McCullah.
Ryan is the Senior Design Director who has been working at Yahoo for 7 years. He leads the effort to unify Yahoo’s products with a singular design system and curates a branding new illustration style. Known as an expert for visual design thinking and inspiration, we invited him to share his knowledge with us. Thanks Paopao for organizing the workshop and making it happen!
Here are some of our learning from the workshop:
The power of illustration
“Illustration is changing how we use technology”
When designing for users, it’s very important to understand their state of mind when they are using our products. In some cases, users can easily get the core idea of the product; but in other cases, products can scare users - thinking about the dropping stock market or the upcoming 2020 election result. Compared to the cold digits or scary headlines, hand-drawn things are warmer and more familiar to people. They can help lower the defense, calm fears, and make things easier to understand. Using the illustration at the right moment helps to deliver the right information in the right context.
When it comes to technology, most people stick with the first product they truly understand, simply because they don’t want to go with another learning curve. Many products may seem easy and simple to us as designers because we spend hundreds of hours working on them. However, to our audience, these products can be rare and foreign concepts, which are hard for them to understand. That’s where illustration can really play a big role in making it more understandable and approachable.
Additionally, illustration also reminds people that there are real people with real emotions that build the products to make their lives easier. That level of connection is proved to be a huge differentiator, or even an expectation that our users have. More and more people are expecting to use the products that have humans involved.
“Essentially, illustration gives technology a soul and we need to show more of our soul. “
That being said, this is a big chance for Yahoo, as we are a nostalgic brand that started out 25 years ago. Back in the days, we had been really nothing but full of soul and personality. We were unexpected and weird, but that was a part of our success in those early days.
To empower your illustration
The most challenging part of making a successful illustration is less about the style and more about finding the right metaphor for it. For example, this lady is connecting with a different self using VR/AR technology without the constraint of time and space. The illustration conveys the vividness and boundlessness of a VR/AR experience.
How can designers use these fun and surreal illustration metaphors to express ideas and concepts clearly?
Icons are great for conveying what people need to know. For example, press this icon, and it will send an email; or press this icon, it will share the story. Icons are pure utility, but in terms of bringing feeling to the products. Illustrations are the most potent and powerful tool.
Here is an example of an idea between the brain and the heart:
With an illustration, the idea of letting users know something and feeling something is the sweet spot where those two can overlap.
Eventually, the two approaches to using illustration effectively in products are:
1. Make the abstract familiar
Technology is the perfect playground for this. As moving more from the offline world to the online world, it is easy to forget that most of the audiences might not be very familiar with the technology. So it is important for designers to work hard to make their products approachable and familiar.
2. Recalibrate user emotions by using illustrations
There are various points in any product experience: where the users can become discouraged or any kinds of adverse reactions, where something is not working the way it should be, or whether there is an outage. Users' emotions can quickly change from an optimal state of mind to being upset and discouraged. It would be the point where there is just a nanosecond before the users close the app, close the site, or move on to something else. What can designers do at that moment to lift the users from discouragement to happiness? It is where illustration comes into place and acts as a powerful tool to evoke emotion and lift spirits.
Our try-out
After Ryan shared some background story , he gave us two small exercises to practice our illustration muscle. Let’s take a look at how we did!
The 1st exercise: Make the abstract familiar
Finding the visual metaphor.
Use real world objects and/or people to explain how you collect points using the Starbucks app to buy coffee.
The 2nd exercise: Recalibrate user emotion
How can an illustration levitate emotional state of mind back from negative to optimal?
Without words, draw what would go under the words “Sorry we’re closed” for a sign in a store window.
This is the first creative workshop we held as the Design Associate Program, it’s a great start! ! We’ve learned the importance of product illustration, and get some taste of it under Ryan’s guidance Thank you again, Ryan!
P/S: Thanks Ashlynn Tan for copy feedback!