Illustrating Emotional Connections
In this article, I want to share my experience of creating illustrations for AirBrush, the popular photo editing app used by over 1.6M people daily.
About AirBrush
- +100M Downloads worldwide
- +167K 5-Star iOS ratings
- US #9 in iOS Photo & Video app category
Background
I had some illustration experience in creating feature concepts, and storybooks. However, this was my first time using these skills on a real digital product.
Some examples of my illustration work:
As the lead designer of the project, I worked closely with a junior designer- Audrey who was talented in digital painting.
At the time, we were in the process of rebuilding the design system,
Although Illustrations are small design pieces, they play an important role to enhance the information presented in modals, creating a more engaging and visually appealing experience for users.
However, I noticed that the illustrations throughout the app were not effectively fulfilling their intended purpose…
So, the illustration here was meant to help user ease some of the frustration when they can’t edit their photos, right?
Well, I’m not sure if this little emoji eases any frustration..
Another example…
I have to admit, the emoji illustration style seemed a little off to me. It didn’t quite capture the emotions that we were aiming for.
Our Goal: Capturing Emotions
The main goal to create a photo editing product that not only allowed users to edit their photos, but also helped them to capture the emotion behind their images.
Because at the end of the day, photos are often more than just static images — they’re a reflection of our lives, our memories, and our emotions.
By using illustration to capture these emotions, we were able to create a more engaging and relatable experience for our users.
Whether it’s the feeling of joy and excitement when having a satisfactory editing result, or the frustration and disappointment when a feature doesn’t work out the way we hoped, emotions are an integral part of our photo editing journeys.
The emoji style was a quick and easy solution for us when we first started. However, as the product continued to grow, we realized that it wasn’t quite hitting the mark in terms of delivering the quality we wanted.
We wanted our illustrations to be more expressive and relatable, so we decided to switch things up and explore other options.
Finding Inspiration from Our Demographic
So, we decided to ditch the emoji style and try something new. But the big question was, what style should we explore? That’s when we turned to our users for inspiration.
Based on our user data, the main demographic for AirBrush was younger women.
So, maybe we could create feminine illustration themes that would resonate with them?
But wait! Creating that with different skin tones and races can be really complicated. Are we really going to do all of that?
Practical Approaches
We knew that it would be awesome to have feminine illustrations with different skin tones and races to make our app more inclusive.
But let’s face it, our team was small, and creating illustrations for every skin tone would have been a huge undertaking.
So, we decided to focus on being strategic and creating illustrations that would be relatable to our main user base while still being inclusive of diverse users.
To start, we decided to focus on creating and testing illustrations that represented 1 skin tone first.
This allowed us to ensure that our illustrations were consistent and cohesive. Once we established a strong foundation with this skin tone, we could then expand and explore other skin tones in the future.
Identifying the Skin Color
One option for selecting skin tones could be user data related to race. However, since we didn’t collect that information directly, we had to come up with another solution. So, the big question was, what should we do instead?
Maybe we could potentially look at the region with the highest growth and use that as a starting point for selecting the skin tone?
It’s could be good start. However, we also need to keep in mind that skin tone is a sensitive and personal issue. We should conduct further research and gather feedback from a diverse range of users to ensure that our choices are reflective of our user base and their needs.
According to our data, AirBrush has a strong presence in the Latin American market, with a significant user base in countries such as Brazil, and Mexico.
The popularity of AirBrush in Latin America may also be reflective of the larger North American market. The region has a sizable population of Hispanic and Latino individuals who might make up a significant portion of AirBrush’s user base.
Based on our analysis of user trends, Audrey began drawing skin tone references that were reflective of the Latin American and North American markets.
For the illustration composition, we chose to use the over-the-shoulder style because we wanted to highlight the playful and engaging nature of the facial expression.
Art Style Exploration
When we were exploring different illustration styles for AirBrush, one trend that we noticed among many tech corporations was the use of exaggerated proportion styles. This style featured characters with oversized torsos or limps.
While this style was certainly eye-catching, we weren’t sure if it would be the right fit for us. As a photo editing app, our main focus is on enhancing and improving real-life images, and we want our illustrations to complement this focus.
Another popular style that we considered was the 3D-like gradient style. This style used vibrant gradients and shadows to create a 3D effect that added depth and dimension to 2D illustrations.
3D-like gradient style might be a good direction for us due to its striking visual impact. However, its complex color palette and 3D effects could potentially be overwhelming and detract from the user experience.
While the 3D-like gradient style may have some downsides, we also recognized the benefits of using this style to create a sense of depth and realism in our illustrations.
By simplifying the color palette, we could potentially use the 3D-like gradient style in a way we expected.
Sketching Ideas
With the idea of using fewer colors, Audrey started to sketch several options based on our orange brand color.
By limiting the colors, we could create a cohesive look across all of our illustrations, while also keeping our design more streamlined and elegant.
Establishing the Color Palette
When it comes to creating illustrations that look consistent, it’s key to use the same main colors as the brand. According to Audrey’s color choices, we pick out more color combos that match the brand and then we add in some other shades, highlights, shadows, and different colors to make the illustrations look fine.
Iterating Character Styles
Audrey’s use of fewer colors resulted in a smooth and clean look that aligned with our brand aesthetic. The next challenge we faced was finding the right illustrative character style.
We knew we wanted something playful and engaging that would appeal to our younger female audience, but at the same time, we wanted the illustrations to be more mature and sophisticated.
Different Textures
During the development process, we realized that thick outline texture could be a sticking point.
Audrey started to experiment with a color block style that removed most of the lines from the illustrations. This gave the illustrations a more modern and mature look.
Tuning the Face Proportion
As we worked to refine our approach to the illustrations, I had an idea that I wanted to share with Audrey. I drew some reference images that showed an illustrative figure with a more geometric face proportion. I thought that this could help us get even closer to the look and feel that we were going for.
The use of geometric shapes helped to create a clear focal point for the character’s facial expressions, which was helpful in conveying emotion and personality.
Adding Details
Having some small details, like a pair of glasses, gave our illustrations a more inquisitive quality. It was a small change, but we felt that it would make a big difference.
Reflecting Emotions
As we kicked off the process of illustrating for emotional connection, our primary goal was to create designs that reflected the emotions of our users.
Examples of the different emotions that we aimed to capture with our illustrations include:
- 😃 Happiness & Excitement: These emotions are often associated with positive experiences, such as the editing results turn out great or the feeling before trying new features.
- 😒 Frustration & Hesitation: On the other hand, emotions like frustration and hesitation can arise when a feature doesn’t work out the way we expected. Additionally, users may feel hesitated when faced with unclear situations that require them to make decisions.
- 🙂 Neutral: Finally, users may feel a sense of calm when using AirBrush to edit their photos without necessarily attaching to any types of emotion.
Next, we developed a set of illustrations that addressed these emotions together:
Happiness & Excitement
We wanted our AirBrush users to feel happy and pumped up whenever they used the app, so we went all out with the design! We used a bunch of elements like pastel colors, sparkles, and hearts to make the app feel fun and playful.
Use Cases:
- Users unlocked a premium feature
- Users successfully built their customized tools
- We announce new powerful features
- We request users to rate the app
Frustration & Hesitation
No matter what, users will run into some errors or technical difficulties. That’s where illustrations come in! They’re important in helping people feel less frustrated by using visuals that they can relate to.
Use Cases:
- An automatic feature can’t process the input photo
- The feature is not available in certain regions
- Connection problems
Neutral
Making an illustration that shows a neutral emotion is challenging because a character with no expression can look kinda boring.
So to solve that problem, we came up with the idea of using objects that can work for all sorts of different editing tasks.
Result
The illustration project was a success with positive feedback from both stakeholders and users. The new illustrations not only added a fun and playful element to the app, but also made it easier for users to navigate and understand different features.
“I gotta say, these illustrations are pretty sweet! They make the app feel a lot more fun.
When it came to the design process, the new set of illustrations helped a lot in terms of getting our message across and making the app more engaging.
What’s Next?
It’s a bit weird to talk about what’s coming up next since I’ve already left the company, but when I was there, I thought it was important for the team to keep doing research on different skin tones and keep working on the character design as they got more resources.
Reflection
The project of making illustrations for AirBrush was fun and it definitely came with challenges. But it was a great opportunity to use my illustration skills in a fresh way!
Plus, I got to manage a junior designer for the first time and it was awesome to see her talents shine through and contribute to the success of the project!
