HATO
Safer Together
HATO is a child safety hybrid ecosystem for disaster-affected communities in South East Asia
Project Type: UX Exploration
Duration: 4 weeks
Tools: Figma, Framer, Adobe AE
This page will be updated weekly.
the breakdown
duopath is a conceptual marketing microsite designed to introduce gamified subscription tiers inspired by battlepass systems commonly used in live-service games (i.e. Genshin Impact, Cookie Run: Kingdom). This project explores how progression loops, reward psychology and visual hierarchy can be translated into an educational context, or Serious game such as Duolingo to increase engagement and long-term retention. The site mirrors the structure and tone of existing product pages from Duolingo, while introducing a new proposition built around seasonal challenges and unlockable rewards.
the problem
While further-developed countries such as Japan, Korea and Singapore have many systems in place to protect and prepare their people from natural disasters, I found that countries such as the Philippines, Sri Lanka, Myanmar, Vietnam and Indonesia, do not have access to the same systems.
HATO is my answer to the lack of accessible and affordable safety precautions for disadvantaged families in Southeast Asia.
exploration
I explored different progression structures including weekly reward tracks, challenge boards, and seasonal passes from existing games and live services.
Colour, Typography and Logo development.
Splash Development
App Thumbnail Development
system design
Like existing battlepasses, duopath follows a very similar loop: learn and earn XP, complete quests and unlock rewards. To make duopath unique to Duolingo, learners can expect to earn cosmetic items (badges, titles, stickers, namecards), XP boosts and premium currency (gems).
Battlepass loop
Rewards
wireframe iterations
I tested different layouts for the battlepass page within the phone application. The layouts for each wireframe followed a similar layout to the Quests page within the Duolingo mobile app. I wanted to have a large header at the top and an easily accessible view of the battlepass.
Wireframe variations
page assets
Using Figma, I created many different assets to populate my microsite for duopath. These assets included profile badges, user titles, and milestone/achievement cards.
Badge iterations
Title iterations
Duo badge iterations
Milestone and Achievement cards
To develop the microsite, I created a style guide, a logo specific to duopath, a page mockup and Duo illustrations all in Figma.
duopath logo iterations
Style guide
Before and After of battlepass page
A flock of Duos
Using Figma again, I created a microsite prototype. I can't say this was my best work, as I was still learning how to use Figma's site builder. When I was recommended Framer by a friend, I moved my project and all its assets over. I used my prototype as a reference to build the new version of my microsite. Below are screenshots from my initial prototype.
You can click each card to make them less burry!
Explaining how the battlepass worked
duopath Free and Plus comparisons
New features and a FAQ section below
what I learned
Designing this concept helped me explore how game progression systems can enhance non-game experiences. If I expanded this project further, I would test reward balancing and conduct user testing with language learners. If I were to rework this project, I would like to try taking a design route of turning the battlepass experience into a mini-game to increase retention and excitement.