duopath
What if duolingo had a battlepass? duopath is a new addition into duolingo's line of apps, introducing a gamified battlepass to users' learning. your progress, upgraded with duopath.
Project Type: UX Exploration
Duration: 2 weeks
Tools: Figma, Framer
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
Language learning apps struggle with long-term retention. While streak systems encourage daily use, motivation often drops after the novelty fades.
Key issues:
• Progression lacks long-term goals
• Rewards feel repetitive
• Gamification systems aren't deep enough to sustain engagement
To solve these issues, I introduced a battlepass concept to keep learners engaged over months instead of weeks. A battlepass encourages consistency and creates seasonal excitement, constantly bringing back learners for each seasonal update.
This seemed like a no-brainer, as a battlepass naturally extends the existing progression loop where Duolingo already uses XP, Streaks and Leagues.
Lesson -> XP -> Battlepass Progress -> Reward
exploration
I explored different progression structures including weekly reward tracks, challenge boards, and seasonal passes from existing games and live services.
Assets made in Figma
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.