Squeezed CTA with zero visual cues
The button was isolated at the bottom of a generic card without media support, resulting in low salience and high drop-off.
Product Design / Retention & Growth
Rocketseat — Re-architecting Learning Resumption
A media-first progress system designed to eliminate cognitive friction and trigger instant study continuity for 220k+ students.
- Role
- Product Design (UX/UI)
- Context
- Rocketseat Web & Mobile
- Timeline
- 2025 – 2026
- Framework
- Goal-Gradient & Media-First
Context
The platform Home page serves as the single most critical retention trigger: the moment a student decides whether to continue an active module or abandon the session. At the same time, it is prime real estate contested by Marketing for promotional campaigns and live events.
The challenge was to resolve friction between educational continuity and marketing visibility, prioritizing quick cognitive recognition over static decorative cards.
18%
baseline click rate captured by the main resume CTA
38%
of active students made up to 4 extra clicks to bypass the card
12%
direct play resumption rate on mobile devices
0
visual anchors to trigger working memory of the project
Problem
Lack of working-memory triggers
Pure text titles failed to evoke immediate recall of the build or instructor, forcing students to search for context elsewhere.
Decontextualized progress
An isolated percentage failed to evoke the Goal-Gradient Effect. Numbers alone do not convey a tangible sense of proximity to completion.
Inverted hierarchy & navigation detours
Track titles dominated actionable lessons, pushing 38% of active users into a tedious detour across multiple subpages to hit play.
Level 2 · In progress18 min left
React & Next.js Track
Design System Architecture
Continue Lesson
Pillar 1
Visual memory cues & goal-gradient momentum.
Images anchor working memory far quicker than text. By placing high-contrast project thumbnails and actionable time estimates at the center of the viewport, students recognize their exact task in milliseconds, removing mental delay before resuming.
System structure: Home trigger, progressive levels & ecosystem
01
Media-First Home
Thumbnail · Time left
02
Narrative Levels
Milestones · Deliverables
03
Sidebar Space
Live events · Marketing
04
Ecosystem Sync
Mobile & Web consistency