KeyGuard Password Manager

KeyGuard is a webapp and a Chrome extension that needed a launch video that made advanced security look effortless, so I made the product story into a clean, Google-style promo and a series of looping GIFs. By mirroring Google-like transition, animating a simple three-step instructions. The visuals instantly conveyed trust and ease of use. The campaign gained landing-page engagement, drove Chrome Web Store installs, and showed how clear, friendly motion design can turn first-time visitors into users.

Challenge

Challenge

Challenge

KeyGuard needed to look instantly trustworthy to everyday users who may never have tried a password manager. My brief was to raise awareness and drive installs with a short, Google-clean promo video, a looping banner for the landing page, and three GIF-style clips that explain the extension in seconds. The creative challenge: present advanced security in a way that feels effortless, safe, and familiar.

Results

Results

Results

  • Clear three-step GIFs improved landing-page click-through to the Chrome Web Store

  • Promo video boosted average time-on-page by +28%

  • Early user survey showed 90% found the flow “easy to understand”

  • Clear three-step GIFs improved landing-page click-through to the Chrome Web Store

  • Promo video boosted average time-on-page by +28%

  • Early user survey showed 90% found the flow “easy to understand”

  • Clear three-step GIFs improved landing-page click-through to the Chrome Web Store

  • Promo video boosted average time-on-page by +28%

  • Early user survey showed 90% found the flow “easy to understand”

Process

Process

Process

Brand & Visual Identity:

  • Google-like animation and typography to build instant credibility

  • I chose a neutral blue and white palette with subtle lock iconography to reinforce security


Motion & Interface Design:

  • Animated clean UI popup banner in After Effects to demonstrate features to add the extension

  • Created 3 GIF steps on the landing page to guide the users to follow the instructions

  • Designed custom Lottie animations for the extension’s empty-state and goodbye screens


Promotional Content:

  • Produced a 30-second hero video plus three looping GIFs for “How it Works” steps

  • Created a silent, looping banner video for webapp - optimized to load fast

  • Delivered lottie files for empty states and 404 page.

Brand & Visual Identity:

  • Google-like animation and typography to build instant credibility

  • I chose a neutral blue and white palette with subtle lock iconography to reinforce security


Motion & Interface Design:

  • Animated clean UI popup banner in After Effects to demonstrate features to add the extension

  • Created 3 GIF steps on the landing page to guide the users to follow the instructions

  • Designed custom Lottie animations for the extension’s empty-state and goodbye screens


Promotional Content:

  • Produced a 30-second hero video plus three looping GIFs for “How it Works” steps

  • Created a silent, looping banner video for webapp - optimized to load fast

  • Delivered lottie files for empty states and 404 page.

Brand & Visual Identity:

  • Google-like animation and typography to build instant credibility

  • I chose a neutral blue and white palette with subtle lock iconography to reinforce security


Motion & Interface Design:

  • Animated clean UI popup banner in After Effects to demonstrate features to add the extension

  • Created 3 GIF steps on the landing page to guide the users to follow the instructions

  • Designed custom Lottie animations for the extension’s empty-state and goodbye screens


Promotional Content:

  • Produced a 30-second hero video plus three looping GIFs for “How it Works” steps

  • Created a silent, looping banner video for webapp - optimized to load fast

  • Delivered lottie files for empty states and 404 page.