Enhancing Design Productivity: Illustration System
Enhancing Design Productivity: Illustration System
Enhancing Design Productivity: Illustration System
Sep 2020 - July 2021
Sep 2020 - July 2021
Illustrations play an important role in products, conveying brand identity, explaining usage, or adding a touch of fun to make users smile. However, creating illustrations can be very time-consuming for visual designers. Therefore, I designed an illustration system that breaks down illustrations into components, allowing designers to quickly assemble illustrations and increase their productivity by 40%. Additionally, this system standardizes the style of illustrations across products, maintaining brand consistency.
Illustrations play an important role in products, conveying brand identity, explaining usage, or adding a touch of fun to make users smile. However, creating illustrations can be very time-consuming for visual designers. Therefore, I designed an illustration system that breaks down illustrations into components, allowing designers to quickly assemble illustrations and increase their productivity by 40%. Additionally, this system standardizes the style of illustrations across products, maintaining brand consistency.
My Role
My Role
Team: 1 Researcher and 1 Visual Designer(Me)
Team: 1 Researcher and 1 Visual Designer(Me)
Team: 1 Researcher and 1 Visual Designer(Me)
As a visual designer, upon receiving the request, I took several actions.
As a visual designer, upon receiving the request, I took several actions.
As a visual designer, upon receiving the request, I took several actions.
User Research
User Research
Conducted a workshop with a researcher and researched design systems from competitors.
Conducted a workshop with a researcher and researched design systems from competitors.
Systematic Design
Systematic Design
Organized the existing illustrations as a component library with a clear structure, to immediately enhance the efficiency of collaboration within the design team.
Organized the existing illustrations as a component library with a clear structure, to immediately enhance the efficiency of collaboration within the design team.
Guideline Definition
Guideline Definition
Defined the guidelines for the style and usage of the illustration system.
Defined the guidelines for the style and usage of the illustration system.
Iteration
Iteration
Adjusted design based on feedback from other stakeholders.
Adjusted design based on feedback from other stakeholders.
BUSINESS PROBLEM
BUSINESS PROBLEM
Why does Trend Micro need an Illustration System?
Why does Trend Micro need an Illustration System?
1
Time-Consuming
Time-Consuming
Discussing and designing illustrations often takes up a lot of time for designers.
Discussing and designing illustrations often takes up a lot of time for designers.
2
Style Inconsistency
Style Inconsistency
Inconsistent illustration styles in products make it difficult for users to recognize the brand.
Inconsistent illustration styles in products make it difficult for users to recognize the brand.
3
Lack of Flexibility
Lack of Flexibility
Previously, relying on stock images for illustrations could not meet specific contextual needs.
Previously, relying on stock images for illustrations could not meet specific contextual needs.
Illustrations that have appeared in past Trend Micro products.
Illustrations that have appeared in past Trend Micro products.
DEFINE PROBLEM
DEFINE PROBLEM
How might we enable visual designers to create illustrations more quickly while maintaining a consistent style?
How might we enable visual designers to create illustrations more quickly while maintaining a consistent style?
RESEARCH
RESEARCH
What is the structure of illustration system?
What is the structure of illustration system?
I studied the structures of big companies' illustration systems, read articles written by designers, and learned how they built their systems. Simultaneously, I gathered past illustrations used in our products with the help of other visual designers and categorized them into four types. I found that these four types of illustrations were made up of fixed components.
I studied the structures of big companies' illustration systems, read articles written by designers, and learned how they built their systems. Simultaneously, I gathered past illustrations used in our products with the help of other visual designers and categorized them into four types. I found that these four types of illustrations were made up of fixed components.
How to define the style?
How to define the style?
Style is a very abstract concept. After discussing with researchers, we decided to hold a workshop to gather consensus on the style. We invited visual designers to write down adjectives describing Trend Micro and group different graphic styles. The final analysis helped us establish the style of the illustration system. Based on the workshop results, the style was refined into the image of a comprehensive and insightful consultant.
Style is a very abstract concept. After discussing with researchers, we decided to hold a workshop to gather consensus on the style. We invited visual designers to write down adjectives describing Trend Micro and group different graphic styles. The final analysis helped us establish the style of the illustration system. Based on the workshop results, the style was refined into the image of a comprehensive and insightful consultant.
Where should the system be bulit?
Where should the system be bulit?
The process of designing illustrations involves UX designers, visual designers, and front-end developers. Considering the tools used by these roles, I chose to build the system in Figma. UX designers create drafts with components, which are then refined by visual designers and exported as SVG files for front-end engineers.
The process of designing illustrations involves UX designers, visual designers, and front-end developers. Considering the tools used by these roles, I chose to build the system in Figma. UX designers create drafts with components, which are then refined by visual designers and exported as SVG files for front-end engineers.
DESIGN OUTCOME
DESIGN OUTCOME
Building the illustration world of Trend Micro!
Building the illustration world of Trend Micro!
Color
Color
The first rule is that illustrations must complement the brand. However, Trend Micro's brand color is red, which can imply a warning in the product. Therefore, I set blue as the main color, with red and grey as secondary colors.
The first rule is that illustrations must complement the brand. However, Trend Micro's brand color is red, which can imply a warning in the product. Therefore, I set blue as the main color, with red and grey as secondary colors.
Shape
Shape
To ensure the style of the illustration components is consistent, I set a few basic patterns that all illustration components must be composed of.
To ensure the style of the illustration components is consistent, I set a few basic patterns that all illustration components must be composed of.
Objects
Objects
Objects are the smallest units of the illustration system. With these objects, designers can compose illustrations that tell a story.
Objects are the smallest units of the illustration system. With these objects, designers can compose illustrations that tell a story.
Character
Character
Characters are broken into small components: head, hands, feet, body, and gestures, so that they can pose in different positions.
Characters are broken into small components: head, hands, feet, body, and gestures, so that they can pose in different positions.
Backgrounds
Backgrounds
Examples
Examples
ITERATION
ITERATION
Style was questioned as too "Cute"
Style was questioned as too "Cute"
After launching the illustration system, the product manager felt the illustrations were too "cute" and did not align with our professional image, requesting adjustments.
Although disheartened, I understood his concerns. I made adjustments by reducing the number of characters and removing facial expressions. Eventually, the product manager accepted these changes.
After launching the illustration system, the product manager felt the illustrations were too "cute" and did not align with our professional image, requesting adjustments.
Although disheartened, I understood his concerns. I made adjustments by reducing the number of characters and removing facial expressions. Eventually, the product manager accepted these changes.
DESIGN IMPACT
DESIGN IMPACT
Design Team Productivity
Design Team Productivity
40%
40%
40%
Reduced visual designer workload, empowering UX designers and increasing team productivity by 40%.
Reduced visual designer workload, empowering UX designers and increasing team productivity by 40%.
LESSON LEARNED
LESSON LEARNED
The Power of Collaboration in Overcoming Design Challenges
The Power of Collaboration in Overcoming Design Challenges
Since defining style is an abstract concept, I encountered difficulties during the phase of establishing the illustration style. However, I collaborated with researchers to design workshops for gathering essential information. Despite challenges at each stage, teamwork and support were crucial in overcoming difficulties and successfully creating a consistent illustration system.
Since defining style is an abstract concept, I encountered difficulties during the phase of establishing the illustration style. However, I collaborated with researchers to design workshops for gathering essential information. Despite challenges at each stage, teamwork and support were crucial in overcoming difficulties and successfully creating a consistent illustration system.
STAKEHOLDERS FEEDBACK
STAKEHOLDERS FEEDBACK
During every presentation, Zoe demonstrates excellent communication skills, clearly expressing her ideas. From the moment she steps on stage, she exudes confidence. Zoe's passion for drawing has led her down her unique path, and she approaches other fields with the same determination.
Being around Zoe is a joy. Her optimistic nature naturally influences us, and she always greets everyone with a smile. Being near her, we are filled with positive energy.
During every presentation, Zoe demonstrates excellent communication skills, clearly expressing her ideas. From the moment she steps on stage, she exudes confidence. Zoe's passion for drawing has led her down her unique path, and she approaches other fields with the same determination.
Being around Zoe is a joy. Her optimistic nature naturally influences us, and she always greets everyone with a smile. Being near her, we are filled with positive energy.
Pin Hsu (Trend Micro Staff Visual Designer)
Pin Hsu (Trend Micro Staff Visual Designer)
MORE PROJECTS
MORE PROJECTS
#B2B Platform
#B2B Platform
#UX Design
#UX Design
#RBAC
#Officially Launched
#Officially Launched
#B2B Platform
#B2B Platform
#UX Design
#UX Design
#Dasboard
#Dasboard