Coiny Refresh
Visual Art Team
Jose Torres (Myself)
Our Tools
Figma, After Effects, Illustrator, Photoshop, C4D
The Impact
We saw significant improvement in use cases and design consistency across all Honey channels. Coiny became a value prop, utilized more within product and marketing, which improved user interaction and engagement for shopping and marketing emails.
The Problem
Coiny's visual details had no established documentation. Many inconsistencies surfaced across the Honey organization, such as incorrect color usage, body and limbs not being proportional, inconsistent animation styles and body structure, wrong use cases, and made-up lore.
Coiny Introduction & Purpose
Coiny is Honey's mascot and is used strategically to add personality, charm, and reliability to the brand. Don't let the simple design fool you. A significant amount of consideration, technical effects, and guidelines were implemented to bring Coiny to life.
Coiny's purpose is to improve user interaction and engagement in the Honey Find Savings on web and mobile environments when users get Cash-Back or Gold Rewards. You'll also encounter Coiny in growth, marketing emails, graceful failures, and referrals. Coiny has become a well-liked value prop that elevates designs.
Coiny 1.0: How it Started
Coiny 1.0 was built based on Honey's 1.0 illustration design style and with no defined guidelines in the early Honey startup days. Although Coiny 1.0 is delightful, the style didn't mesh well with the 2.0 illustration style nor were the animations optimized for web or mobile.
Coiny 2.0 Guidelines
In 2020, my team took governance and developed Coiny documentation that defined the style, body ratios, color, accessories, identity, faces, prop proportions and use cases. See the Coiny Guidelines in Figma below.
Static Details
Coiny was simplified by removing the gradients glairs, and shadows.
Animations 1.0: How it Started
Below are some original Coiny animations before I was brought on to support the Visual Arts and focus on animation initiatives for Product. These fun and delightful ideas were the starting point for Coiny's 2.0 animation refresh.
Animated Details
The body shadow and glairs were kept in the animation style because it made Coiny feel more natural and dynamic for updated movements.
Coiny 2.0: How it’s Going
There are now guidelines around static and animation Coiny styles and for interchangeable facial expressions — happy, sad, confused and excited. This allowed other teams to build a Coiny quickly and easily. Some other style updates were to remove all edged outlined strokes and have the arms come from behind the body. See the Figma Library below.
Animations 2.0: How it’s Going
The updated animation styles are based on the three playful movements, bounce, dance and walk. I wanted the motions to seem natural, relatable, and dynamic when users see Coiny. I added dynamic motion to the glares and the shadow, making it seem like Coiny had depth. I then focused on facial expression transitions, happy to excited and happy to sad. Lastly, I thought about how Coiny would interact with props. The style I used was a 2D-3D or parallax look and feel. The angles would slightly change as Coiny moves to make the animation more attention-grabbing and delightful. I added accessories and arm shadow options for when we wanted to make value props really pop.
