Proceso de diseño de plataforma virtual destinada a la búsqueda de roommates y cuartos compartidos.
Durante el proceso de aprendizaje del curso UX/UI impartido por Acámica se nos encomendó la realización de un proyecto que uniría todos los conocimientos adquiridos. De esta forma, la consigna fue el diseño de una website y una app destinada a la búsqueda de roommates y cuartos compartidos.
Benchmark.
En primer lugar fue necesario conocer qué productos similares ofrece el mercado y cuáles son sus características particulares. Para esta investigación tomé en cuenta tres aplicaciones consideradas como competencia directa: DadaRoom, RoomGo y Airbnb. De la investigación de estos tres productos fue posible conocer sus fortalezas y “puntos de dolor”.
Cuadro comparativo de las características de las tres plataformas.
De esta sistematización de datos pude concluir que:
— Presentan la información de manera atomizada, sin contexto que las aglutine.
— No presentan mayores datos sobre las características de las ciudades.
— En general las publicaciones carecen de valoraciones y feedback por parte de los usuarios.
— Los usuarios no se conocen entre sí ni comparten información como una comunidad.
— Presentan la información de manera atomizada, sin contexto que las aglutine.
— No presentan mayores datos sobre las características de las ciudades.
— En general las publicaciones carecen de valoraciones y feedback por parte de los usuarios.
— Los usuarios no se conocen entre sí ni comparten información como una comunidad.
Encuestas.
A su vez realicé una encuesta para comprender el contexto de los potenciales usuarios de la futura plataforma y de sus resultados se pudo interpretar que la mayoría de las personas encuestadas entre 26 y 35 años trabajan, alquilan un inmueble y perciben un sueldo pero éste es insuficiente para suplir con todas sus necesidades.
Resultados estadísticos de la encuesta realizada mediante Google Forms.
User-Personas.
A partir de los resultados de las encuestas pude definir mejor los arquetipos que serán, a partir de este momento, una guía de usuarios posibles del nuevo proyecto.
Síntesis de los user-persona.
Enfoque y definición del proyecto.
Una vez que completé el diseño de los diferentes arquetipos, analizado los resultados del benchmark y las encuestas; pude entender que una posible problemática común es el desconocimiento.
Si bien existen muchos motivos para mudarse y cambiar un estilo de vida por otro, los usuarios suelen tener en común incertidumbres similares. Éstas suelen ser del tipo “¿Cómo será la casa donde voy a vivir?”, “¿Cómo será la nueva ciudad?”, “¿Cómo me voy a mover en este nuevo contexto?”, etc. A su vez, existen muchas personas que ya han vivido la experiencia de buscar un lugar donde vivir y que ya se han adaptado a la ciudad y sus características.
Es por eso que el proyecto propone hacer foco y fomentar el feedback entre aquellos usuarios que se inician en la búsqueda de un lugar donde vivir y los que tienen información y experiencia para compartir.
De esta forma, el proyecto se enfoca a que los usuarios generen información relevante que vaya más allá de las características de una vivienda y que permita evacuar las posibles dudas que puedan surgir.
Identidad.
Luego de pasar por varias alternativas el nombre que elegí es miCOMPA. Este nombre es una simplificación de “mi compañero” o “mi compañera”. Por un lado, la idea fue conseguir un nombre en español ya que el grueso de sus usuarios son hipano-hablantes mientras que, por otro lado, fue necesario alejarse de la palabra “roomie” que es un término anglosajón menos conocido.
Versión Web.
Como puede verse en el site-map, la plataforma consta de siete secciones las cuales sus flujos se relacionan entre sí.
Site-map.
En este proyecto se decidió desarrollar tres secciones: Login/Registro, Buscar y Publicar. Para tal fin diseñé los siguientes user-flow que explican los diferentes procesos que se llevan a cabo.
Wireframes.
Una vez definidos los procesos comencé a trabajar en las primeras aproximaciones a la interfaz. En este caso en particular los wireframes Lo-Fi los desarrollé de forma digital por una cuestión de practicidad y prolijidad.
Wireframes Lo-Fi.
En su versión Hi-Fi, los wireframes comienzan a mostrar un acercamiento más fiel a una versión definitiva. Ya en esta instancia la resolución que elegí fue de 1024×768 píxeles la cual permite adaptarse fácilmente a resoluciones mayores. Por otro lado fue posible tener una idea mas acabada de las relaciones de todos los elementos gráficos de la interfaz.
Wireframes Hi-Fi.
Visual Design.
Una vez que definí la interfaz fue momento de desarrollar su estética visual. Para eso se determiné tipografías, paleta de colores, íconos, botones, etc.
Mediante la creación del moodboard pude concretar la paleta cromática. Ésta luego la utilizaría siguiendo la regla 60–30–10. Los colores elegidos fueron:
— Gris: color primario utilizado en fondos.
— Azul: color secundario que se vincula con las ideas de confianza y credibilidad.
— Naranja: color de acento vibrante y llamativo.
— Gris: color primario utilizado en fondos.
— Azul: color secundario que se vincula con las ideas de confianza y credibilidad.
— Naranja: color de acento vibrante y llamativo.
Moodboard con sus palabras clave y paleta cromática.
Pruebas de usabilidad.
Una vez armado el primer prototipo fue testeado por posibles usuarios mediante pruebas de usabilidad. Si bien el método recomendado es presencial, estas pruebas fueron realizadas mediante video-llamadas cumpliendo con el “Aislamiento Social, Preventivo y Obligatorio”.
Las conclusiones recolectadas de estas pruebas fueron muy útiles para ir ajustando el diseño hacia su prototipo final.
Finalmente, el prototipo fue el resultado de la armonización de todos los elementos gráficos, la información y los métodos de navegación. Por otro lado, la versión final tomó forma luego del feedback de mis mentores, de los resultados de las pruebas de usabilidad y de mis compañeros de clase.
Prototipo web.
Versión Mobile.
El siguiente paso fue la creación de la misma plataforma adaptada a una app de Android nativa. Para esta ocasión se utilizó a Material Design como sistema de diseño.
En general pude mantener decisiones estéticas referente a los colores, la tipografía y los íconos. El cambio más evidente se manifiesta en su navegación ya que la resolución de la pantalla y la forma de uso de los teléfonos celulares repercuten directamente en la cantidad de información presentada y su navegación.
Es por eso que fue necesario reformular los user-flows.
Y comencé a bocetar la nueva interfaz teniendo en cuenta las especificaciones de Material Design. Una diferencia notable entre ambas versiones es que en su versión mobile es necesario dividir la información en diferentes instancias ya que incluir todos los elementos en una pantalla se vuelve poco práctico para el usuario.
Wireframes Lo-Fi.
El paso siguiente fue el de aproximar los primeros bocetos a una versión mas fiel al producto final. En esta instancia me fue posible definir el tamaño y la ubicación de los elementos visuales como también reafirmar o invalidar las decisiones tomadas en la confección de los wireframes Lo-Fi.
Wireframes Hi-Fi.
Finalmente, una vez validados los procesos anteriores, pude concretar el prototipo final en su versión mobile. Como puede verse, si bien el formato es diferente la app sostiene una continuidad estética con su versión web lo que posibilita entenderlos como una unidad.
Prototipo mobile.
Los resultados que pueden verse en esta publicación son la manifestación de un proceso largo con varias reformulaciones. Los prototipos fueron creados con Adobe XD y éstos se aproximan a las posibilidades que las plataformas digitales pueden ofrecer.
De este proyecto pude concluir que existe una relación constante entre las necesidades de los usuarios y las maneras en que un diseño intenta resolverlas. El feedback y la iteración son herramientas necesarias para llegar a los resultados óptimos que durarán un tiempo determinado ya que las herramientas digitales, el contexto de los usuarios como sus necesidades cambian constantemente.
