- SIGIL es una app que permite crear y revelar mensajes avocados a diversos tipos de manifestaciones sociales.
La app está dirigida a jóvenes entre 15 - 25 años que requieran organizar diversos eventos de índole social (cacerolazos, marchas, manifestaciones) de manera segura y confidencial, evitando exponerse a situaciones de juicio externo que pongan en peligro tanto la integridad de los usuarios como a la realización del evento en sí.
Sin tener una idea clara sobre mi app, hice un sketch sencillo al que agregué interacción de botones utilizando Invision. Este sería mi primer prototipo, el cual contenía 3 pantallas: home (donde el usuario decide qué función desea emplear), pantalla de codificado y pantalla de decodificado.
Ver Prototipo de baja fidelidad en Invision
Pantalla Home
Pantalla Cifrado
Pantalla Descifrado
Mi primer prototipo de alta fidelidad surge luego de una encuesta llevada a cabo en mis redes sociales, donde pregunté para qué utilizarían una app que cifrara mensajes.
La mayoría de las respuestas estaban relacionadas con la necesidad de organizar marchas y cacerolazos, ya que estaba el miedo constante de ser expuestos a represalias o prejuicios de parte de sus contactos. A partir de esto, surgen ideas para el tema de mi app, los colores y el diseño. Con las ideas un poco más claras, decidí utilizar Figma para desarrollar mi prototipo. Decidí enfocarme en usuarios jóvenes, con un rango etario entre 15 - 25 años en promedio, por lo que decidí añadir colores vibrantes y botones que fueran más llamativos.
Ver Prototipo de alta fidelidad en Figma
Screenshot prototipo 1
Después de terminar el diseño de mi app e integrar todas las características desde Figma, decidí realizar el primer test de usabilidad con usuarios reales, para comprobar si realmente se ajusta a sus necesidades en términos de diseño, facilidad de uso y navegabilidad.
Después de recibir el feedback correspondiente, decidí cambiar algunos aspectos del diseño de la página. Lo más comentado fue el hecho de que el usuario no entendía la necesidad de ingresar un número, por lo que cambié la descripción del offset "número de desplazamientos" por "clave numérica" (hace más sentido tener una clave para descifrar un mensaje secreto). Además, decidí centrarlo para enfatizar la relevancia del offset (antes pasaba inadvertido), e integré alertas para que no pudieran llevarse a cabo las funciones de cifrado/descifrado si es que no se han completado los campos del box de texto izquierdo o del offset.
Sumado a esto, decidí cambiar la descripción de la app que aparece debajo del título, ya que "eventos" quedaba poco claro (se confundía con eventos de Facebook). Para ello, decidí integrar ejemplos concretos para que se entendiera de forma clara el objetivo de la app.
Finalmente, logré incorporar estos cambios al diseño final, junto con las funciones listas para cifrar mayúsculas, minúsculas y mantener los espacios. También incorporé un logo y un favecon para darle más identidad a la app.
Screenshot diseño final
- HTML5
- CSS
- Javascript (ES6)
- Establecer
clave númericaque indicará el número de desplazamiento para cifrar el mensaje(offset). - Escribir o pegar el mensaje que se desea cifrar en la caja de texto izquierda.
- Hacer click en el botón
Crear. - El mensaje aparecerá en la caja de texto derecha, listo para copiar y compartir.
- Para limpiar el mensaje y refrescar la página, hacer click en el botón
Limpiar.
- Establecer
clave númericaque indicará el número de desplazamiento para revelar el mensaje cifrado (offset). - Escribir o pegar el mensaje que se desea descifrar en la caja de texto izquierda.
- Hacer click en el botón
Revelar. - El mensaje aparecerá en la caja de texto derecha, listo para copiar y compartir.
- Para limpiar el mensaje y refrescar la página, hacer click en el botón
Limpiar.