Honey Visual Library
How I Contributed
I reworked all the system iconography, developed new use case guidelines, co-created Coiny visual style refresh and guidelines, led the Coiny animations, and co-created Honey's illustration library.
Visual Design Team
Jose Torres (Myself)
Our Tools
Figma, After Effects, Illustrator, Photoshop, C4D
My Role
Visual Designer / Animator
Overview
In 2020, the visual design team created designs from scratch for every project. There wasn't a library for reusable assets or any source of truth established, which caused many inconsistency and velocity problems. My team brainstormed ideas and landed on a new visual library that would be an extension to the design system. It will be full of reusable assets that would be our one source of truth. In this library, we aimed to define and constantly expand on iconography, Coiny, illustration, 3D, mockups, photography, and animation. The product visual library would influence the brand and creative design teams for Honey's 3.0 brand refresh built around 'Joy.'
System Icons
Icon Size
A system of icons at 24px and 16px was created, with the 24px being scaled down to 16px versions to maintain the same visual weight. When working with 16px icons, some designs require us to reduce detail gracefully for clarity and readability.
3.0 Illustration Style
This exploration aimed to take the illustration style in a new direction, connect Coiny, make it feel friendly and joyful, and consider asset creation efficiency and scalability. We then pulled all assets that felt uniquely Honey and started pushing those ideas further. After creating a handful of new assets and mockups, we did some guerrilla user research to validate internally. The majority of the group was very excited about the new direction.
Hero
These are large, highly detailed illustrations that are composed to communicate bigger stories and ideas.
Imagery Placement Chart
After a new style was established and a library was developed, a use case system had to be created to educate designers on best practices. The idea was to let all product and marketing designers have access to quickly mockup assets to fit their designs.
Thumbnail
These are small illustrations, often paired with more granular messaging.
Midsize
Medium-sized illustrations are used to accompany messages at a secondary level.
The Solution
Create more documentation and an imagery placement chart to educate designers on best practices and use cases. A new visual art library was established, full of hero, midsize, and thumbnail mockups covering all product and marketing operations.
The Problem
After a few months, we saw many inconsistencies around color, unbalanced objects, use cases, and styles across product and marketing.
New Illustration Library
3D
Lottie Animation
Visual Art in Product, Growth, and Marketing
2.0 Illustration Style
The 2.0 illustration style is focused on 'for everyone' and 'Saving is smart.' The design style is significantly based on minimalism and only uses simple and light strokes.
Icon Stroke
A 1.5px stroke width was used for our set. Being pixel perfect stops you from using a better stroke weight that brings more legibility without being too thick or thin — like with 1 and 2px strokes.
What's next?
In April 2022, my team started working on the Honey and PayPal unification. Now officially called PayPal Honey, we redefined Honey Gold and in the process of updating visual assets in emails, landing pages, the website, our app, MSE, and design systems.