Sonia Guillén
4 min readFeb 23, 2020

Si has llegado hasta aquí es que previamente has leído la primera parte de este proyecto. Si no lo has hecho, ahora es el momento de hacerlo! Haz click aquí

Siguiendo con historias que me ha contado mi hermana… Un chico de su clase tuvo relaciones con una chica 1 año menor y se jactaba de que ella había dejado toda la cama llena de sangre, enseñando fotos de la cama para mostrar los detalles. Todos sus amigos y compañeros le decían que era todo un macho.
Cómo debió sentirse esa pobre chica?

Una vez decidido que haríamos una App, llamada CatchApp, que facilitara una información fiable a los jóvenes a través de vídeos, foros y un chat con profesionales, hicimos un diagrama de flujos para tener más claro las partes que debería tener nuestra app

Diagrama de flujo

Con ayuda de de la arquitectura pudimos ordenar todas estas secciones. En este caso decidimos que debíamos clasificarla un poco por edades, restringiendo algunas secciones a los más pequeños, que a la que vayan creciendo podrán ir accediendo a mas información. También consideramos que no era necesario un chat directo con profesionales para los padres ya que esta función esta centrada en solucionar las dudas de los hijos sobre su sexualidad.

Arquitectura de CatchApp
Moodboard

Una vez decidida la arquitectura buscamos referentes para aplicarlos a nuestra App con un MoodBoard. Nos decantamos por un aspecto desenfadado con tonos morados y divertido con los tonos amarillos. El estilo de los CTA con el marco desviado nos pareció que le daba un estilo muy juvenil a nuestra App.

A continuación al hacer la guía de estilo definimos exactamente los elementos de Catchapp, como puede ser el logotipo, el cual nos decidimos por dos flechas que se entrelazan representando el feedback que recibirían los jóvenes con nuestra app, recordando también, con la forma de las flechas, a la inicial de la App.

Guia de estilo de CathApp

Una vez todo definido a crear como tal la propia app! Primero los wireframes para decidir la colocación y distribución de los elementos. Para la sección de videos, por ejemplo, cogimos muchas referencias de Youtube.

Wireframes

Una vez hechos los wireframes toca añadir color y detalle para crear el prototipo, basándonos en el moodboard y la guía de estilo, con los tonos morados y amarillos para acentuar.

Prototipo

Al tener montado el prototipo hicimos un User Test para comprobar la usabilidad de CatchApp. Pudimos probarla con 6 usuarios donde pudimos comprobar que al chatbot se le debía hacer un replanteamiento, ya que, aunque no era difícil de usar para ellos, inicialmente no sabían que era y por tanto quedaban algo desorientados. Y en general, el resto de secciones eran intuitivas y no causaron ningún problema significativo.

Por otro lado los usuarios nos dijeron que CatchApp les parecía útil y podría ayudar mucho a que se orientaran, en excepción de uno de ellos, que aclaró que podría ser útil para ciertas personas, pero él siempre prefería hablar con las personas cara a cara.

Al hacer los User test corregimos los detalles que daban problemas para así terminar el proyecto, no sin antes haber creado una pequeño resumen de la App y un mockup donde se ve todo un recorrido por todas las secciones de Catchapp.

Por último, y de nuevo, dar las gracias a mis compañeros de equipo Alex Velasco Mesas, Victor Cruz y Isabella D'Ippoliti por todo el trabajo que han hecho en este proyecto. Y por supuesto a nuestros profes Pere Feliu y Nuria Gómez por ayudarnos con todo el proceso y guiarnos.

Sonia Guillén

UX\UI student from Barcelona. Handicraft and Japan lover.