Rediseño de Lichess.org. Simplificando el ajedrez de alto rendimiento.
Lichess es elogiada por su velocidad y ética. También arrastra una interfaz densa, con jerarquía débil y funciones críticas ocultas. Este proyecto moderniza la experiencia visual y funcional sin sacrificar la potencia técnica que sus usuarios valoran.
Alta densidad de información y curva de aprendizaje elevada.
Los jugadores experimentan una carga cognitiva innecesaria: jerarquía visual débil, funciones críticas escondidas en menús secundarios y feedback ambiguo durante la partida.
Modernizar la experiencia sin sacrificar la potencia técnica.
Convertir Lichess en una herramienta intuitiva que acompañe al jugador intermedio, preservando la velocidad y el rigor que los expertos valoran.
Densidad visual
Pantallas saturadas de números, menús y estados sin jerarquía clara.
Navegación oculta
Lecciones, puzzles y análisis requieren caminos poco predecibles.
Feedback débil
No es claro cuándo es tu turno o cuándo terminó la partida.
Pre-partida compleja
Configurar una partida competitiva requiere demasiados pasos.
Un recorrido iterativo, no lineal.
Cada fase alimenta a la siguiente y revisa las anteriores. El resultado es un diseño que justifica cada decisión con evidencia.
Investigación UX
Desk research y benchmarking (Chess, Chessable). Encuestas y entrevistas para validar frustraciones reales.
Arquitectura de información
Tree Testing y mapa de sitio. Reorganización basada en modelos mentales de ajedrecistas.
Diseño de interfaz
Atomic Design + Design Tokens. Sistema escalable de Átomos, Moléculas y Organismos.
Validación
Prototipo Hi-Fi de 3 flujos clave. Usability testing y A/B testing para iterar.
Del dato a la hipótesis.
El objetivo fue transformar la complejidad del ajedrez online en una estructura lógica centrada en las personas. Encuestas, entrevistas, benchmarking y tree testing.
Lichess es superior en rendimiento. Falla en guía.
Benchmarking comparativo contra Chess.com y Chessable reveló que la plataforma no ofrece una guía clara para el jugador intermedio. La densidad informativa, justificada para expertos, castiga al que aprende.
El usuario que busca mejorar pero se siente abrumado.
Lo identifiqué a través de encuestas y entrevistas. No es principiante ni experto: es el intermedio que quiere subir de nivel y no encuentra dónde pisar.
«Siento que la pantalla está llena de números y opciones que no entiendo.»
— Entrevista 04 · 1500 ELO«Me cuesta encontrar las lecciones o los puzzles cuando quiero estudiar.»
— Entrevista 02 · 1280 ELO«A veces no sé si es mi turno o si la partida terminó porque no hay señales claras.»
— Entrevista 07 · 1650 ELOPuntos de fricción: la pre-partida y el análisis posterior.
Mapeé la experiencia de "jugar una partida competitiva". Los momentos críticos se concentran en la configuración compleja y en la dificultad para interpretar errores después del juego.
Nueva jerarquía, validada con Tree Testing.
Reestructuré la navegación en función de los modelos mentales de los jugadores. Nueve nodos principales: Jugar · Torneos · Resolver · Aprender · Analizar · Ver · Comunidad · Apoyar · Cuenta. El nuevo task flow permite iniciar una partida en menos de 3 clics.
- Tree Testing con usuarios reales — éxito 100% en búsquedas secundarias.
- Task flow simplificado con menos pasos y menos decisiones.
Cuatro colecciones de variables. Un solo sistema.
El sistema está construido en Figma con Variables separadas por rol: Primitives (11 colores base), Semantic (12 roles funcionales), Spacing (escala de 11 pasos) y Radius (7 pasos).
Valores crudos. No se usan directamente en componentes; alimentan la colección Semantic.
Tokens por función. Cada componente del prototipo referencia únicamente estos alias.
Cambiar el tema implica re-mapear Semantic → Primitive. Los componentes no tocan los valores crudos nunca.
Escala pareja sobre base 4. Indexada por pasos (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16).
Selector de modalidad. Estado default sobre surface/raised; estado selected con border y label en accent/sand.
Botón primario sobre accent/sand con texto en accent/ink. Hover baja opacidad; active traduce 1px.
Piezas fundamentales
- Iconografía funcional (Jugar, Torneos, Resolver, Aprender, Analizar…)
- Botones · Primary sand, Secondary ghost, QuickPlay
- Labels, badges 'Live', 'Rating'
- Hairlines 1px — separador primario
Combinaciones funcionales
- QuickPlayButton — tiempo + modalidad
- ItemCard · torneos en vivo
- ItemLink · fila de nav lateral
- Badge + header de card
Secciones completas
- SideNavBar fija (256px desktop)
- Section-Hero 'Jugar Ahora'
- ContainerCards bento (Puzzle · Torneos · Aprender)
- Template reutilizable (Home, Resolver, Comunidad, Apoyar)
Dos sistemas, un mismo rigor.
Este case study usa un sistema editorial claro — Playfair Display, DM Sans e IBM Plex Mono — pensado para narrar el proceso. El prototipo usa un sistema nocturno pensado para jugar. Son decisiones deliberadas, no accidentales.
Del sistema al producto en movimiento.
El sistema cobra vida en un prototipo Hi-Fi funcional. No solo muestra pantallas: simula una experiencia real que resuelve los problemas detectados en la investigación.
Abrí el archivo de Figma y navegá los flujos reales.
Incluye Home, Resolver, Torneos, Comunidad, Apoyar y los 3 task flows completos con Smart Animate. Tamaño base: 1440×1024.
Para el rediseño de Lichess, definí tres flujos estratégicos basados en los puntos de dolor detectados en la investigación y las violaciones heurísticas de gravedad alta.
Onboarding y Orientación Inicial
Este flujo resuelve la ausencia total de guía para usuarios nuevos (Problema 2). Según mi investigación, el 100% de los principiantes no encontró un "paso a paso" al ingresar, enfrentándose a un muro de información hostil.
El Recorrido: Al registrarse o ingresar por primera vez, el sistema solicita el nivel de ajedrez mediante una interfaz limpia. Al seleccionar "Principiante", se activa un tour interactivo que dirige al usuario a la pestaña "Aprender", resaltando los "Fundamentos de Ajedrez" como punto de partida.
Fundamento Técnico: Soluciona la violación de gravedad máxima (5) en la Heurística #10 (Ayuda y Documentación), transformando la entrada a la plataforma en un proceso acompañado y pedagógico.
Sala de Juego: Dashboard Modular y Prevención de Errores
Ataca directamente la sobrecarga cognitiva (Problema 1) y el lenguaje técnico excluyente (Problema 3), aplicando principios de divulgación progresiva para mantener un diseño minimalista.
El Recorrido: El usuario llega a una Home organizada por módulos donde elementos secundarios (Lichess TV, donaciones) aparecen agrupados o colapsados. Al cliquear el CTA principal ("Jugar"), las opciones se presentan en lenguaje natural (ej: "Partida Rápida - 10 min") eliminando jerga como "Blitz" o "Bullet".
Fundamento Técnico: Apliqué la Heurística #8 (Diseño Estético y Minimalista). Además, utilicé la Ley de Fitts al espaciar los botones de ritmo de juego para evitar clics accidentales y cerré el flujo con un estado de "Buscando oponente", cumpliendo con la Heurística #1 (Visibilidad del estado del sistema).
Navegación Experta: Acceso Directo y Salud Visual
Diseñado para eliminar la frustración del usuario avanzado que pierde tiempo navegando menús densos para encontrar herramientas críticas como el Editor de Tablero (Problema 6).
El Recorrido: Sebastián utiliza una barra de navegación simplificada. Al cliquear en la categoría de primer nivel "Analizar", se despliega un submenú optimizado. En solo dos clics, el usuario accede al "Tablero" o a sus "Estudios".
Fundamento Técnico: Para mitigar la fatiga visual detectada en sesiones largas (Problema 8), este flujo integra un Modo Oscuro Nativo y tipografías con contraste WCAG AA, reemplazando la fuente actual de 12px por una escala más accesible y legible.
Implementé microinteracciones con Smart Animate y tiempos entre 300ms y 500ms, alineados con los estándares de la industria. Cada interacción lleva State → Reset Scroll para que el usuario siempre inicie una nueva vista desde arriba.
No hay diseño exitoso sin validación.
Pruebas de usabilidad y A/B testing comparando la interfaz original de Lichess con la propuesta de rediseño. El feedback ajustó áreas táctiles y jerarquía en móvil.
- Hallazgo clave: herramientas de análisis identificadas [X]% más rápido.
- Iteración: áreas de tap ≥ 44px en móvil.
- Ajustes de contraste en estados de error.
El balance entre funcionalidad y modernidad.
¿Cómo intervenir una herramienta utilizada por millones de expertos sin romper su flujo? La respuesta no estuvo en la decoración, sino en la infraestructura del diseño.
De interfaz densa a experiencia fluida.
Un sistema basado en componentes atómicos y una arquitectura validada permitieron un producto que reduce la carga cognitiva, cumple WCAG y es técnicamente escalable gracias a Auto Layout y componentes maestros en Figma.
Diseño como proceso iterativo basado en datos.
Entender que una frustración como "no encuentro el botón" es en realidad un fallo de jerarquía visual fue el motor de cada cambio. Validar antes que suponer.
¡Gracias por llegar hasta acá! Hablemos del proceso.
Si querés conocer más sobre mi proceso o ver el archivo de Figma completo, escribime. Feliz de caminar el caso contigo.