«Dojyan!» es el segundo de tres proyectos que realicé para el certificado de Google de Diseño y Experiencia de Usuario.
Tuve que realizar el diseño de un sitio web adaptable, basado en una consigna a mi elección. La consigna que elegí para dicho proyecto fue crear un sitio web en el que se puedan gestionar colecciones de cómics.
Esta elección surgió porque soy aficionada a los cómics y conozco a gente que poseen una gran colección y un problema que me plantearon es que, cuando tienes una colección grande, a veces es difícil llevar la cuenta de lo que tienes y de lo que no tienes sin un poco de ayuda externa.
Tabla de contenidos
Presentación del caso práctico
Resumen del proyecto
El producto
"Dojyan!" es un servicio web online para gestionar colecciones de cómics, en el que puedes indicar los números que tienes y/o los que te gustaría tener, y la web te muestra cuáles son los próximos volúmenes que tienes que comprar.
Duración del proyecto
Agosto 2023 - Septiembre 2023
El problema
Cuando una colección va creciendo, es difícil gestionarla sin una herramienta externa para recordar qué volúmenes tienes y cuáles no, cuándo salen los nuevos números a la venta...
El objetivo
Crear una web adaptable en la que el usuario pueda gestionar los cómics que tiene, y ser notificado de cuándo están disponibles los nuevos números, que pueda usar desde distintos dispositivos.
Mi rol
Diseñadora UX, creando el diseño de un sitio web adaptable para gestionar colecciones de cómics, desde su inicio hasta su versión final.
Responsabilidades
Realización de entrevistas, esquemas digitales, creación de prototipos de baja y alta fidelidad, realización de estudios de facilidad de uso, accesibilidad e iteración de diseños.
Entender al usuario
Investigación sobre los usuarios
Realicé entrevistas y creé mapas de empatía para entender a los usuarios para los que iba a diseñar.
El grupo de usuarios identificado para este sitio web se trata de personas de edad variada con colecciones grandes de cómics que buscan una forma fácil de llevar un inventario al que puedan acceder tanto desde casa como desde fuera, en cualquier momento.
Puntos débiles
Creación de personas
Creé una persona para este proyecto que representara al grupo de usuarios identificado, su nombre es Ángela Guevara.
Ángela es una estudiante universitaria con trabajo a tiempo parcial que necesita hacer un seguimiento de los cómics que posee porque se olvida qué cómics tiene y cuáles no tiene al ir a comprar a la tienda.
Ángela necesita poder hacer un seguimiento de sus colecciones para saber de un vistazo cuáles son los próximos volúmenes que debe comprar.
Esta persona ha sido generada aleatoriamente para representar en un individuo el comportamiento, los objetivos y las motivaciones de un grupo de usuarios. Los datos personales han sido elegidos al azar y cualquier similitud con una persona real es pura coincidencia.
Mapa de recorrido del usuario
El mapa de recorrido de Ángela reveló oportunidades de mejora para el sitio web.
Comenzar el diseño
Esquemas de página digitales
Mi intención al crear la página de inicio era poner en la zona inicial visible (above the fold) la lista visual de los próximos volúmenes de cómics que debe comprar el usuario, además de un carrusel de imágenes superior en el que se mostrarán imágenes promocionales de novedades, anuncios esperados y demás lanzamientos que pudieran ser de interés.
Más abajo, aparecerían los títulos más populares del momento, y los lanzamientos más recientes en general, en caso de que el usuario esté interesado en comprar o añadir a deseados alguno de dichos títulos.
También creé otras pantallas, como la del detalle del volumen, donde se podrá ver más detalles como la fecha de publicación o la sinopsis, además de ver otros números del mismo título o recomendaciones similares; o como la estantería del usuario, donde se mostraría de nuevo sus próximas compras, pero además se vería un resumen de sus colecciones, sus lecturas y su lista de deseados. Tanto en sus colecciones como en lecturas, se vería un porcentaje, para indicar cuánto le falta para completar la colección de X título, o controlar su lectura.
Hallazgos del estudio de usabilidad
Realicé un estudio de usabilidad con una primera versión del prototipo de baja fidelidad. Estos son los hallazgos que surgieron.
Prototipo de baja fidelidad
Tras el estudio de usabilidad, iteré en el diseño del prototipo de baja fidelidad ajustándome a los hallazgos encontrados en el estudio. Aquí mismo puedes ver en acción la segunda versión del prototipo de baja fidelidad (realizado en Adobe XD).
Perfeccionar el diseño
Identidad
El sitio web de mi proyecto lo llamé «Dojyan!», que es una onomatopeya japonesa con un significado similar a nuestro «¡tachán!» en español.
El logotipo lo hice yo misma en Photoshop, usando una fuente estilo cómic, y añadiendo halftones y líneas cinemáticas al fondo. Hice una versión con el nombre completo, y otra versión abreviada, para usar en lugares de la web menos espaciosos, y/o como favicon del sitio web.
Maquetas
Al empezar a diseñar las maquetas, añadí una página de inicio que mostrara cómo se vería la página sin necesidad de iniciar sesión, ya que hay usuarios a los que les gustaría poder consultar las novedades sin tener que crearse una cuenta o iniciar sesión de forma obligatoria.
En caso de que aparezca un volumen que aún no está a la venta, o que el usuario ya posee, pensé que estaría bien indicarlo con unos colores más tenues. Y los volúmenes en deseados, aparte de indicarlo marcando el botón, se añadiría un corazón en la esquina superior derecha de la imagen del volumen. También hice una pantalla mostrando cómo se adaptaría el contenido en móvil.
Prototipo de alta fidelidad
Aquí mismo puedes ver una simulación con mi prototipo de alta fidelidad (realizado en Adobe XD), que empieza con una página de inicio en la que el usuario no ha iniciado sesión. El flujo de usuario empieza simulando un inicio de sesión, y se puede interactuar con algunos de los elementos. La simulación termina cuando el usuario añade un cómic a su colección.
Consideraciones de accesibilidad
Futuro
Conclusiones
Impacto
Las personas que interactuaron con mis prototipos opinaban en general que la idea estaba muy bien, pero que todavía había mucho margen de mejora para que fuera un sitio web memorable.
Un usuario dijo:
"La intención de este sitio es muy buena, me gustaría ver cómo se desarrollaría en el futuro"
Qué aprendí
Una de las cosas que aprendí es que ningún proyecto es perfecto desde el principio, sino que necesitan varias iteraciones para descubrir qué es lo que falla y/o se puede mejorar, sobre todo cuando eres novato como es mi caso. También aprendí que no hay que desanimarse por no obtener un buen proyecto de primeras, sino tener ganas de mejorarlo poco a poco.
Próximos pasos
¡ Muchas gracias !
Si no lo has hecho ya, mira el resto de proyectos de mi portfolio.