UX/UI Case study “Red Emancipatic”
Haciendo red. Diseñar una nueva funcionalidad que conecte a miembros y voluntarios de cara a facilitar la integración de los mayores en un mundo cada vez más digitalizado.
Si quieres consultar la versión corta, puedes visitar el Behance aquí.
Este artículo ha sido escrito mano a mano con mi compañera de equipo Esther Calaco. Si lo quieres leer en su versión en inglés lo puedes ver aquí, el cual, fué seleccionado y publicado en Bootcamp UX Design.
Seguir cumpliendo años y disfrutar de cada instante es lo que esperan las personas mayores al alcanzar cierta edad. Sin embargo, se encuentran grandes dificultades derivadas del uso de la tecnología. La digitalización y la conectividad deben estar al servicio de las personas y no ser un motivo de desconexión para desenvolverse en el día a día. Es aquí donde entra la alfabetización digital.
Red Emancipatic, el resultado, un proyecto multidisciplinar de dos semanas de duración, en el que abordamos una problemática existente, de un cliente real y donde participamos las 5 disciplinas de la academia: UX/UI, Marketing, Full Stack, Ciberseguridad y Data Science.
El objetivo era crear un servicio digital, que no fuera una app pero que se usara desde el móvil, con el que gestionar una comunidad colaborativa entre miembros y voluntarios, que ofreciera ayuda a la gente mayor para solventar los problemas derivados de un mundo cada vez más digitalizado, a la vez que fomentara las donaciones con las que se sostiene no solo la organización, si no también la posible implementación de este nuevo servicio.
Creamos un producto en el que las personas mayores y dependientes pudieran dar con una forma sencilla e intuitiva de resolver sus dudas, aprender cosas nuevas, adentrarse en la tecnología de la mano de un voluntario y, una vez reunieran los conocimientos necesarios, convertirse ellos también en maestros. Seguridad, autogestión y empoderamiento como principales ganancias.
¿Quién es Emancipatic? Nuestro cliente, una organización sin ánimo de lucro (OSAL) donde sueñan con una sociedad más inclusiva en la que las personas mayores también sean parte activa; ayudan a construirla facilitando el acceso de los mayores de 50 años a la tecnología, puerta de entrada a la sociedad actual.
PLANIFICACIÓN
Catorce personas, cinco disciplinas, (casi) dos semanas, un proyecto real y design thinking como arma secreta para que todo fuera sobre ruedas.
En ese tiempo, como product designers, teníamos que coordinar todos los esfuerzos para sacar un producto mínimo viable que poder presentar al cliente; la primera semana fue un mano a mano con marketing y data science donde desarrollamos las fases de descubrimiento, estrategia, ideación y conceptualización para, finalmente, plasmarlo todo en un prototipo, con su sistema de diseño, que entregar a full stack y ciberseguridad.
DESCUBRIMIENTO
(Puedes consultar la bibliografía al final de este artículo.)
Una vez analizamos el brief que nos da el cliente y después del kick off, tenemos que adentrarnos en el contexto, necesidades y motivaciones de los usuarios, empatizar; iniciamos la investigación.
DESK RESEARCH
Dado el poco tiempo decidimos centrar nuestra investigación en tres aspectos fundamentales para tratar el problema que teníamos entre manos, esto es: el contexto y estado de las personas mayores (según las peticiones del cliente sería mayor de 50 años), su relación con las tecnologías y qué necesidades particulares de diseño tendremos que abordar.
Contexto y estado:
El envejecimiento de la población en España, como en el resto de países del mundo, es cada vez mayor, oscilando entre el 11% y el 31% dependiendo de la provincia. (INE). Al mismo tiempo, la esperanza de vida al nacer, dato de 2018, es de 83,2 años de media en ambos sexos (CSIC).
Este aumento de la esperanza de vida puede que sea uno de los factores que origine que muchos de ellos vivan solos, ya en 2020 eran 2.131.400 las personas que tenían un hogar unipersonal.
La soledad física ya de por si es un problema, fácil de reconocer y señalar, sin embargo, hay otro tipo de soledad que por silenciada pasa desapercibida, no es menos problemática y que se presenta en un 39,8% de las personas mayores de 65 años, la soledad emocional.
💡 Es la soledad, y más concretamente la soledad emocional, la que nos hizo reconocer la importancia de crear redes y comunidad.
Relación con la tecnología:
Al contrario de lo que podíamos creer en un principio y a pesar de ser unas generaciones nativas no digitales ni tecnológicas, nuestros mayores están ya integrados en los medios digitales. La brecha cada vez es menor: un 73,3% de los mayores de 65 a 74 años utiliza internet y un 96,6% de ellos ha usado el móvil en los últimos tres meses (CSIC).
Gerontodiseño y accesibilidad:
O lo que es lo mismo, conjugar por un lado un diseño emocional orientado a nuestro público objetivo desde un punto de vista sensitivo, social y cultural con una interfaz que cumpla una serie de requisitos imprescindibles para asegurar un uso óptimo del producto:
- Tipografía de alta legibilidad.
- Color y contraste que cumplan los estándares AA o AAA.
- No transmitir información mediante códigos de colores.
- Buen diseño de prevención de errores pensando en la mayor dificultad en el uso de teclados.
- Buen equilibrio entre diseño, sencillez, ausencia de recarga de elementos y aporte de información necesaria: evitar iconos sin texto, ausencia de animaciones sin funcionalidad, contenido amigable, ayuda constante a la memoria, etc.
- Tiempo flexible y dilatado en las interacciones.
BENCHMARK
El objetivo de nuestro benchmark es conocer a la competencia y los servicios que ofrecen. Estudiamos aplicaciones con temáticas que nos puedan ser útiles para detectar buenas prácticas e ideas aplicables en nuestro proyecto.
Y también seleccionamos una serie de características que consideramos interesantes y las evaluamos de cara a tomarlas como referencia o tener en mente qué carencias pueden existir en el mercado.
¿Qué conclusiones extraemos?
- Poca competencia directa, no existe un producto igual.
- Gran número de empresas que nos hacen competencia indirecta:
Eventos/Ocio: Adopta un abuelo, Meetup
Nuevos amigos/pareja: Meetup, Finally
Información de salud: Yo te cuido
Buscador de cuidadores: Familiados
- El login sea cuanto más sencillo mejor.
- Puede ser interesante la idea añadir tutoriales explicativos o introductorios.
PERFILAMOS NUESTRA HIPÓTESIS
Partiendo de la pregunta: ¿Cómo podríamos crear una red para personas mayores y voluntarios que permita a los primeros adentrarse en el mundo digital y sentirse partícipes de la sociedad?
Planteamos la siguiente hipótesis que tendrá validarse:
❓ Si diseñamos un producto simple y accesible que ponga en contacto a personas mayores y voluntarios dispuestos a ayudarles, tanto por cercanía física como de forma telemática; entonces el miedo a lo digital y la sensación de quedarse fuera de la sociedad disminuirán porque se sentirán apoyados, aprenderán y se empoderarán en el proceso.
DAFO
Después de saber qué hace la competencia, hacemos un auto-análisis para saber qué debilidades, amenazas, fortalezas y oportunidades tenemos.
Fortalezas y oportunidades:
- Sería un mercado nuevo, no tenemos un competidor directo.
- Tenemos la capacidad de diferenciarnos simplificando los procesos.
- Nuestro mercado cada vez es más amplio debido al envejecimiento de la población.
- Un buen trabajo de accesibilidad es un punto diferenciador y nosotros como “uxers” tenemos los conocimientos y las herramientas para llevarlo a cabo.
- Contamos con una cartera de usuarios y un proyecto en el mercado (Emancipatic).
Amenazas y debilidades:
- Debido a la brecha digital en nuestro target, puede ser difícil ampliar la cantidad de usuarios ya existentes.
- Vencer la tendencia individualista de la sociedad actual.
- Tenemos limitaciones técnicas y temporales.
NUESTRO TARGET
Según el briefing, nuestro usuario sería un mayor de 50 años con necesidad de aprender a desenvolverse de forma autónoma en el ámbito tecnológico. Sin embargo, al desarrollar el producto, diversificamos para crear el perfil de voluntario, lo ampliamos a cualquier persona que quiera inscribirse, siendo el único requisito tener conocimientos y tiempo para compartir.
Después de la investigación y tener claro a quién nos dirigimos, intentamos acercarnos a su realidad y para empatizar, crearemos nuestro user persona. Llegamos a la siguiente fase: estrategia e ideación.
ESTRATEGIA E IDEACIÓN
USER PERSONA
Marisa Rivas: Es el prototipo de nuestro usuario, aquel que busca soluciones a su relación con la tecnología pero que muestra el suficiente interés para convertirse, a futuro, en un perfil híbrido de usuario-voluntario.
Naiara Martín: Encaja en la idea de voluntario que brilla por el interés personal de ayudar a su comunidad.
JOURNEY (AS IS) DE MARISA
Sabemos las necesidades de nuestro user persona, ahora tenemos que empatizar con él viendo el paso a paso del proceso actual en un Costumer Journey As Is para detectar tanto las necesidades como los puntos conflictivos y de satisfacción que se encuentra en cada paso que da, y que podríamos aprovechar al plantear nuestro producto.
En nuestro caso, el análisis de nos ha confirmado la necesidad de proveer de una ayuda externa que complete sus carencias.
💡 Es mucho más útil que el usuario nos plantee sus problemas particulares a los que atender de forma individualizada, antes de ser nosotros los que ofrezcamos una formación genérica, debido al amplio abanico de posibilidades de dudas que se puedan puedan presentar en el día a día.
PROPUESTA ÚNICA DE VALOR
Después de conocer a nuestro usuario, alinear sus necesidades con lo que ofreceremos en nuestra funcionalidad y trabajar con el Value Proposition Canvas. Concretamos nuestra misión, visión y valores y de ahí extrajimos la que será nuestra propuesta única de valor.
IDEACIÓN
Llegamos a la etapa más emocionante, necesitamos una gran cantidad de ideas para solucionar nuestra problemática, si bien las bases de nuestra funcionalidad están bastante definidas necesitamos concretar las temáticas que agrupen y simplifiquen la gestión de las dudas de nuestros usuarios, para ello decidimos arrancar con un Brainwriting.
Ahora que conseguimos una gran cantidad de ideas, las seleccionamos y categorizamos por afinidad.
Siguiendo la Ley de Miller (Ley de UX) que nos dice que un usuario promedio puede mantener en la memoria entre 5 y 9 elementos (7 más/menos 2), decidimos que como trabajamos con usuarios mayores el número mágico iba a ser el seis, seis secciones donde acudir para plantear sus dudas y optimizar la carga cognitiva y facilitar la elección:
- Salud. Ej. ¿Cómo pido cita online con mi médico?
- El día a día. Ej. ¿Cómo se usa la web del súper para que me manden la compra a casa?
- Amigos y ocio. Ej. ¿Cómo descargar el programa de viajes del IMSERSO?
- Nuevas tecnologías. Ej. ¿Cómo mando fotos a mis nietos por Whatsapp?
- Burocracia. Ej. ¿Cómo se renueva el DNI online?
- Servicios del municipio. Ej. ¿Cómo contacto con el servicio de atención ciudadana en la web del ayuntamiento?
CONCEPTUALIZACIÓN
FLOWCHART
Para tangibilizar el recorrido que hará el usuario en la web, haremos el paso a paso por la web hasta alcanzar el objetivo marcado: Ser capaz de publicar y entrar en contacto con un voluntario para solucionar una duda.
SITEMAP
Siendo fieles las directrices, que hemos marcado desde un principio, de sencillez y accesibilidad, nuestro sitemap ofrece la jerarquía necesaria, sin recargas, para cumplir con las funciones que se esperan del producto.
LAYOUTS
Llegados a este punto tenemos todos los elementos necesarios para coger papel y lápiz y ponernos a dibujar los primeros bocetos. De ahí a la siguiente fase, ponerle cara a nuestro producto.
DISEÑO (UI)
WIREFRAMES EN MEDIA
Para asegurarnos de la estructura y de cómo funciona la web, de qué tendremos en cada pantalla y cuál es el recorrido óptimo, antes de saltar al diseño hicimos una parada en los wireframes en media calidad. (Click en la imagen para ampliar)
Bebemos de una identidad visual corporativa ya conocida y reconocida por sus usuarios y a pesar de que tendrá un funcionamiento autónomo, como subdominio, no podíamos obviar su logo, colores e imagen a la hora de crear el diseño UI de nuestro producto.
El (iso)logo que usamos es una evolución del propio de la fundación con la palabra “RED” como elemento distintivo y descriptivo de este nuevo producto, donde, efectivamente, creamos redes y comunidad.
Si bien los colores corporativos se mantuvieron, los sometimos a un test de accesibilidad para asegurarnos las mejores combinaciones en pro de la legibilidad.
Y por supuesto, la tipografía, uno de los elementos clave de todo nuestro diseño, pues era donde mejor teníamos que se capaces de combinar estética y accesibilidad. Optamos por dos tipo, por un lado una tipografía amable, redondeada, que pudiera transmitir calidez y cierta alegría: “Baloo Paaji 2” como opción ideal para headers; y “Atkinson Hyperlegible” para el resto de textos de la web móvil. El tamaño base lo establecimos en 18 y el escalado en “Major third”, consideramos que para una visión posiblemente condicionada por la edad el punto de partida debía estar por encima del tradicional de 16.
INTERACCIÓN
Como paso previo a nuestro PMV las compañeras de marketing propusieron una landing page que hicimos mano a mano entre todas y que sirvió de perfecta carta de presentación.
Todo el trabajo hecho hasta ahora por fin va a confluir en algo más real y tangible: un prototipo que dotado de interacción parece casi real.
Es el paso previo para que nuestros compañeros de desarrollo lo hagan realidad pero que a nosotras nos permite testear, comprobar e iterar, una vez más, si fuera necesario.
Lo que vais a poder ver a continuación es el recorrido básico que un usuario se encontraría al acceder a nuestra web móvil:
- Un inicio de sesión donde se piden los datos mínimos, sencillos y necesarios para crear un perfil con número de móvil (mejor que un mail en términos de accesibilidad), código postal por la oferta de ayuda geolocalizada y una contraseña por seguridad.
- Según el tipo de acceso podría presentarse como: a) el simple usuario, accederían directamente a la pantalla de inicio donde elegir secciones en las que solicitar ayuda según necesidad; b) voluntario, a quienes se les pedirá que rellenen un sencillo formulario para saber disponibilidad, conocimiento, zona de acción, etc. y c) perfil híbrido para quienes a pesar de seguir necesitando ayuda ya se ven capacitados y empoderados para ofrecerla en otros ámbitos.
- En la página de inicio aparecen las seis categorías a las que acceder para solicitar ayuda según la temática. Dentro de ellas se puede añadir dudas, ver las que ya hay o contactar con un voluntario directamente.
- Cada página de perfil de voluntario tendrá una breve descripción personal sobre intereses y aptitudes, un listado de competencias en las que puede ayudar y una zona con valoraciones de miembros.
Puedes ver el prototipo resultante aquí
CONCLUSIONES
Parecía que esto nunca iba a llegar, todas las disciplinas remamos a favor para lograr llevarlo a cabo y nuestros esfuerzos se vieron recompensados: un cliente contento y un proyecto profesional y con futuro de darse las condiciones adecuadas.
Nadie va a mentir, dos semanas para sacar adelante un producto así no se pueden describir con otros adjetivos que no sean: intensas, retadoras, exigentes y abrumadoras.
Hemos aprendido a gestionar tensiones por el bien del grupo, a entendernos, trabajar, reír y llorar, dar lo mejor de nosotros mismos y de todo lo aprendido en el bootcamp, en definitiva, a saber cómo engrasar bien una maquinaria que nos ha facilitado la perspectiva y experiencias necesarias para aplicarlo en un entorno laboral real. Gracias, equipo.
Y ahora,
a envejecer bien,
como el jerez.
Ser también útil de viejo,
ser oloroso,
ser fino,
no ser vinagre,
ser vino.
“Tren de la tercera edad” Gloria Fuertes
Si quieres puedes ver la presentación que hicimos del proyecto entra en este link (02:08:26)
