Irene

Role:

• UI Designer

Tiempo:

• Abr. 2022 – Jun. 2022

Contexto

“Avísame cuando llegues”, “¿Has llegado bien?”

Hoy en día, el 80% de las mujeres sienten miedo e inseguridad en la calle.
Irene pretende reducir ese porcentaje lo máximo posible y potenciar la premisa «Sharing is caring».

En este tercer trabajo de Máster, nuestra misión fue crear una interfaz centrada en el usuario final, acorde al objetivo establecido en la etapa del Research: lograr que nuestras usuarias sientan que están protegidos por personas reales.

Insights del Research

• Usuarios: Mujeres que viven en grandes ciudades y salen a menudo por la noche.
• Problema: Las mujeres se sienten inseguras al volver a casa por la noche.
• Solución: Irene es una app que permite, mediante un botón o una palabra clave, avisar a tus contactos y enviarles tu ubicación en caso de emergencia o inseguridad.

UI Benchmark

Para asegurarnos de que seguimos las mejores prácticas utilizadas por la competencia, realizamos un benchmark. A través de este proceso, vimos cómo otras compañías resolvían a nivel visual cada una de las funcionalidades clave de nuestra app:

• Mapa
• Alerta
• Código de seguridad
• Contactos

Brand Briefing

Antes de definir los elementos visuales más característicos, como los colores o la tipografía, decidimos profundizar en el por qué existe Irene.

Visión

• En el equipo de Irene nos preocupamos por las personas.
• Creemos que «Permitiendo a las personas vulnerables moverse libremente y con seguridad» conseguiremos hacer del mundo un espacio seguro.

Misión

• Queremos disminuir el riesgo de que las mujeres sufran daños, salvaguardándolas en su viaje diario. Queremos que las mujeres no se sientan solas nunca más.

Valores

Cuidamos de las personas, por eso Irene crece en torno a 3 valores:

• Seguridad
• Protección
• Compañía

Nadie se queda atrás y nadie permanecerá inseguro.

Habiendo asimilado estos principios, decidimos crear el arquetipo de marca. Este representará los rasgos de la personalidad, valores, cosmovisión y creencias de Irene en una sola figura.

• Aporta confianza y su objetivo es ayudar, acompañar y proteger a los demás.
• Su deseo básico es cuidar al prójimo.
• Como características de la personalidad destacaríamos el altruismo, la generosidad y la compasión.

 

 

 

 

 

 

 

Siguiendo estas pautas, podríamos describir la marca como más empática, generosa, colectiva y amable, ya que pretende que todos sus usuarios se sientan alineados y protegidos. De esta manera, logramos minimizar el estrés que conllevan situaciones peligrosas.

Moodboard

El siguiente paso fue crear un moodboard. Esta herramienta fue especialmente importante para alinear a todo el equipo y representar cómo se percibirá la app mediante un conjunto de emociones y conceptos visuales.

Color

Teniendo en cuenta la definición de marca, decidimos que el rojo y el azul eran los colores que mejor encajaban con Irene. También utilizamos los colores morado y blanco para apoyar a estos primarios y reforzar el territorio y el simbolismo de la marca. Dicho esto, podríamos decir que:

• El rojo transmite violencia y representa el peligro. Por lo tanto, este color se utiliza para indicar el estado de alarma. Es una llamada de atención a la sociedad.
• El azul transmite calma, confianza y libertad. Marca un estado de paz en el que las mujeres se sienten seguras.
• El morado transmite elegancia y encarna la feminidad. Utilizamos un tono oscuro para representar la noche y el poder.
• Por último, el blanco comunica la paz.

Tipografía

En un contexto que pide rapidez en la acción, elegimos Inter, una fuente sans serif alta y estrecha que transmite una sensación de modernidad y seguridad. Queremos que el mensaje se transmita de forma sencilla y rápida, por lo que la tipografía debe ser lo más fácil de leer posible.

Formas

En cuanto a la forma, aprovechamos el imaginario de la marca e intentamos que su interacción con los elementos de color y texto fuera lo más armónica posible. Como se puede ver en la imagen, utilizamos un mapa para definir líneas rectas e inclinadas. Su carácter vertical evoca confianza y seguridad. Y éstas, al estar inclinadas, sugieren movimiento, dinamismo y velocidad.

Para representar al usuario, elegimos la forma antagonista de la línea: el círculo. Esta decisión se basó en lo que, como usuarios, estamos acostumbrados a identificar cuando utilizamos aplicaciones similares, como Google Maps.
También utilizamos círculos para representar el botón de alarma. Esto tiene que ver con el hecho de que los círculos carecen de ángulos y, por tanto, traen a la mente una sensación de protección y cercanía.

Tono y voz

Dado que nuestro arquetipo es el cuidador, el tono y la voz de nuestra aplicación tenían que estar alineados con las características del mismo. Por ello, utilizamos un lenguaje tranquilizador e inclusivo que aportara cercanía y creara un vínculo con el usuario. Así, nuestro tono y voz consiste en verbos de acción, tiempo activo y lenguaje conversacional ligado con un estilo directo.

Combinados entre sí, estos elementos trabajan juntos para hacer de Irene una aplicación de confianza, pero, al mimo tiempo, basada en la acción.

Sistema de diseño

Creamos un Sistema de Diseño con tokens vinculados a colores para que el proceso de documentación sea más robusto y para que el equipo entienda mejor cómo implementarlos.

Por otra parte, decidimos utilizar una tipografía con sólo 2 estilos (normal y semibold). Tomamos esta decisión con el fin de tener un sistema unificado.

Así mismo, uno de nuestros objetivos era encontrar una forma rápida y fácil de acceder a cada componente. Por ello separamos los componentes en diferentes páginas.

Prototipo

Una vez tuvimos todo listo, creamos la UI final de la aplicación.