UX/UI Design < Rediseño de web
logo cogam

Este es un proyecto individual que realicé en la escuela de Irohack como estudiante. El proyecto comenzaba escogiendo una ONG cualquiera y mejorar su web centrándose en el usuario, encontrando puntos clave para la mejora de la misma. Yo elegí Cogam, que es un colectivo o una ONG de Madrid que lucha por los derechos de las personas LGTB+. Fue uno de los impulsores del matrimonio gay en España y llevan trabajando desde hace más de 30 años.

Para empezar a abordar el problema decido basarme en una serie de encuestas y entrevistas que realicé, donde pude extraer los tres principales problemas e hipótesis de trabajo:

El primero sería cambiar la percepción que se tiene del colectivo.

No se les conoce lo suficiente para que la gente quiera tener la iniciativa de colaborar o donar, y por lo tanto, no realizan la acción.

Desconocimiento sobre los servicios que el colectivo proporciona, como puede ser prueba rápida de enfermedades de transmisión sexual. Incluso eventos y actividades.

A continuación vamos a ver cómo he llegado a estas conclusiones y de dónde parto para realizar estas encuestas y entrevistas.

LEAN SURVEY CANVAS

Qué necesitamos aprender


¿Las personas que se sienten aceptadas socialmente saben que hay micro donaciones o la posibilidad de asociarse?
 ¿Hay personas sin recursos o ayudas en riesgo de exclusión social?
 ¿Qué espera la gente de un colectivo LGTB? ¿Saben para qué sirve?
 ¿Juega el machismo un papel importante en la sociedad para con la homofobia? ¿Es posible hacer planes ociosos con gente con intereses comunes? ¿Saben todos los riesgos de contraer ETS y cómo actuar si eso sucede?

 


Qué necesitamos aprender de
 usuarios positivos


Personas LGTB+, familia y amigos de personas LGTB. Sociedad en general


Usuarios negativos


¿
Son homófobos y/o machistas? ¿Cómo afecta al colectivo LGTB?

¿Qué información tenemos actualmente?

Aún no existe demasiada información sobre la identidad sexual en la calle o casas
. Hay gente excluida socialmente.
 Gente que no está afectada de manera directa no conoce bien el problema.

¿Cómo llegamos a esta gente?


Educación, eventos, visibilidad.

A partir de aquí sacamos algunas preguntas para realizar en encuestas y entrevistas donde los usuarios contestarán anónimamente. Estos tienen una edad comprendida entre 17 y 52 años.

lean survey canvas
UX STRATEGY BLUEPRINT

Nuestros retos van a ser:


Tener más donaciones, asociados…
 Que las personas no tengan dudas sobre ETS. Atraer a más público con imágenes y vídeos de vida más cotidiana, intereses artísticos…
 Que las personas LGTB se sientan parte y con ganas de responsabilizarse de manera social y, con ello, más seguridad y autoestima para los que forman el propio colectivo.


Aspiraciones:


Visión más optimista, que el colectivo sea valioso para todos, con nuevas actividades. Continuar con el trabajo en la igualdad de derechos y oportunidades. Facilitar el acceso en la web para cualquier tipo de persona que necesite asesoría en psicología, judicial, pruebas rápidas de ETS…


Nuestras áreas de foco:


Más eventos para abarcar más usuarios, centrándonos en usuarios de Madrid y turistas.


Guía de principios:


Cogam es el colectivo que más respeta y acepta dentro de su diversidad


Actividades:


Encuestas y entrevistas.
 User Personas. 
Prototipos
. Rediseño visual. Arquitectura de información

 más usable. Se propone que los eventos sean creados por los usuarios, por lo que luego veremos cómo lo integramos y si tiene cabida.



Medidas:

Realizar encuestas sobre el sitio rediseñado, de nuevo user research. 
Medir entradas en la web
. Registro de actividades y nuevos asociados, donaciones, etc.

ux strategy blueprint
BRAINSTORMING/MIND MAP

Las ideas no deben ser perfectas y pueden ser al azar o no relacionadas directamente con el problema. ¡La clave es FLUIR!

Este ejercicio me sirve mucho para poner todo sobre un papel y que no quede nada en el aire. Siempre digo que aquí todo vale en una primera instancia, ya que lo que se pretende es precisamente poder llegar a cualquier rincón interesante con respecto a la experiencia de usuario que se nos pueda escapar.

Veremos después cómo con el diagrama de afinidad unimos todas estas ideas para sacar otras mucho más tangibles y realizables.

brainstorming mind map lluvia de ideas mapa mental
AFFINITY DIAGRAM

Sacamos en claro que hay que:

Mejorar el CONTENIDO de la web siendo este más claro y organizado.

El REFUERZO es importante en cuanto a la visibilidad, por lo que habría que hacer más hincapié en la educación, empresas y entornos cotidianos.

Hay que trabajar para abolir el DESCONOCIMIENTO que existe en cuanto a la ONG y al colectivo LGTB+ en sí.

Por último, la parte de EVENTOS Y ACTIVIDADES tiene que abarcar a todo tipo de usuario, dado que según las entrevistas que hice, estos echan de menos otro tipo de eventos de los que existen actualmente e incluso proponían otros diferentes.

affinity diagram diagrama de afinidad
USER PERSONA

Desde ahí vamos empatizando con los posibles usuarios y, para ello, creamos unos ejemplos de los que podrían ser personas reales incluyendo mapa de empatía.

Para este proyecto concretamente creé tres user personas. Aunque mi presentación estará centrada en Claudia y en la creación de eventos y actividades.

user persona
CUSTOMER JOURNEY

Y con ello un comportamiento con el contexto de la página actual. Donde definimos 3 pain points, soluciones a estos y caracteríscas de la solución.

customer journey
STORYBOARD
storyboard
CONCEPT SKETCHING

En primer lugar, lo que se pretende con el hecho de dar tanta importancia a eventos y actividades es que si no tenemos muchos asociados, ya que en las encuestas y entrevistas que previamente hice no estaban demasiado dispuestos a donar ni a asociarse, es que se sigan recaudando fondos. De tal manera que, lo que se pudiera recaudar de eventos y actividades se donasen a la ONG.

Para ello quiero testar previamente mediante un ejercicio de concept sketching si tiene buena acogida el hecho de implementar un 'Perfil de usuario' para poder crearlos, poder apuntarse y tener un seguimiento de ellos e incluso tener un área específica para los usuarios que hayan voluntariados, donaciones o se hayan asociado, incluyendo también a empresas.

FLOW CHART / AI

Esta representación diagramática ilustra un modelo de solución para problemas que se han encontrado, donde se puede aprecia la arquitectura de información. Es utilizado para diseñar lo que sería un flujo de usuario al acceder en la web. En este caso están representados los pasos más importantes que hemos analizado, como son eventos, asociarse, prueba rápida ETS y la reorganización de la arquitectura de información.

Click aquí para vista completa.

flow chart architecture information
WIREFRAMES MID-FI

Sacamos en claro que la idea de implementar un 'Perfil de usuario' tiene muy buena acogida tras el test conceptual que hiciemos a mano. Después, tras volver a testar en baja fidelidad los usuarios desean que la información de un evento o actividad debe mostrar la siguiente información: sobre qué trata el evento, dónde y a qué hora. Si hay gente apuntada, cuántos y quiénes y si quedan plazas disponibles. Por lo que la información se ha de mostrar de la siguiente manera (ver más abajo).

lo-fi desktop and mobile wireframes
HAND CONCEPT SKETCH
sketching bocetos
MOODBOARD

Una vez que el proyecto ya tiene forma y se han testado varias ideas, continúo con darle color y estilo con una parte un poco más subjetiva.

Transformación

Resolución

Agudo

Transgresor

Progreso

Vanguardia

Estas palabras son básicamente las que han acompañado al colectivo durante toda su historia.

En primer lugar, nació en los años 80 y siempre ha sido transgresor en cuanto a su ideología y ha estado a la vanguardia. Por otro lado, acorde con su progreso, se vuelven más agudos en cuanto a su actuación en la vida social de las personas LGTB y su entorno. Mediante esta transformación sugiero darle un estilo que no siga patrones típicos de diseño, pero que a su vez siga una limpieza visual, dado que hablamos de una ONG y el contexto de la web ha de ser claro.

moodboard inspiration
UI STYLE GUIDE

Se han creado unos botones para la web inspirados en el triángulo de la identidad (el triángulo es más que importante e inevitable para el diseño de la web. 
Son empleados de manera reivindicativa, ambos de forma invertida. El triángulo negro en la época nazi estaba reservado a todos los que eran considerados antisociales: vagabundos, gitanos, algunos anarquistas y mujeres. A lesbianas y prostitutas se les consideraban una amenaza para los valores de la familia nazi, mientras que el rosa se utiizaba para “marcar” de la misma manera a homosexuales. 
Se pretende mantener esto, ya que de ahí radica el famoso orgullo, recordando la historia y pretendiendo seguir evolucionando.)

Se elige tipografía Hind ya que fue desarrollada explícitamente para su uso en la interfaz de usuario y además tiene una construcción de estilo humanista para una mejor lectura, ya que hablamos de una web donde el texto va a ser importante. Por ello también se pretende tener un diseño claro y limpio.

ui style guide, guia de estilos
PROTOTYPE (HI-FI)
prototyping, prototipos, prototipado, alta fidelidad, hi-fi

En una primera instancia se pensó que el calendario fuera responsive según el ancho de pantalla, con máximo de ancho establecido. Pero, los costes estarán limitados en cuanto a producción, por lo que se harán dos versiones para el calendario:


Para mobile -desde 320px de ancho hasta 467px- medirá concretamente 289x328 (ancho x alto).

Mientras que para tablet y desktop -min width 468px- será de 468x468.


Para patrones de diseño como por ejemplo el utilizado para visualizar diferentes vistas entre listado y calendario, tendríamos un máximo de ancho de 500px, apareciendo centrado en dispositivos que tengan mayor tamaño del citado.

TESTING

Lo que se plantea en este caso es hacer un formulario que quepa en la pantalla y no haya necesidad de hacer scroll para que el usuario sepa en cada momento dónde se encuentra.

Para ello también se muestran tres pasos para rellenar todos los datos necesarios a la hora de asociarse al colectivo.

LANDING PAGE

Diseño de landing pages para un público más joven.

Una de las acciones principales, que es colaborar, sigue teniendo protagonismo. Se plantea que se envíen a los usuarios registrados que sigan eventos, hayan participado o creado. Aún así en su perfil habría un CTA para ello.

prototipo