Blinkist

Blinkist — Web Player Redesign

UX/UI | Web | 2019 – 2020

Background

Blinkist’s web player was the primary reading experience for desktop users — a significant portion of the subscriber base. As a product designer at Blinkist, I led the redesign of the web reading and audio player to improve engagement, reduce drop-off, and modernise the visual experience.

The web player had to serve two distinct modes: text reading (blinks) and audio listening. Getting both right on a single interface without compromise was the central design challenge.

The Problem: A Player That Fought Against Reading

The legacy web player had a cluttered interface with too many controls visible at once. The text column was too wide for comfortable reading, the audio controls were awkwardly positioned, and switching between read and listen modes was unintuitive.

Analytics showed that users frequently abandoned mid-blink on web — a problem much less pronounced on mobile. We hypothesised the interface was getting in the way of the reading experience.

A reading player should disappear into the background. The words are the product — the UI is just the frame.

My Design Process

1
Benchmarking Reading Experiences
Studied Medium, Instapaper, Kindle Cloud Reader, and Audible's web player. Identified best-in-class patterns for reading typography, audio controls, and minimal-UI reading modes.
2
Typography & Layout
Set a maximum content column width of 680px for optimal reading line length. Increased font size defaults, improved line height, and added user controls for font size and theme (light/dark/sepia).
3
Audio Controls Redesign
Moved audio controls to a persistent bottom bar — always visible but unobtrusive. Added synchronized highlighting of the current sentence as audio plays, making it easy to follow along.
4
Focus Mode
Designed a one-click Focus Mode that hides all navigation chrome, leaving only the text and essential playback controls. Became the go-to for users who wanted a distraction-free reading session.
5
Key Ideas Navigation
Redesigned the chapter/key idea sidebar for quick navigation. Added progress indicators per key idea and a mini-map of the whole blink for orientation.
Blinkist web player redesign
Redesigned web player with focus mode
Blinkist web player main view
Blinkist key ideas navigation
Key ideas sidebar for quick navigation

Key Design Improvements

  • Optimal reading column width with user-adjustable font size
  • Synchronized audio highlighting — text highlights in sync with audio playback
  • Focus Mode: distraction-free reading with all chrome hidden
  • Dark mode and sepia mode support
  • Sticky audio player — always accessible without scrolling
  • Keyboard shortcuts for all core player actions
Blinkist web player cover
Bukki character
Blinkist web player research
Research and analysis
Blinkist home screen
Home screen
Blinkist search
Search
Blinkist highlights
Highlights feature
Blinkist web player beforeBlinkist web player after
Daily unique visitors chart
Daily unique visitors — results
Blinkist web player analytics

Results

+28%
Increase in blink completion rate on web
+19%
Increase in audio + text combined usage
−24%
Drop in mid-blink abandonment

The redesigned web player significantly improved completion rates. Focus Mode was adopted by 40% of web users within the first month. The synchronized audio highlighting feature drove a measurable increase in users using both audio and text together — a pattern associated with higher retention.

← Back to WorkCakeResume — Design System