Chaser

Overview

Chaser needed a Slack-native homepage hero animation that could explain task capture and follow-up in under 15 seconds, so I designed a UI walkthrough that shows product states clearly while staying lightweight and reliable in-browser. This mattered because the hero is the first impression for new visitors, so clarity directly affects whether the product is understood in one glance.

Role

• UI state design (Slack message view + Chaser dashboard)
• Microinteraction design (type-on, parsing, labels, toasts, status changes)
• Motion design + animation (After Effects)
• Storyboarding and pacing for clarity at speed
• Asset delivery for both video and deck-ready static states

Process / Approach

• Rebuilt the UI in Figma (not screenshots) to match Slack’s visual language and keep states consistent.
• Designed the animation for homepage hero constraints: silent autoplay, clean looping, and legible UI at multiple responsive sizes.
• Separated key beats (due-date detection → task card → acknowledgement → reminder) so each product promise reads clearly.
• Exported web-friendly deliverables (consistent framing, minimal camera motion, lightweight playback) to reduce blank/black-frame risk in the hero slot.

Result

Shipped a 15-second Slack-native walkthrough as the homepage hero on Chaser’s product site. The sequence is loop-safe, readable at speed, and structured so it can be reused for future feature updates or longer cuts without redesigning from scratch. Delivered web-ready exports plus Figma source states for pitch decks and presentations.