UX Design · Design Sprint

FB Password
Recovery

Un rediseño estratégico del flujo clásico de recuperación de contraseñas de Facebook, enfocado en maximizar la comodidad del usuario y reducir el abandono operativo.A strategic redesign of Facebook's classic password recovery flow, focused on maximizing user convenience and reducing abandonment.

Mi RolMy Role
UX/UI Designer Autónomo · Solo ProjectFreelance UX/UI Designer · Solo Project
MetodologíaMethodology
Design Sprint · Enfoque ágil de 2 semanasDesign Sprint · Agile 2-week approach
DuraciónDuration
2 Semanas2 Weeks
ObjetivoGoal
Minimizar la tasa de abandono de cuentaMinimize account abandonment rate
Facebook Password Recovery

Flujo completo de recuperaciónComplete Recovery Flow

Inicio de Sesión
Paso 01Step 01
Inicio de SesiónLogin Page
Elegir Canal
Paso 02Step 02
Elegir CanalChoose Method
Contactar Amigos
Paso 03Step 03
Contactar AmigosTrusted Contacts
Verificación Facial
Paso 04Step 04
Verificación FacialFacial Verification
Verificación por Voz
Paso 05Step 05
Verificación por VozVoice Verification

← Desliza horizontalmente para navegar el flujo completo →← Swipe horizontally to navigate the complete flow →

El DesafíoThe Challenge

Un flujo roto que genera abandonoA broken flow that drives abandonment

El flujo clásico de recuperación de contraseña de Facebook era fragmentado y estresante: pantallas repetitivas, textos complejos y falta de orientación visual clara. Afectaba especialmente a personas mayores o con competencias digitales básicas, que caían en bucles de reenvío compulsivo de códigos sin éxito. Facebook's classic password recovery flow was fragmented and stressful: repetitive screens, complex texts, and a lack of clear visual guidance. It particularly affected elderly people or those with basic digital skills, who fell into endless loops of compulsively resending codes without success.

El objetivo fue crear un flujo seguro, rápido, empático y accesible que redujera la fricción operativa y la ansiedad cognitiva en cada paso del proceso. The goal was to create a secure, fast, empathetic, and accessible flow that reduced operational friction and cognitive anxiety at every step of the process.

MetodologíaMethodology

Design Sprint · 5 días5 days

D1
EntenderUnderstand
Análisis y mapeo del problemaProblem mapping & analysis
Análisis exhaustivo del flujo tradicional. Punto crítico identificado: la pantalla de introducción de código con problemas de visibilidad y retroalimentación casi inexistente para el usuario. Exhaustive analysis of the traditional flow. Key pain point identified: the code entry screen with low visibility and almost non-existent user feedback.
D2
BocetarSketch
Crazy Eights y exploraciónCrazy Eights & exploration
Técnica Crazy Eights para visualizar formas de simplificar la introducción de dígitos y crear jerarquía visual clara que guíe al usuario sin ambigüedad. Crazy Eights technique to visualize ways of simplifying digit entry and creating a clear visual hierarchy that guides the user unambiguously.
D3
DecidirDecide
Flujo unificado en 3 pasosUnified 3-step flow
Decisión de arquitectura: flujo lineal con 3 pasos nítidos (Identificación, Verificación Unificada, Nueva Contraseña Segura) con alternativas accesibles integradas. Architecture decision: linear flow with 3 clear steps (Identification, Unified Verification, New Secure Password) with integrated accessible alternatives.
D4
PrototiparPrototype
Alta fidelidad en FigmaHigh fidelity in Figma
Prototipo interactivo de alta fidelidad en Figma con micro-interacciones y flujos alternativos de accesibilidad: Face ID biométrico y autenticación por voz asistida por IA. High-fidelity interactive prototype in Figma with micro-interactions and alternative accessibility flows: biometric Face ID and AI-assisted voice authentication.
D5
ValidarValidate
Tests de usabilidad con usuarios realesUsability testing with real users
Pruebas cognitivas y de usabilidad que validaron cómo la claridad visual elimina la ansiedad por incertidumbre y reduce significativamente los intentos fallidos de recuperación. Cognitive and usability tests that validated how visual clarity eliminates time-uncertainty anxiety and significantly reduces failed recovery attempts.

Soluciones ClaveKey Solutions

Tres pilares de la interfazThree pillars of the interface

Teclado Numérico NativoNative Numeric Keypad
Activación automática del teclado numérico con dígitos separados en casillas claras y estados de error explícitos y empáticos que no culpan al usuario. Automatic activation of the numeric keypad with separate digits in clear boxes and explicit, empathetic error states that do not blame the user.
Gestión de Retraso de CódigosCode Delay Management
Temporizador dinámico no estresante con guía contextual en lenguaje empático que previene el bucle de reenvíos compulsivos y reduce la ansiedad de espera. Non-stressful dynamic timer with contextual guidance in empathetic language that prevents compulsive resending loops and reduces wait anxiety.
Accesibilidad AvanzadaAdvanced Accessibility
Canales alternativos integrados: escaneo facial biométrico y autenticación por voz para personas con dificultades motoras o visuales, sin pasos extra. Integrated alternative channels: biometric facial scanning and voice authentication for people with motor or visual difficulties, without extra steps.

Prototipo InteractivoInteractive Prototype

Flujo en vivo — FigmaLive Flow — Figma

Explora el prototipo de alta fidelidad directamente. Puedes navegar por el flujo completo de recuperación con todas las interacciones y micro-animaciones. Explore the high-fidelity prototype directly. You can navigate the complete recovery flow with all interactions and micro-animations.

Explorar el proyectoExplore the project

📝 Artículo en Medium📝 Medium Article