<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397092/Use%20Case/Screenshot_2025-06-20_at_1.24.47_PM_gjdrl1.png" caption="INFCON 2024 Key Visual & Inflearn Banners Lee Byung-ki" />

**INFCON 2024 Key Visual & Inflearn Banners *Lee Byung-ki (Inflab Product Designer)***

Each year, Inflab hosts INFCON—an offline conference bringing together IT professionals. For 2024, we expanded beyond our traditional developer focus to embrace design, PM, and PO roles, covering the full product spectrum. We also scaled up significantly, planning for over 2,000 attendees. In this context, I took on the challenge of crafting the event's key visual and defining the conference atmosphere. Our core themes: expansion and diffusion.

To bring these abstract concepts to life, we explored visual metaphors like 'the infinite universe,' 'black holes and wormholes,' and 'rapidly expanding energy.' It became clear that static images wouldn't cut it—we needed dynamic, interactive design. The traditional After Effects to Lottie plugin workflow felt too slow and cumbersome for our rapid iteration needs, so we chose Phase for its speed and experimental flexibility.

Phase delivered brilliantly. Event pages typically experience traffic spikes, but our json-exported animations performed flawlessly, displaying beautiful visuals without a hitch. The vector-based graphics also scaled perfectly for the massive LED displays at our physical venue.

This wasn't actually my first time using Phase—I'd previously joined the Phase Challenge (link) after its Korean launch, which convinced me it was production-ready. Since then, I've continued using it whenever I need to express abstract concepts effectively and efficiently on Inflearn's landing pages.

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397497/Use%20Case/Screenshot_2025-06-20_at_1.31.32_PM_gs06ki.png" caption="Inflearn App - Plant Growing Onboarding Park Yuri" />

**Inflearn App - Plant Growing Onboarding *Park Yuri (Inflab Product Designer)***

We introduced a 'Plant Growing' system to the Inflearn app as a way to naturally encourage daily learning habits and boost retention. Users nurture plants through their learning activities, eventually harvesting fruits as rewards. For such a novel feature, we needed onboarding animations that would help users intuitively grasp the concept and feel excited to participate.

Our critical goal was driving widget installation, but Android and iOS handle this differently, requiring platform-specific flows. Rather than burden users with lengthy text explanations, we used Phase to communicate everything clearly in just 7-8 seconds. The lightweight .json format was perfect for keeping load times snappy, and the animations performed beautifully in production.

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397689/Use%20Case/Screenshot_2025-06-20_at_1.34.42_PM_msnnt7.png" caption="Rallit - My Log Feature Onboarding Kim Bo-kyung" />

**Rallit - My Log Feature Onboarding *Kim Bo-kyung (Inflab Product Designer)***

Rallit (link) is a career-centric recruitment platform connecting professional growth with job opportunities. Users gain personalized career insights from their experience, skills, and salary data to discover better opportunities, while companies use this data to find and connect with talent.

The 'My Log' feature lets users document their career journey and visualize it through salary progression charts, helping them understand and manage their professional trajectory. Unfortunately, the feature was buried in the UI, and users who did find it were greeted with an immediate login modal—hardly inspiring. We used Phase to create onboarding animations that properly introduce the feature and motivate users to dive in.

**Why Phase**

**Here's what our team loves about Phase:**

Animation works. When you're conveying abstract concepts or guiding users through specific journeys like onboarding, animation outperforms static text and images every time. One fluid sequence tells the whole story.

Incredibly approachable with powerful capabilities. The keyframe animation system feels far more intuitive and lightweight than After Effects. Any designer familiar with Figma prototyping can jump right in and ship production-ready work. File duplication makes creating variations a breeze—essential when you need both light and dark mode versions.

Economical export options. The .json (Lottie), .lottie, and .dot formats have become the de facto standard for micro-interactions and web animations—they're incredibly efficient. For digital product designers focused on web performance, Lottie files are the obvious choice.

Korean user-friendly. The Phase Korea team provides responsive support and Korean-language learning resources, making adoption seamless. Despite being a global tool, the Korean community has created an environment where local users feel right at home.

inflearn_logo.svg

How Inflearn Uses Phase to Supercharge Their Design & Animation Workflow

Pitcrew develops Pillo, a medication reminder app designed for people who frequently forget their meds or find medication management challenging. We help users juggling multiple medications stay consistent with their routines. We're currently focused on the North American market.

In 2025, we adopted a new mission: "Make medication management for chronic conditions both easy and enjoyable for optimal therapeutic outcomes." As we explored ways to incorporate gamification, character design, and motion elements into our user experience, we discovered Phase at the perfect time. We don't just want to solve functional problems—we aim to create delightful interactions that reinforce our brand experience.

**1) Onboarding Alarm Setup Animation**

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750398120/Use%20Case/pillo-loading-sm_spgyzk.gif" caption="Onboarding Alarm Setup Animation" />

**Remix link**

[**https://app.phase.com/preview/fe6957fc-e525-44f3-ac1b-a66ec783b7ee**](https://app.phase.com/preview/fe6957fc-e525-44f3-ac1b-a66ec783b7ee)

The onboarding alarm setup animation exemplifies this approach. While we'd previously used basic clock animations, we hadn't fully utilized our character's potential. This time, we animated the Pillo character actively adjusting the clock hands, providing clear visual feedback that the user's alarm time has been registered.

The animation responds dynamically to each user's selected time, naturally confirming their settings are saved correctly. Rather than displaying a generic loading screen, we show our character preparing the alarm—this builds feature confidence while creating an emotional brand connection. The results speak for themselves: first-time user drop-off decreased significantly, and initial app experiences became notably more positive.

**2) Heart Gift Box Animation**

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750398110/Use%20Case/Gift_wvg3xv.gif" caption="Heart Gift Box Animation" />

**Remix link**

[**https://app.phase.com/preview/fa93228a-2d3d-4977-bceb-9e96890ff0ce**](https://app.phase.com/preview/fa93228a-2d3d-4977-bceb-9e96890ff0ce)

We also created the heart reward animation using Phase—the delightful moment when users open gift boxes. Phase enabled us to quickly craft lightweight, intuitive animations showing boxes opening and hearts emerging. We delivered a more engaging reward experience while maintaining production efficiency.

What impressed us most about Phase? It's incredibly fast and lightweight. As the sole designer managing our entire product experience, I need to eliminate busywork and focus on impact. After Effects felt too heavy and inefficient for simple animations. Phase's vector-based approach stays light and responsive, perfectly optimized for mobile interactions. The intuitive interface means any designer with basic motion experience can start creating immediately—no learning curve required.

Phase perfectly supports our vision of making medication management easy and enjoyable. We're excited to expand its use across more user touchpoints.

Pillo app: https://play.google.com/store/apps/details?id=xyz.rtrvr.pillo&hl=en&gl=US&referrer=inviter%3Dpillo_care

Pillo website: https://www.angrypillbox.com/

small_image 1 (1).png

thumbnail_image 1 (1).png

image 1 (1).png

How AngryPillbox Uses Phase to Elevate Their Motion Design System

Phase empowers interface designers to create vibrant animations quickly and effortlessly, enhancing the overall visual appeal of their designs!

Eva Cheng

large_Eva-min.jpg

medium_Eva-min.jpg

small_Eva-min.jpg

thumbnail_Eva-min.jpg

Eva-min.jpg

Freelancer

Animation in UX can be tough. Creating animations from scratch is time-consuming, and many tools are too complicated. But Phase is exciting, with a user-friendly interface and an easy workflow.

Alex KW Chen

thumbnail_Alex Chen Profile Pic.jpeg

Alex Chen Profile Pic.jpeg

UIUX Designer @ TSMC

Unlike complex animation tools. Phase is highly intuitive for a UI/UX designer. It’s super easy for creations to get started.

hero.title

case_study_title

How Inflearn Uses Phase to Supercharge Their Design & Animation Workflow

How AngryPillbox Uses Phase to Elevate Their Motion Design System

testimonial_title

Eva Cheng

Start Prototyping

Product

Prototyping

Animation

Collaboration

Code Export

Figma Plugin

Learn

Tutorial

Case Study

Resources

About

Careers

Community

Release Notes

FAQ

Legal

Privacy Policy

Terms of Service