Ghost Animation


I designed and developed this ghost as part of an error design for IBM Data Science Experience.

Process & Technology Used

Sketchbook, Illustrator, HTML, CSS, SVG animation.

Challenges Faced & Problems Solved

This particular error occurs when a user clicks on a email to collaborate on a project, only to find that their access was revoked. Knowing this is a frustrating experience, I wanted to create a design and animate it to bring some delight to an otherwise crummy experience.

I faded in the symbols and the background before the ghost to give context to the animation. The ghost shows up urgently with their magnifying glass to "help" the user find what they are looking for. The slight curve at the bottom of the ghost suggests it's active in its search, even when it's not moving on the screen.

I designed this to fit into a larger system of icons on the site so to maintain a cohesive illustration style throughout the product.