Telet贸n - Aplicat贸n

Mobile Sketching Wireframes Ideation
  • A帽o: 2019 - 2020
  • Cliente: Telet贸n
  • Equipo:
    • Project manager
    • Tres dise帽adoras
    • Desarrolladores
Mi rol en el proyecto:
  • Resumir features y secciones al inicio del proyecto.
  • Dibujar bocetos y wireframes de las primeras ideas.
  • Proponer los primeros flujos de usuario.
  • Construir las primeras ideas de la interfaz en Sketch.
  • Guiar al equipo de dise帽o UI/UX durante todo el proceso.

Boceto de una aplicaci贸n m贸vil en blanco y negro.
Bocetos iniciales de la app.

Contexto

A mediados del 2019, el cliente buscaba actualizar la aplicaci贸n m贸vil para la pr贸xima campa帽a de la Telet贸n, agendada para el 29 y 30 de noviembre del mismo a帽o.

Objetivos

Objetivo principal: Instar a a las personas a participar en la Telet贸n desde sus celulares. Esta necesidad surgi贸 despu茅s de que Telet贸n se dio cuenta que el p煤blico ya no estaba tan conectado a el contenido televisivo que transmit铆an durante la campa帽a.

Objetivos espec铆ficos:

  • Mostrar eventos relacionados a la Telet贸n durante la campa帽a, ya sean actividades en colegios, vecindarios, fundaciones, etc.
  • Informar sobre noticias y eventos de la Telet贸n.
  • Visualizar los 煤ltimos tweets de la cuenta oficial de Telet贸n.
  • Permitir que las personas puedan inscribirse y participar en los eventos que mostrar谩 la app.

Usuarios

El arquetipo de usuario de la aplicaci贸n se defini贸 con el equipo de dise帽adoras a trav茅s de la construcci贸n de user personas, bas谩ndonos en todo lo que sab铆amos de la Telet贸n, ya que es un evento que todo aquel que haya vivido en Chile por un par de a帽os, conoce.
En la construcci贸n de arquetipos monitore茅 el trabajo de la dise帽adora a cargo de esta tarea, para asegurar que est谩bamos yendo por el camino correcto.

Arquetipos de persona que dona dinero a la Telet贸n y persona que es voluntaria de la campa帽a. Estos fueron hechos por una de las dise帽adoras de nuestro equipo.
Diagrama de una aplicaci贸n dibujado en una pizarra.
Dibujos de diagramaci贸n y funcionalidades.

Proceso

Haciendo las user personas se ten铆a una idea b谩sica de lo que se necesitaba hacer. En esta etapa del proceso de dise帽o, siento que 鈥攑ersonalmente鈥 las ideas fluyen mejor cuando se recurre a bocetos r谩pidos. Inicialmente ten铆a una idea vaga de c贸mo ser铆a la interfaz de la app, y poner eso en un boceto me ayud贸 a aterrizar esa idea.
Estas ideas se discutieron con el Project Manager a cargo, quien nos ayud贸 a definir la funcionalidades de la aplicaci贸n y a hacer sentido a lo que se estaba proponiendo desde el lado del dise帽o, lo que permiti贸 que se pudiese acotar ideas a un entregable que se pudiese desarrollar dentro del plazo establecido.

A esto le sigui贸 la construcci贸n de prototipos de baja fidelidad en Sketch para formalizar lo que se hab铆a conversado mientras se trabaj贸 en la pizarra, y ver c贸mo todo se distribu铆a en las dimensiones de un tel茅fono m贸vil. En esta etapa se experiment贸 con un prototipo en escala de grises animado, para asegurar que el flujo de navegaci贸n fuese comprensible.

Wireframe en escala de grises que muestra el detalle de un evento.
Wireframe en escala de grises que muestra el detalle de un evento.
Gif que muestra el flujo de la app en escala de grises.
Gif que muestra parte del flujo de la app grabado con Quicktime.

Remote User Testing

Despu茅s de algunas iteraciones con el equipo para definir estilo gr谩fico, ten铆amos un prototipo de alta fidelidad que usamos para realizar algunas pruebas con potenciales usuarios. Para esto se us贸 primero Maze, que permiti贸 evaluar el comportamiento de los usuarios a trav茅s de una prueba remota no guiada, y a cambio obtuvimos un reporte de usabilidad. Este ejercicio se realiz贸 dos veces.

Heatmaps o mapas de calor en pantallas de celular que muestran d贸nde clickearon m谩s los usuarios.
Heatmaps generados por Maze.

Hallazgos y observaciones

Con ambos reportes de usabilidad de Maze, adem谩s de comentarios recibidos por compa帽eros de trabajo con los que se prob贸 la aplicaci贸n en persona, salieron a la luz 鈥攃omo es de esperarse en los proyectos鈥 un mont贸n de falencias en t茅rminos de jerarquizaci贸n, uso correcto de textos y problemas de navegaci贸n. Uno de los principales cambios fue mover el men煤 abajo, para permitir un acceso m谩s c贸modo, al estar m谩s cerca del alcance de los pulgares. Se a帽adi贸 un bot贸n flotante para aportar monetariamente, ya que es de las acciones en las que m谩s pensaban los usuarios al pensar en la Telet贸n. Adem谩s, se unific贸 la secci贸n de calendario y mapa, ya que ambos ofrec铆an una visi贸n de los eventos relacionados con la Telet贸n.

Tres pantallas que muestran el proceso de dise帽o de una de las secciones de la aplicaci贸n.
Proceso para el dise帽o de la secciones que tienen una diagramaci贸n estilo timeline o listado, como el inicio o la secci贸n de eventos.

Aprendizajes

Formar parte del proceso de dise帽o de un aplicaci贸n m贸vil fue realmente enriquecedor, en el sentido de que fue una de mis primeras experiencias dise帽ando en este formato. El hecho de que el cliente haya sido una de las instituciones m谩s conocidas en Chile le agreg贸 su cuota de estr茅s al proyecto. Una de las instancias que m谩s disfrut茅 fue definir las caracter铆sticas que tendr铆a la aplicaci贸n junto al Project Manager. Aprecio esos momentos de colaboraci贸n con profesionales de otras 谩reas.

Si bien logramos el prop贸sito, har铆a ciertas cosas de manera distinta, siento que siempre es bueno hacer una autocr铆tica para seguir mejorando. Empezando por estudiar m谩s a los usuarios finales, y testear m谩s la aplicaci贸n, sobre todo en etapas m谩s tempranas.
Creo que una gran deuda fue no poner atenci贸n a la accesibilidad de la aplicaci贸n, considerando que Telet贸n trabaja con personas con distintas capacidades. Habr铆a sido pertinente y necesario dise帽ar pensando en personas con problemas de visi贸n, por ejemplo.

Tambi茅n me gustar铆a haber pasado m谩s tiempo en la etapa de ideaci贸n, e implementar alguna t茅cnica de dise帽o como brainstorming, card sorting o empathy maps para lograr un producto m谩s completo, comprensible y coherente. Sin embargo, mucho depende del contexto, los plazos y el presupuesto para el proyecto. Aun as铆, lo recuerdo como una experiencia muy valiosa y me encantar铆a tomar un desaf铆o similar.

Cuatro de las vistas definitivas de la aplicaci贸n.
Diagrama de una aplicaci贸n dibujado en una pizarra.