When describing abstract and professional jargons, dedicated designed illustrations and UI animations can play an supportive role of helping users more effectively and efficiently understand the content. But be sure that the visual balance between copy and visual assets is thoughtfully considered to prevent to make visual assets distract users from reading text. This might need innovative technical solutions.
Client
A Policy Advocacy Organization
Duration
5 months, 2023
Team
Lead Designer, PMs, UX Writers, Devs
Role
Illustrations
UI Animations
A comprehensive UI illustration and animation system design for Modernizing ESOPs website.
Overview
The Context
Modernizing ESOPs is a new lobby organization created to change specifics to the ERISA 1974 tax law to remove legislation blockers for promoting ESOPs (Employee Stock Ownership Programs). Modernizing ESOPs needs a website to share ESOP knowledge, current issues, and proposed fixes in a simple and intuitive way.
The Goal
How might we add UI illustrations and animations on the Modernizing ESOPs website to enhance the branding, help communicate complex ESOP concepts, and provide moments of delight?
Design Outcome
3
Hero Animations
3
Divider Illustrations
4
Scenic Animations
8
Spot Animations
52
Other Illustrations
Final Design
Hero Animations
Homepage
“Workers, employers...Everyone cheers for ESOPs.”
Hero Animations
ESOP Basics
“How an ESOP company evolved over years?”
Hero Animations
The Issue
“The storm is coming!”
Divider Illustrations
Always think outside boundaries
Instead of making illustrations sit tight in bounding boxes, a series of section divider illustrations are created as a part of structural components to bring a more immersive experience. And they are telling a consistent story - the vision of a solid bipartisan coalition working together to push ESOP further.
Spot Animations
Not too distracting, to a tee
Spot UI animations use analogies and subtle looping motions to complement the copy explaining ESOP Basic concepts and the issues.
Style Guide
Documentation
Principles, styling techniques, color palettes, and best practices are documented for future scalability.
Process Highlights
A highly collaborative animation workflow integrated into the site design process
This project's animation workflow is integrated into the end-to-end website design process. With the help of content strategists and the lead designer of the webpages, I was able to explore the opportunities on how illustrations can be more seamlessly integrated into the web design at the beginning of the project. And we were always able to deliver a complete web experience prototype with page design and the same fidelity illustrations to the client for getting approval at both wireframe and visual design milestones to ensure a smoother animation workflow without much back and forth.
Facing vectorial Lottie constraints: Workarounds
The team decided to use Lottie as the format of vectorial animation deliverables to ensure a smaller file size. However, Vectorial Lottie animations only support limited basic layer effects and effect presets. In our case, Lottie doesn’t support our scribble texture effect in AI. But I didn’t want to sacrifice this visual effect. So a significant effort was made to expand every line to an individual shape layer as a dumb but effective workaround. The Lottie constraints also influenced the selection of motion concepts. For the motion concepts with similar impacts, I selected the concepts which were 100% doable in Lottie to mitigate potential risks.
The secret sauce for rich, but not distracting motion experience
For the example animation, I used a technique called segment-looping. The viewer can only see the motion of the cloud coming in once, and then the animation is just the forever looping of the raindrops. The intention is that, at first, we want to add more fun or storytelling elements to this animation - especially the cloud motion, to provide a moment of delight. But after the user sees it once, let’s keep it low-key. So when the user switches their attention to read the copy more in-depth, the animation won’t be distracting. We will play just the subtle looping animation segment, which is the raindrop part. Lottie also enables this technique. It allows us to manipulate the frames and the times we want to play.
Streamlined animation handoff process
Finally, I wrote down some animation specifications for our developer to reference. In this case, because I’m using the segment loop technique, I need to tell our developer how does this animation work, what’s the frame rate, and what’s the frame range we want to loop.
