Improved Kindle Vella's episode unlock flow with motion prototypes and embedded actions that removed extra steps

• 3 min read

My Role

UX Designer

Challenge

Readers faced a 5-6 step process to unlock the next episode of their stories—2-3 more taps than competitors like Wattpad. Our team wanted to address this by letting users buy in bulk, so users would only need to follow the 6 step process every 5 episodes or so.

Impact

Reduced unlock friction from 5-6 steps to 2-3, reaching competitive parity and introducing bulk unlock while maintaining episode discovery.

Ask about this project
Removing friction from short-form reading

After launching Kindle Vella in 2021, the team started to hear some customer feedback on the unlock experience: unlocking episodes was just way too cumbersome. I was asked to find a way to make it easier.

Assessing the situation

I started out with a competitive analysis of similar features in similar products. To get from one episode to the next, readers had to swipe up from the end of the episode, tap the "next episode" button, wait for the next episode to load, then wait for the paywall to load, and then (finally) tap the unlock button to get reading.

Allow users to bulk unlock chapters. [...] Allow users to scroll to the next story without all the button clicks. You make your users work too hard to give you money.

— Author feedback

Compared to competitors like Wattpad and WEBTOON, our experience had an additional 2 - 3 steps. Compared to television apps like Netflix that automatically forwarded you to the next episode, our CX felt even more cumbersome.

A recording of the full unlocking CX at the beginning.

Ideating

The original brief from the Product team was to design a solution that would allow customers to unlock multiple episodes at once. But it seemed like there were other opportunities to reduce friction in the CX, and so I started exploring in prototypes.

✨ Gif-stravaganza I like to bring in prototypes & motion design really early on in my process. I find that the right interaction design actually informs layout choices & patterns, and motion gives stakeholders a much better sense of user friction than static screens.

An exploration where I brought the preview of the next episode into our end of episode bottomsheet

A "double bottomsheet" exploration, where customers were presented with the preview before loading the whole next episode

A prototype which set the stage for the entire new "frictionless reading" workstream — we moved all of the bottomsheet actions embedded into the story page itself

Making it lovely ✨

Ultimately, we decided to launch the bulk unlock feature first. To make the unlock screen easier to parse, I gave it a branded glow-up. In particular, I wanted to incorporate Kindle Vella's signature "v-portal" element into the paywall, drawing on the element's design that invites readers to dive into the story.

Early visual & UX design iterations of the paywall & buttons, from the least amount of change to our existing CX ("slap another button on it") to the most change ("v-portal glow-up").

Pulling our signature "V-portal" into the paywall helped reinforce our brand, and used the brand to reinforce the value behind the paywall.

Credits

Product Managers: Andrea Hollon, Nirlipta Panda Brand Design: Casandra Straus UX Design Support: Casandra Straus, Jenna Abts