Case study · Product Design & 10-foot UI
My Home: rediseño de la experiencia de inicio en Smart TV
Diseño y desarrollo de una pantalla de inicio para televisores LG con webOS, orientada a una experiencia más amigable y centrada en el usuario. La propuesta elimina el contenido patrocinado, reúne en un solo lugar las plataformas que realmente se usan y convierte la TV en un espacio de aprendizaje diario de inglés, con entrevistas, noticias, vocabulario técnico, frases de cine y gramática.
- Proyecto
- My Home · iniciativa propia
- Rol
- Product Designer · diseño y desarrollo
- Plataforma
- LG webOS 25 · TV 4K
- Disciplinas
- Product Design · UX/UI para TV · Design Systems · Motion · Desarrollo asistido por IA
Contexto y oportunidad
Una pantalla de inicio diseñada para la publicidad, no para el usuario.
El inicio de los televisores está dominado por contenido patrocinado: banners que ocupan casi media pantalla, categorías promocionadas y filas de recomendaciones pagadas. Las plataformas que el usuario realmente utiliza quedan mezcladas con aplicaciones que nunca abre, lo que aumenta la carga cognitiva y el tiempo necesario para llegar al contenido.
A esto se suma una oportunidad desaprovechada: la TV es una de las pantallas de mayor uso en el hogar, pero no acompaña objetivos personales como el aprendizaje de un idioma. El proyecto parte de un caso concreto —un usuario con nivel B2 de inglés que busca practicar a diario— para explorar cómo la pantalla de inicio puede aportar valor en lugar de interrumpir.
Tres objetivos
Mi rol
Del diagnóstico a la implementación en el dispositivo real.
Lideré el proyecto de punta a punta: diagnóstico de la experiencia actual, arquitectura de la información, wireframes, sistema de diseño, motion y desarrollo de la aplicación web para webOS, instalada y validada en un televisor real. El desarrollo asistido por IA permitió iterar las decisiones de diseño en ciclos cortos y validarlas directamente con el control remoto.
- 01Diagnóstico de la experiencia de inicio actual y de las necesidades del usuario.
- 02Arquitectura de la información y wireframes de la estructura.
- 03Sistema de diseño: superficies translúcidas, estados de foco y un único color de acento.
- 04Diseño de interacción para control remoto: navegación direccional, foco y estados.
- 05Desarrollo e instalación de la aplicación en webOS mediante el modo desarrollador.
- 06Automatización del contenido diario: videos, tráileres, clima y práctica de inglés.
- 07Motion graphics para la comunicación del caso.
01 / El problema
El primer contacto del usuario con la TV era publicidad.
Hero patrocinado
Un banner promocional ocupa cerca de la mitad superior de la pantalla, el espacio de mayor atención.
02 / Wireframes y decisiones
Primero la estructura; después, el detalle.
Se definió una jerarquía clara: información contextual del día en la parte superior, un área principal que presenta las novedades de la plataforma enfocada, la fila de aplicaciones y, debajo, las filas de contenido.
En la primera versión, la práctica de inglés se ubicaba justo debajo de las aplicaciones. Las pruebas en el televisor mostraron que recargaba la parte superior de la pantalla. En la segunda versión se trasladó al final: la parte superior conserva una lectura limpia y el aprendizaje queda a una fila de distancia.
Principios de UI para TV
Diseño para control remoto
Toda la navegación funciona con flechas y OK, sin rutas sin salida.
Foco que guía la atención
El elemento activo aumenta su escala (×1.1), gana luminosidad y profundidad.
Legibilidad a distancia
Tipografía de gran tamaño, alto contraste y textos breves para lectura a tres metros.
Optimizado para 4K
Recursos gráficos preparados para la densidad de píxeles de las pantallas 4K.
03 / Sistema de diseño
Superficies translúcidas, foco y un único acento.
Un sistema visual mínimo y consistente: imágenes de fondo a pantalla completa, superficies translúcidas y un único color de acento, alineado con la identidad de marca del portafolio.
Color
- Fondo #000000
- Superficie translúcida 8–20% blanco
- Acento #5A8FFF
Tipografía
SF Pro · Display 62 · Cuerpo 26 · Etiqueta 16
Componentes
Tarjetas de vidrio, barra lateral, estado de foco, anillos de progreso
04 / Interacciones
Del wireframe a la pantalla final, en cuatro flujos.
Cada flujo presenta la estructura en wireframe, la pantalla final y la interacción con el control remoto.
Inicio y novedades
Navegación
Aprendizaje
Meta diaria
Proceso de trabajo
Cinco fases, del diagnóstico a la operación diaria.
Fase 01 · Diagnóstico
Comprender la experiencia actual.
Se documentó la pantalla de inicio original, se identificó el contenido patrocinado y se definieron las necesidades del usuario.
Resultados
Una experiencia de inicio funcional y en uso diario.
Experiencia
- Aplicación implementada y en uso diario en un televisor LG de 55" con webOS 25.
- Pantalla de inicio sin contenido patrocinado.
- Siete plataformas de streaming y acceso a la tienda en una sola fila.
- Seis secciones de contenido en inglés con actualización diaria automática.
Aprendizaje de inglés
- 56 expresiones de vocabulario técnico, cada una con un video de referencia.
- 56 frases de cine con su escena original y el tráiler oficial.
- 24 estructuras gramaticales de uso cotidiano.
- Meta diaria con indicadores de progreso y racha.
Nota metodológica: se trata de una iniciativa propia; los resultados describen el alcance implementado y su uso, no métricas de negocio.
Aprendizajes
Aprendizajes
01En TV, la interacción se diseña desde el control remoto
A tres metros de distancia, el foco, la jerarquía y la navegación direccional determinan la experiencia más que el detalle visual.
02Las restricciones de la plataforma también son decisiones de diseño
webOS no permite reemplazar el botón de inicio y YouTube no permite reproducir sus videos dentro de aplicaciones locales. La solución se diseñó en torno a esas restricciones: acceso a la aplicación en un clic y reproducción en la app oficial de YouTube.
03Validar en el dispositivo real cambia las decisiones
Aspectos como la nitidez en 4K o el peso visual de la parte superior solo se hicieron evidentes al probar la aplicación en el televisor.
Cierre
Del problema a la solución, en movimiento.
My Home transforma la pantalla de mayor uso del hogar en una experiencia centrada en el usuario: sin contenido patrocinado, con acceso directo a sus plataformas y una práctica de inglés que se renueva cada día.