Making Drag Intuitive in Duolingo Stories

During my second summer at Duolingo, I spent most of my internship redesigning how learners interact with Arrange the Story Beats, an exercise where many learners were getting stuck.

Over six weeks, I explored everything from layout changes to AI-prototyped motion, jammed with our design studio, and worked with PM and engineering to find the right balance of impact and effort.

The final design was approved at product review and is now live in the app, where it reduced the total Stories quit rate by 2.44%.

Duolingo Stories are short conversations between two characters that build reading and listening skills through embedded interactive exercises. Arrange the Story Beats (ATSB) is the final exercise in every story. It asks learners to drag three key events into order to test whether they understood the full story.

ATSB was the first Duolingo language exercise to use drag. Every other exercise works by tapping, so that’s exactly what learners did. When nothing happened, many assumed they ran into a bug and quit.

Quits spiked on initial exposure and dropped once learners adapted, demonstrating that the issue was first-use friction. Previous experimental data showed that clarifying instructional copy wasn’t enough since text was largely ignored.

I swapped the hamburger icon, which learners could mistake for a tappable menu, for a 6-dot grip, as it more conventionally signals a “grab” interaction. I also moved it to the right side, where most people’s thumbs rest.

Then, building on what learners already knew...

I explored widely in Figma, then turned the strongest ideas into quick prototypes in Claude Design so I could test what resonated and iterate fast. Here’s a snapshot of a few of them.

Adapting Duolingo Math drag interactions for language exercises

Removing drag altogether and going back to tap

Each layout changed how the exercise looked, but none of them showed learners what to actually do. So I started exploring motion that demonstrates the gesture before learners even touch the tokens, and brought my two strongest ideas to crit.

Upon taking this V1 prototype to crit with both the shuffle demo and wiggle, both PMs and designers agreed that motion was the right direction. The execution just needed rethinking.

Too much motion

Three shuffles felt overwhelming and slowed the exercise down. Learners needed a simpler cue.

Wrong signal

A shuffle could indicate a “pick” interaction, pushing learners toward tapping, which was the exact habit we were trying to break.

The team encouraged me to keep pushing and to jam w/a motion designer ٩(^ᴗ^ )و ´-

I set up a jam session with a motion designer from our design studio to work through the feedback. We talked through what makes movement intuitively register as dragging, like lift, overlap, and a sense of weight.

From there, I refined two directions, a shuffle demo and a tap nudge, to bring to a final stakeholder review, and I learned that even the smallest choices come with substantial tradeoffs.

Here are a few such decisions I thought through along the way.

I brought three directions to PM, engineering, and design studio leads, but...everyone had a different favorite. Engineering leaned toward the tap nudge, studio preferred the shuffle, and PM wanted to take all three to review. To break the tie, I went back to the problem itself.

The drag handle gave learners exactly that cue, with the least engineering effort. So we planned all three as experiments, starting with the handle and adding motion only if the metrics called for it.

1. Done: Phase 1: Drag handle

   A visual cue, no new motion

   Effort

   Shipped

2. 2

   Phase 2: Tap nudge

   Motion only when learners tap

   Effort

   Next, if needed

3. 3

   Phase 3: Shuffle

   A full demo on every load

   Effort

   Later

Next, I presented Phase 1 of the design at product review with my PM, and it was approved to ship. I then worked with our engineer to build it, covering details like dark mode and new edge cases.

Since launching, the design has reduced the total Stories quit rate (our north star metric) by 2.44%.

• Go into feedback with a point of view

  Early on, I’d bring work to crit and leave with more questions than answers. Coming in with a clear recommendation made the feedback sharper and my decisions easier to defend.

• Step back when you lose your intuition

  After so many rounds of feedback from different stakeholders, I lost track of what felt right midway through. Going back to the core problem, a learner tapping and giving up, helped me find my footing again.

• Be resourceful!

  I’d never designed UI motion before. Jamming with a motion designer, learning Figma Motion, and prototyping with AI got me up to speed fast, and showed me how much I can learn by simply reaching out to experts and trying new tools.