Coppel Illustration System
Role: Senior Visual Designer:
Illustration | System creation | Documentation | Leadership support
Coltrane Illustration’s system is a functional, flexible, scalable, and user-friendly system, that supports visual consistency in illustrations across Coppel, one of the largest organizations in Mexico within the retail and financial industries.
We created a powerful tool that allows making illustrations in a very agile way, while visually unifying all of Coppel’s digital experiences. Its use will also strengthen the brand identity between its users and internal collaborators.
The ask
Coppel was already using illustration within its different sub-divisions, however, each design department would create different styles that had little in common, bringing visual inconsistency to the brand.
We performed a series of interviews with key collaborators from all of Coppel’s sub-divisions to understand how they were using illustrations and what were the current pain points to define the Illustration System foundations, how it would communicate, and its main visual characteristics.
What we heard
LACK OF CONSISTENCY
“Different designers from different areas have developed different illustration styles with color as the only thing in common. This creates inconsistency.”
NEED FOR INCLUSION
“We need a system that’s inclusive and able to represent all our audiences.”
LACK OF GUIDELINES
“We need a system with clear guidelines and instructions. That is very well documented.”
NEED TO SPEED UP THE PROCESS
“Even though there is a good organization, we get last-minute requests that affect our timelines. We need to solve for unexpected petitions and time constraints”
Detail Design
Within 8 weeks we created an inclusive, scalable, and visually appealing illustration library with more than 200 components in Figma and very robust documentation.
With the system’s library, it’s possible to generate more than 1 million combinations of harmonic visual compositions.
The Illustration System
An inclusive, friendly, professional, dynamic, attractive, and modern Illustration system.
The Library
Characters organisms were built with a strong number of properties to customize; from hairstyles, skin color, accessories, facial hair, hearing aid, and skin details, as well as a wide range of position options for its arms, hands, and legs.
Colors are editable and along with customizable properties, designers can create more than 1000 combinations for a character.
On top of this, the illustration system library is a set that is alive and as it gets escalated and fed with new components, the number of possibilities will expand.
Automation
The library we have built allows us to easily and quickly create different compositions due to the great variety of components that have been developed. All of them were organized in a very simple way for the agile placement of the instances.
Thanks to the generation of components with interchangeable variables, all elements can be substituted, scaled, mirrored, and edited in color for customization.
Guidelines
The instructions for use are precisely documented in the illustration library so that the replication of elements, creation of new illustrations, or composition of scenes maintain consistency, homogeneity, and essence of the Coppel universe.
Components
The elements available in the illustration library were generated as a component allowing easy updating, maintenance, and management. The organization of the components is very simple, so they can be found practically, speeding up the construction of compositions and character customization.
Best practices
We extensively explained the best practices for the use of the library, ranging from the use of color palette, property customization, compositing, deep customization, color flexibility, and more. In addition, we add a base format for cases where it is necessary to request a composition.
