Open Site Navigation

Honey Visual Library

Visual Design Team

Samantha Lopez (Lead)

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

We decided on only using size 24 and 16px icons. The 24px icons were scaled down to the 16px icons to maintain the same visual weight. Some icon designs required us to reduce detail gracefully for clarity and readability.

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.