AlqFred: Una App para la gestión del alquiler
2ª Parte: Arquitectura de la Información y Diseño.
(Continuación de la 1ª Parte: Research.)
Con los resultados obtenidos del cardsorting, comenzamos a idear un sitemap acorde a las necesidades del usuario, situando cada función en el mejor lugar posible consiguiendo así una experiencia fluida.
A continuación se puede ver cuál será la estructura de nuestra App. Partiendo del On Boarding, donde brevemente se le explicará al usuario las funciones que ofrece la app, a continuación se le invita a registrarse. Una vez completado el registro y tras elegir entre las opciones de inquilino/casero, el usuario ya estará listo para usar los servicios de la aplicación, que verá reflejados en la Home.
Home casero/inquilino:
- Cuenta
- Pagos
- Incidencias
- Documentación
- Histórico
Con el sitemap definido, el siguiente paso era realizar un diagrama de flujo, flowchart, que no es otra cosa que un diagrama que nos permitirá visualizar los pasos que seguirá el usuario para realizar una serie de tareas. Esto nos ayudará a definir a la perfección todas y cada una de las acciones posibles, y así controlar que todo el proceso tiene coherencia.
De esta manera, nos aseguramos de que antes de comenzar con la capa visual, el contenido no guarda vía muerta alguna, y que el usuario en todo momento estará teniendo una experiencia en la que tiene él mismo tendrá el control.
Inspiración para la capa visual
Como fuente de inspiración me basé no solo en apps cuyos servicios están relacionados con el sector del alquiler, sino también en aquellas cuyo tráfico actual es importante.
De esta forma obtuve información sobre cómo estaba estructurada su arquitectura, y qué tipo de diseño visual estaban empleado.
La marca: “AlqFred”
Todo nació con un juego de palabras.
En ese objetivo de ayudar al usuario a gestionar su alquiler de forma fácil y eficaz, pronto nació la idea de hacer un símil con la figura del mayordomo.
Tras una búsqueda de los personajes más conocidos en el mundo de la Ciencia y Ficción, finalmente me quedé con Alfred, el mayordomo de Batman. Esto, unido a la finalidad de la aplicación, de la cual extraje la palabra alquiler, y combinadas entre sí, dieron lugar al nombre final de la marca: AlqFred.
Color y tipografía
En cuanto a la tipografía, se ha usado la fuente SourceSansPro Regular para todo el diseño. Por un lado, para el isologo, el cual ha sido modificado redondeando sus formas, para que de esta manera tuviera coherencia con la Q, que representa una llave y, por otro lado, para todos los textos que se pueden leer en la app, los cuales se jerarquizan a través de diferentes tamaños, 12, 12, 18 y 22px.
Para el color, se optó por usar colores vivos, y sobre todo actuales, como son el el verde #32EB8E y el morado #664A8E. También se escogieron a mayores tres colores neutros para ayudar a la consistencia global, así como para el contraste entre tipografía y fondo, etc.
Wireframing
Con un site maps y flowchart perfectamente definidos, comencé a “ponerle cara” a la aplicación. Para ello lo primero que hice fue una primera fase de bocetado rápido, donde poder ver de forma visual los elementos existentes y sus posibilidades de ubicación. Una vez realizado, en una segunda fase, se le dio un aspecto más fiel.
Para la realización de este proyecto se optó por trabajar con grid de 5px ya que se trata de una app para sistema operativo iOS.
Prototipo
Ver interacción completa:
Te gustó lo que leíste? Por favor, haz clic en 👏 a continuación para que otros puedan encontrarlo 😄.
