Led end-to-end design for 2 new features shipped to production for improved learning structure & real-time instructor-led sessions and a design foundation built from scratch for that is 25 years old now.
building a small-scale design system alongside to keep design consistent, handoffs clean, and designers sane.
Fluency Club | Live Learning
Feb 2024 - Present
EVERYTHING I BUILT
(only if the journey was...
...as linear as this line)
3
DESIGN SYSTEM
FLUENCY CLUB
LIVE LEARNING
A new structured learning feature, designed solo end to end. Worked directly with the founder to turn rough concepts into real screens across web and mobile.
Integrated a sister product into Yabla - audited the translated designs to match Yabla's visual identity and map them back to the design system, while collaboratively restructuring IA and navigation.
Setting the stage
As the product grew, so did the need for order. A component library that slowly evolved into a small-scale design system - keeping things consistent and handoffs seamless.
Upon joining Yabla, I first audited the UI, mapped existing design decisions, and built company's first-ever design foundation in Figma from scratch.
WHAT IS Yabla?
Yabla is a language learning platform that immerses users in authentic content to improve their skills through real-world videos, interactive activities, and personalized feedback.
0
Before any design work, I had to build the design ecosystem it would live in. WHY?
SETTING THE STAGE
Basically, problems before the problems :)
AND...THAT LED ME TO DEFINE MY DESIGN APPROACH
SO, WHAT DID I DO?
01.
No prior design files
01.
Clean, intuitive designs - simple to build, without compromising core functionality.
02.
Meet immediate business goals, with room for visual refinement in later phases.
02.
Dusty style guide & design inconsistencies
03.
Budget and time constraints
Discovery & Audit : I enrolled in Yabla's course to experience the product firsthand (started learning German, btw). Also, got the memo pretty quickly that launching fast was the priority.
From there: I audited the existing UI and design decisions across the product, and dug into support tickets and a few quick user conversations to understand where the pain points were.
funn!
fun :)
Designing for everyone!
From the tech-savvy
to the
not-so-much
and with that - I started building the foundation in Figma
1
WHAT IS Fluency Club? It brings structure through a daily routine of new videos with immersive games. With weekly live meetups for human interaction, a community space to connect with fellow learners, spaced repetition reviews timed to how you learn, and progress tracking that shows growth!
LET’S START WITH...THE IMPACT
Results driven through email marketing to existing subscribers.
WHAT USERS(A FEW OF THEM👇) SAID
Active user PARTICIPATION
was 40%
62%
CSAT SCORE
SURVEY CONDUCTED W/ 120 USERS
70%
“I have found the games in Fluency Club (FC) easier to complete than the games in whole videos. The games in FC are bite-sized and a 'sprint' calling for short, sharp bursts of attention, whereas, relatively speaking, the games in whole videos are a 'marathon' calling for longer periods of concentration and longer memories.”
"All your ideas are great, but I live on a farm and summer is Very busy. I'll be back when the weather turns."
loyal and funny users too :p
self-aware users :p
"Re-subscribed after viewing Fluency Club."
"Love the daily plan. Will continue to use this feature. Well done."
"It's a good idea, I just need to give it some more time and concentration."
"Fluency Club will be very helpful to those who use it."
So, what problem were we actually solving?
Active user participation had dropped to 40% - the founder recognized the problem
and came with a rough concept of what the solution could look like.
MY JOB?
Take that concept and make it real.
Users were struggling to maintain consistency in their learning journey without structured daily engagement.
Yabla encourages users to replay games until they earn 3 stars - but repeated attempts were leaving users feeling discouraged, like they simply weren't smart enough.
Sub-Feature 1
CHALLENGES
Beg-Intermediate · Int-Advanced
level switching to practice at the right difficulty.
A daily learning routine - a new video clip every day paired with immersive practice games.
Today’s Clip · Previous Clips
build routine while allowing flexibility to catch up if you miss it.
3 game states to know where they left off:
i. Yet to Start
ii. In Progress
iii. Finished
Introduced a Learning-Mastery Framework where progress always sums to 100% to reframe failure as part of the process. Instead of disappointment, repetition becomes progress - reinforced positively, not punishingly.
The progress bar beneath the stars is something we're currently experimenting with - still figuring out what works best.
When learning overpowers mastery
When user is closer to the goal
When user has achieved mastery
1
1.1
First, I initiated a few informal user interviews and dug into support tickets - to make sure I understood the problem.
Fluency Club wasn't born in one go. The 5 sub-features evolved gradually as concepts were brainstormed, tested, and refined.
While users enjoyed the Speak game, they expressed a need for real-time interaction
- practicing a language in isolation only gets you so far.
Language learning can feel isolating. The founder envisioned something beyond formal practice - a space where users could connect, share, and actually feel part of something.
Learners often forget previously learned material without timely reinforcement
- slowing progress and quietly undermining long-term retention.
Language learners often struggle to see tangible progress
- and when you can't see how far you've come, staying motivated is hard.
Sub-Feature 2
Sub-Feature 3
Sub-Feature 4
Sub-Feature 5
MEETUPS
COMMUNITY
STRATEGIC REVIEW
PROGRESS
Yabla Instructors host live sessions tailored to different language levels, giving users a space to practice real-world conversations with actual humans.
Dedicated boards for each language, working much like a social feed - fostering connection, discussion, and a sense of belonging within the learning community.
Schedules personalized game revisits using spaced repetition based on user performance. Ensuring reviews happen at the optimal time to maximize retention, not just coverage.
Data-driven visualizations that showcase growth over time -making progress visible, concrete, and worth coming back for.
Set Your Pace
gives users control over how often and how much they revisit content.
Upcoming · Previous Tabs
users can plan ahead for scheduled sessions and revisit recordings of past ones they may have missed.
2
3
4
5
MOBILE DESIGN?
A work in progress
Learning when to do which? It's all you and your best possible judgement?
Still figuring that out - but that's kind of the point 💃🏻
MY LEARNINGS :)
and that’s fluency club !
Taking time to address UI inconsistencies and stabilize the design ecosystem before touching a single feature screen made everything smoother downstream.
Always lay the groundwork first.
Tight timelines, shifting priorities - the job wasn't just designing screens, it was constantly finding the middle ground between what's ideal and what's shippable.
Adaptability should also be considered a design skill.
In language learning, the goal is to make the process easier, not simpler. Oversimplify it and learners feel like they're progressing without actually building long-term skills. Every design decision had to earn its place by asking: does this help users learn, or just feel like they're learning?
Ed-tech specific: Guidance and cognitive effort need to be in balance.
wuhuu ~shivani
Stakeholder communication? Sometimes you go with the flow. Sometimes you advocate hard for a decision even when you know they won't like it.
2
wuhuu ~shivani
Explaining to the founder why the design system was the need of the hour - before Live Learning was finalized - was one of the moments that tested me most. Learning to make the case for a decision that isn't immediately visible in the product? That's its own skill.
MY LEARNINGS :)
Transitioning from hardcoded values to a fully mapped design system feels slow and chaotic at first. But the alternative is inconsistencies, headaches and an estranged relationship with devs. so...
The learning curve is chaotic but worth it.
Ideally, the design system would have existed before Fluency Club. But Fluency Club couldn't wait - so it got designed without one, which created a lot of design debt. A LOT. If resources and time allowed, I'd have systematized the basics first.
Strengthen the foundation before it gets out of hand. Always.
MOBILE DESIGN?
Work in Progress
both designers were already thinking in the same direction (did a little dance there)
It should follow Fluency Club's visual language
and mental model.Reuse what already worked and build flexible patterns.
Users won't have to relearn how a new feature works.
Creating another one-off experience wasn't an option - we had to make sure whatever we shipped wouldn't add to the existing design debt.
THE DECISION
WHY IT MADE SENSE?
What is GoSpanish?
It offers real-time, instructor-led language learning through Group Classes and Private Classes.
also owned by Yabla's founder
Live Learning: GoSpanish Meets Yabla
Integrating a Sister Product - Making Sure It Looks And Behaves The Part
MY JOB?
With more than a year at Yabla, my job this time was - make it feel Yabla!
THE DECISION BEFORE THE DESIGN
We looked at what we were working with - design debt we were still paying off and limited resources.
WHAT I DID 🙋♀️
Every change mapped back to the design system. Nothing arbitrary.
RESULTS: BEFORE / AFTER
BEFORE I CAME IN
The leading designer mapped GoSpanish’s existing designs and translated them for Yabla.
Runs daily, open to all subscribers - users drop in and learn together with a live instructor.
Scheduled 1:1 sessions based on instructor availability - users choose a topic and register using credits.
1 - Group Classes
2 - Private Classes
GoSpanish - Production
GoSpanish - Production
I audited the designs translated by the designer leading this feature and reworked them to align with Yabla's visual language.
We collaboratively refined the IA and navigation where it was needed, and iterated on founder’s feedback as we moved forward.
Group Classes and Private Classes have different underlying logic - but the goal was to preserve how each works while making them feel like they belong to the same family.
Same hierarchy, same navigation patterns, same visual language.
Why rework the whole thing?
New designer hire(now a team of 2) + tight deadline.
Getting them fully up to speed on Yabla's design language would've taken weeks. So, split the work and get it done.
So, whY ARE WE DOING THIS?
With AI voices and automated practice tools everywhere, it's easy to forget that learning a language doesn't happen in isolation. You can do everything right, but if you never practice out loud with real people, the progress remains half-baked.
This felt like the right moment to bring a human layer on top of Yabla's self-paced experience to build learning that actually lasts.
I audited the translated design and systematized it against the design system.
COLOURS: Replaced approximated and off-brand color values with semantic tokens from the design system - ensuring every color choice traces back to a defined role, not a hex code.
TYPOGRAPHY: Applied text styles from the established type scale - typeface, weight, size, line height, and letter spacing defined and consistent across every screen. No more one-off font treatments.
COMPONENTS: Used existing components where applicable. Where a new pattern emerged, it was built, documented, and added to the system - so it could be reused going forward.
SPACING & LAYOUT: Applied spacing tokens across the board -padding based on a multiple-of-8 scale, corner radius, and border width all pulled from the system. No magic numbers.
And That's Yabla! Thanks for making it to the end :)
and that’s LIVE LEARNING.
LIVE LEARNING - MY AUDIT
LIVE LEARNING - MY AUDIT
4
