UX/UI Case Study
FlyRoom: Proyecto final para la carrera de Diseño UX/UI en Acámica.
La consigna inicial era crear un producto digital para buscar roomates y compartir alojamientos. Me enfoqué en estudiantes del país que se mudan de una a otra provincia a continuar sus estudios universitarios, asistir a congresos u otro tipo de eventos.
Research
Para comenzar, realicé un benchmarking de webs que ofrecen alojamientos para tener un punto de referencia, compararlos con mi proyecto, y posteriormente realizar mejoras e implementarlas.
Algunos de los sitios que visité fueron: Airbnb, DadaRoom, Roomi y Roomgo.
De todos ellos extraje features que iba a tener en cuenta para realizar mi producto. Si bien estos sitios no estaban enfocados en estudiantes, me sirvió mucho para generar una interfaz que el usuario comprenda en pos de lograr el objetivo de reservar un alojamiento.
Luego realicé una encuesta para obtener datos cuantitativos y cualitativos acerca de cómo los estudiantes migran de una provincia a otra para continuar su carrera. Por ejemplo, los estudiantes de medicina son, mayoritariamente, quienes buscan mudarse para realizar la residencia en un hospital u otra institución. Otro motivo por el cual los estudiantes deciden mudarse con alguien es que la gran mayoría busca compartir gastos. Para esto utilicé encuestas, entrevistas con usuarios y métricas.
Personas y Customer Journey
Luego de recolectar la información sobre quienes iban a utilizar el producto, era necesario analizar esa información para encontrar oportunidades que nos permitiera diseñar el mejor producto posible.
Arquitectura de la información
Teniendo claros los objetivos y las necesidades de los usuarios, era necesario definir los features del producto y crear un sitemap y user flows. Esto me sirvió para analizar y comunicar la arquitectura de su información. De esta manera, decidí dividir la información en cuatro partes:
Buscar alojamiento: Poder filtrar la búsqueda a través de la carrera o ingresando el nombre de la universidad (o ingresando la ciudad o provincia).
Perfil: Poder completar mi perfil con una descripción sobre mí, editar mis preferencias de búsqueda y agregar fotos.
Mensajes: Recibir y enviar mensajes de posibles roomates que reciban nuestra solicitud de alojamiento.
Blog: Permitir que los usuarios puedan complementar la búsqueda y futura reserva con un blog que amplíe la descripción de las ciudades y experiencias vividas por estudiantes.
Wireframes
Para poder volcar toda esa información en la interfaz de nuestro producto, fue necesario realizar wireframes, comenzando con lápiz y papel para facilitar las jerarquías visuales y la estructura que iban a ir tomando las pantallas. Luego utilicé Adobe XD para digitalizarlas.
Hechos los wireframes y cuando ya tuve consolidados los flujos e interacciones de nuestra interfaz, comencé a validar estas decisiones creando un prototipo Lo-Fi.
Visual Design
El proceso de Visual Design fue la etapa en la que decidí cuál será la identidad visual de nuestro producto, comenzando por construir un Moodboard para inspirarme, el cual iba a argumentar las decisiones por las cuales elegiría la tipografía, color, sistema de grillas, imágenes, etc.
Una vez realizado el Moodboard, pude crear un sistema de identidad visual, donde volqué aquellas decisiones de diseño que creía pertinentes para que los usuarios se sientan familiarizados con el producto.
Una vez definida la identidad visual, llegó la hora de realizar prototipos de alta fidelidad (la herramienta elegida para esto fue InVision) para poder testear el producto con usuarios reales, a partir de un guión que identifique los painpoints y que me sirviera para poder validar hipótesis planteadas.
En esta etapa no solo fue importante recolectar feedback de los usuarios en todas las etapas del proceso, sino también saber interpretar y jerarquizar los hallazgos de manera que nos permitan modificar y mejorar nuestro producto.
Finalizado los testeos, realicé una lista de modificaciones que creía necesario cambiar o agregar para iterar las pantallas y así mejorar la usabilidad del producto.
Podés ver el prototipo final del proyecto web aquí: https://invis.io/STMZEI22A4K
Mobile
Conociendo con profundidad las funcionalidades de mi producto y comprendiendo la necesidad de los usuarios a través del research general y la creación de userflows, comencé a diseñar la app de Flyroom. Tuve en cuenta que algunas funcionalidades, como así también la interacción del usuario con un producto mobile, iban a ser muy diferentes al de la web. Es por eso que modifiqué aspectos del userflow realizado en la etapa inicial, considerando también las particularidades de diseñar UI para apps y aprovechar esos componentes y patrones de diseño de cada sistema operativo.
De nuevo, realicé un benchmarking de apps que ofrecen alojamientos.
Descarte algunos features que creía no era necesario para un producto mobile, como por ejemplo la sección Blog.
Wireframes App
La identidad visual del producto fue definida en base a la experiencia de los usarios y la interfaz del producto. Elegí Roboto, una tipografía adaptable al sistema operativo (Android), fácilmente escalable y legible.
A su vez elegí una paleta cromática parecida a la del sitio web, para mantener una coherencia entre ambas y utilicé las grillas e íconos de Material Design. También exploré plugins muy interesantes en Adobe XD que me facilitaron el trabajo.
Podés ver el prototipo final de la versión mobile en este link: https://invis.io/7NSJ60V29QU
Todo lo aprendido en la carrera me sirvió para abordar de principio a fin los principales aspectos en la creación de un producto final, mediante metodologías ágiles de trabajo, como Design Thinking. Desde la etapa de research, conociendo a nuestros usuarios, sus necesidades, emociones y objetivos, hasta prototipar las pantallas, testear el producto, sacar conclusiones y desarrollar una Visual Design.
Quiero agradecer a todos los mentores/as de Acámica y a compañeros/as de cursada, quienes siempre se prestaron para despejar mis dudas con mucha dedicación.
