APP móvil

contexto y antecedentes...

Tras años utilizando una misma webapp para todos los dispositivos móviles, y debido a la necesidad de adaptarlas a la nueva imagen de marca, se decide desarrollar unas aplicaciones nativas que optimicen los recursos y permitan añadir las nuevas funcionalidades adoptadas en el resto de dispositivos.

Antigua interfaz de Movistar con la imagen de marca anterior.

grupos de trabajo...

Se decide formar grupos de trabajo con miembros del equipo de producto y desarrollo para ver cómo plantear el desarrollo de las nuevas apps. Se decide apostar por la creación de una para cada sistema (Android e iOS) y que cada aplicación sirva tanto para móviles como tablets.

benchmarking...

Se hace un estudio de las funcionalidades y de las interfaces de las apps de diferentes competidores para buscar tendencias y analizar buenas prácticas.

Se analizan las diferentes apps de la competencia.

1. estudio ergonómico...

Después de estudiar las interfaces, detectamos que la mayoría de las aplicaciones colocaban el acceso al menú en zonas poco accesibles

Áreas accesibles en la pantalla de móviles y tablets.

Como el acceso al menú de navegación es importante en la plataforma, debido al alto número de secciones disponibles, se apuesta por colocar el icono de acceso en la parte más accesible tanto en la versión móvil como en la de tablet, siendo de las primeras plataformas en hacer dicha apuesta. También se apuesta por incluir, en el menú de tablet, el avatar del perfil activo, al ser éste un dispositivo comúnmente compartido, lo contrarío del móvil, que es más personal.

Diseños de la barra de navegación de móvil y tablet, apostando por un acceso predominante del menú en las zonas más accesibles.

2. navegación y estructura...

Se define la estructura de secciones de las apps. Se mantienen las secciones disponibles en el resto de dispositivos para homogeneizar la experiencia (cine, series, etc.), pero se añaden otras estructuras para dar cabida a las funcionalidades especificas de estos dispositivos (descargas, notificaciones, etc.), de la television en directo y de la gestión de la cuenta y la app.

Imagen de las diferentes áreas / agrupaciones del menú y de las cabeceras de cada una.

También se define el sitemap y la navegación entre los distintos niveles, elementos y secciones, además de los gestos disponibles para realizarlas.

Wireframes de ejemplo de navegación entre carruseles, listado y fichas detalle.

Diseño del menú desplegado en dispositivo móvil y en tablet horizontal.

Además de adaptar y desarrollar las funcionalidades disponibles en las Smart TVs y descodificadores, se implementan algunas exclusivas de los dispositivos móviles.

3. nuevas funcionalidades...

Se permite la descarga de contenidos al dispositivo para su visualización sin conexión, habilitando colas de descargas.

descargas...

compartir...

Se habilita compartir contenidos con otras personas desde la aplicación de forma nativa.

player flotante...

Se desarrolla el player en ventana flotante para permitir realizar otras tareas en el dispositivo sin interrumpir la experiencia.

mayores retos...

El mayor reto de este proyecto, fue la adaptación de las estructuras ya existentes en televisión (en especial, la guía de TV y la ficha detalle) a la anchura de los dispositivos móvil.

guía móvil...

La adaptación de la complejidad de la guía de televisión (conocida como guía americana) a móvil, fue el mayor reto del proyecto. En tablet fue sencillo, porque la estructura y espacio era similar a los dispositivos grandes, pero en móvil debíamos simplificar la información mostrada y resolver la consulta entre canales. Se optó por permitir dos tipos de navegación entre canales; colocando un scroll horizontal en la parte superior para permitir la consulta de un canal en concreto (facilitando así su localización), y habilitando el desplazamiento entre canales con gestos (swipe) para permitir el descubrimiento por franja horaria de forma rápida y cómoda.

ficha detalle...

La simplificación de la ficha detalle es otro ejemplo de mobile first. Se crearon elementos que crecían y se adaptaban a tamaños mayores. Esto permitió simplificar los desarrollos y crear una versión única adaptativa.

Adaptación de la guía de televisión para tablet y móvil.

Versiones de tablet y móvil de la ficha detalle.

estudios...

Durante el largo periodo de planificación y desarrollo de este proyecto, se realizaron multitud de estudios cuantitativos (necesidades, iconografía, evaluación de rendimiento, tests A/B) y cualitativos (interacción, usabilidad, focus groups, card sorting). Algunos se realizaron de forma online, utilizando herramientas como Google Forms, Mailchimp, Microsoft Teams y UserZoom, y otros de forma presencial, utilizando prototipos funcionales cuando era necesario.

Con los datos obtenidos en dichos estudios, tests A/B y métricas, se fueron refinando las soluciones planteadas hasta encontrar el equilibrio entre funcionalidad y desarrollos.

lecciones aprendidas...

Limitar el desarrollo a una única App por plataforma, facilitó mucho los desarrollos y redujo los tiempo de salida a producción.

La importancia de definir y mantener un buen sistema de diseño, facilita mucho el trabajo del equipo de diseño, y reduce el número de elementos a desarrollar.

Facilitar flujos, prototipos, y mantener reuniones periódicas con los equipos de producto y desarrollo, resolvió muchas de las dudas y aceleró el desarrollo.

© Copyright Rogelio Casado 2025. Todos los derechos reservados.