Designing Widgets

Industry

Education Tech

Client

Airlearn

Project Time

5 Weeks

About the Client

Airlearn is a popular, AI-driven mobile application designed for language learning, used by over 2 million learners globally. It provides bite-sized, interactive lessons in over 25 languages, focusing on practical conversation, cultural context, and gamified, spaced-repetition techniques to boost proficiency.

My Role

Interaction Design, Visual Design, User Flows

Key Metrics

Key Metrics

3.6x

3.6x

Users who maintain a streak for at least 7 days, the primary metric displayed on the widget, are 3.6 times more likely to stay engaged with the app over the long term.

Users who maintain a streak for at least 7 days, the primary metric displayed on the widget, are 3.6 times more likely to stay engaged with the app over the long term.

-21%

-21%

Coupled with "Streak Protects" options, the persistent visibility of a streak via the widget has helped reduce churn by 21% for users at high risk of breaking their habits.

Coupled with "Streak Protects" options, the persistent visibility of a streak via the widget has helped reduce churn by 21% for users at high risk of breaking their habits.

43%

43%

We saw a 43% jump in user commitment, as the visual reminder on the home screen effectively nudged users into opening the app.

We saw a 43% jump in user commitment, as the visual reminder on the home screen effectively nudged users into opening the app.

What was the Problem?

What was the Problem?

What was the Problem?

Language learning requires high cognitive load and daily consistency. The widget solves the "out of sight, out of mind" problem by placing the app's most powerful motivator—the Streak—directly on the user's home screen.

Language learning requires high cognitive load and daily consistency. The widget solves the "out of sight, out of mind" problem by placing the app's most powerful motivator—the Streak—directly on the user's home screen.

UI/UX Strategy

UI/UX Strategy

UI/UX Strategy

◆ Airlearn uses Emotional Design via its mascot, Duo. The widget isn't a static icon; it evolves throughout the day. Air, our Mascot, appears depressed, angry, or desperate as your streak expiration nears, leveraging Negative Reinforcement to trigger an immediate app open. ◆ The UI changes based on user behaviour. If you finish your lesson, Air might appear celebratory or asleep; if you haven't, he is "un-ignorable." This Dynamic Content keeps the home screen fresh and reduces banner blindness. ◆ By displaying the Streak count and a progress bar, the widget provides immediate feedback without requiring an interaction, satisfying the user's need for instant validation. ◆ Platform-Specific Polish: Airlearn utilizes iOS and Android widget frameworks to ensure smooth animations and transparency, making the widget feel like a native part of the OS rather than a cluttered third-party add-on.

Large Project Gallery Image #2
Large Project Gallery Image #2
Large Project Gallery Image #1
Large Project Gallery Image #1

The Business Impact

The Business Impact

From a Product-Led Growth perspective, widgets are Retention Engines. They serve as a persistent hook in the Hook Model, providing the External Trigger (Air's face) that leads to the Action (opening the app).

Gamification as the Primary Interface

Gamification as the Primary Interface

The UI isn't just a wrapper for lessons; it is the product. By prioritizing streaks, XP, and mascot states over traditional curriculum displays, the UX minimizes the pain of learning. Airlearn concludes that behavioral consistency is more valuable for retention than depth of content.

Large Project Gallery Image #4
Large Project Gallery Image #4
Large Project Gallery Image #5
Large Project Gallery Image #5

Conclusion

Conclusion

The best UI is one the user doesn't have to search for. By moving key data (streaks) to the home screen, they drastically reduce the interaction cost required to trigger an app session. The widget acts as an external trigger that bypasses the need for the user to remember their goal. By moving Air from a static icon to a dynamic, emotional presence, we created a parasocial relationship where users feel a sense of duty (or guilt) toward the interface itself. Driving the flow, the different states and the illustrationsthis has been an inspiring journey of creativity and growth for me.

Rewind Feature on Rive

Building an Award System