Diseñando Ciudades con perspectiva de género (Parte II).

David Arreba
7 min readJan 13, 2022

--

Antes de continuar, me gustaría advertirte de que esta es la segunda parte de este proyecto de Design Thinking. Te recomiendo que, si no has leído la primera, la cual se centra sobre todo en el research, le eches un vistazo, pues al tratarse de un mismo proyecto, están conectadas. Te dejo aquí el link en caso de que estés interesado: https://davidarrebacorral.medium.com/dise%C3%B1o-de-ciudades-con-perspectiva-de-g%C3%A9nero-parte-i-9b06642b1277
Tras este breve aviso, empecemos🚀.

A pensar…💡

Como ya vimos en el anterior artículo, habíamos terminado el primer diamante y debíamos adentrarnos en el segundo. Era el momento de la ideación y ninguno teníamos una idea clara, por eso decidimos hacer un brainstorming y apuntar todas las ideas que se nos ocurriesen, por muy locas que pudieran parecernos en un principio. Eso sí, antes de hacerlo decidimos acotar el tema a la seguridad y la sensación de seguridad de la mujer.

Brainstorming

Como veis, no fueron pocas ideas las que sacamos, así que decidimos someterlas a votación para ver cuáles eran las que más nos convencían, pero a pesar de esto, seguían siendo demasiadas, así que seguimos descartando las ideas mediante una matriz y mediante un método conocido como In and Out.

Matriz e In and Out

La solución

Fue mediante este proceso por el cual nació Ambella, una aplicación que mantuviera conectados al usuario con sus contactos cercanos y, en caso de máximo riesgo o preocupación, con los cuerpos de seguridad del Estado. Además, la aplicación cuenta con un wearable en forma de pulsera que estará conectada a la app y tendrás las funciones más importantes para no tener que llevar el móvil en la mano. Ambella nace de las palabras catalanas “amb” y “ella” es decir “con ella”. De esta manera queremos reflejar un acercamiento hacia la usuaria, mostrándole que siempre irá acompañada.

Logo Ambella

Con esta idea clara, decidimos realizar un benchmark para descubrir distintas aplicaciones similares, detectar sus carencias y virtudes e igualarlas o mejorarlas con nuestra propuesta.

Funcionalidades

Una vez estudiado el mercado, decidimos fijar las funcionalidades. Por un lado, tenemos la app que cuenta con las siguientes:

  • Podrás compartir tu ruta con los contactos que desees, así como establecer un tiempo límite para completar dicho trayecto.
  • Genera una lista de trayectos y contactos favoritos para que estén más accesibles.
  • Muestra rutas seguras en el mapa.
  • Cuenta con un botón S.O.S. que mandará una señal de auxilio a tus contactos y los cuerpos de seguridad.
  • Muestra usuarios cercanos con los que podrás contactar para mayor seguridad.

Por otro lado, las funcionalidades y características del wearable serán las siguientes:

  • Diseño sencillo e intuitivo que contará con una pantalla táctil para las funciones principales de la app (geolocalización y S.O.S.).
  • VUI o sistema de reconocimiento de voz para poder contactar con tus usuarios o cuerpos de seguridad.
  • Batería de larga duración.

El esqueleto de la app

Tras esto, generamos un diagrama de flujo para saber cómo íbamos a estructurar la aplicación y ahorrarnos tiempo a la hora del prototipado.

Diagrama de flujo

Una vez que ya sabíamos cómo iba a estar organizada la aplicación tocaba buscar un diseño sencillo e intuitivo pero con estilo, por lo que tras una búsqueda para captar información y referencias de otros proyectos comenzamos a diseñar en baja fidelidad, o lo que es lo mismo, a crear los wireframes. Tras varios diseños rápidos nos quedamos con los siguientes:

Wireframes

Guía de estilo👨🏻‍🎨
Ya estaba casi todo listo, el último paso antes de empezar a prototipar en alta fidelidad era crear una guía de estilo, así que nos pusimos manos a la obra.

El primer paso en la guía de estilo fue elegir un color principal para nuestro proyecto. Al tratarse de un tema relacionado con la mujer, no dudamos ni un segundo en coger un color morado. Además de esto también generamos una serie de colores semánticos y otra de neutros. Añadiendo el color de acento y una serie de gradientes a alguno de los mencionados anteriormente, el resultado fue el siguiente:

Colores elegidos.

En cuanto a la tipografía escogimos la Raleway como principal puesto, que es una tipo palo, lo que hace que sea más fácil su legibilidad. En un puesto secundario y con tamaño más pequeño tenemos la Roboto, que se utiliza en los números, puesto que sus tamaños no son dispares, En la Raleway lo son, y de esta manera no se dificulta su legibilidad.

Tipografías

Para finalizar con la guía de estilo creamos los siguientes componentes utilizando un sistema de Atomic Design. Para estos componentes utilizamos unos iconos muy sencillos y las tipografías señaladas anteriormente.

Componentes

Con todo lo visto listo, solo queda basarse en los wireframes y la guía de estilo comentados anteriormente para crear un prototipo Hi-fi o de alta fidelidad. Así que, sin más preámbulos os dejo el resultado final.

Resultado final

Ambella V1.0

Como podéis observar, en la pantalla principal o home nos encontramos con un mapa, una navigation bar con tres botones y dos Floating Buttons o fabs. El fab de la izquierda enviaría una señal de emergencia a las autoridades y a tus contactos favoritos, mientras que al pulsar el de la derecha nos da la opción de elegir un destino para después buscar en nuestra lista de contactos el que elijamos. Acto seguido, en el mapa nos muestra la ruta más corta junto con un cronómetro para llegar al destino. Recordad que si no llegamos a tiempo la aplicación mandará un aviso sola. Además, también se muestran rutas más seguras (verde) y menos seguras (rojo).

Si pulsamos el botón izquierdo en la navbar (la estrella), se nos abrirá el apartado de favoritos pudiendo elegir tanto contactos como destinos. Finalmente el botón derecho de la navbar será el apartado perfil, dónde podremos configurar varias opciones de nuestra cuenta, aplicación y pulsera.

Por otro lado, también se decidió crear la home de la supuesta página web que vendería las pulseras.

Diseño página Ambella

Falta algo…

¿Creías que esto era todo? Pues no. Por si fuera poco nuestro equipo también se animó a realizar un diseño 3D de la pulsera para que todo el mundo pudiera observar cómo sería en la vida real. Este diseño se creó con el programa Blender en su versión 2.8, y aquí está el resultado.

Diseño de pulsera final / Diseño de pulsera en Blender

Después de esto solo quedaba darle el broche final al proyecto. Que ¿qué más hicimos? Bueno, para finalizar creamos un spot publicitario que os dejaré a continuación:

En un futuro…

Ahora sí que sí, dimos el proyecto por finalizado pero no sin antes dejar claro unos cuantos futuribles. Los dividiré en dos secciones:

  • Futuribles cercanos:
  • Desarrollar la página web.
  • Crear una red de puntos seguros (por ejemplo, tiendas comprometidas).
  • Generar una lista de trayectos seguros (transporte público).
  • Crear perfil de hombre: solamente para recibir notificaciones de la mujer que comparte los datos con él (ruta, ubicación, tiempo de distancia calculado).
  • Añadir pop-up de opciones para valorar de forma colaborativa ciertos puntos durante una ruta.
  • Futuribles para 2050:
  • Drones de acompañamiento y que puedan detectar y avisar en situaciones de riesgo.
  • Transporte automatizado, sin chófer, para que el usuario se sienta seguro.

Conclusión

Aunque el reto de este proyecto fuese muy complicado, a veces solo hace falta confiar en tu equipo y la metodología usada para seguir adelante y sacar a flote una buena solución. Espero que os haya gustado a la que llegamos nosotros y que os haya entretenido esta lectura. Me gustaría dar las gracias de nuevo a mi equipo y recordaros que podéis pasaros por sus perfiles para ver todos sus proyectos Ramón, Lara, Roberto y Maribel. Muchas gracias por leerme y no te olvides de activar la campanita si quieres estar al tanto de nuevos proyectos🤗.

Equipo de diseño en Ambella.

--

--