UI-UX case study
Madrid Parking es una app de tipo maps, con predicciones de trafico, pronóstico de tiempo, que ayuda a circular y aparcar a los conductores en Madrid.
Role: Diseñador UX-UI, Ilustrador. Equipo: Daniel
El problema:
La dificultad de conseguir aparcar el coche en Madrid. Tienes distintas restricciones como: zona azul, verde,o zona de Bajas emisiones (Madrid Central) con sus respectivas restricciones de limite de tiempo o si puedes entrar o no según tu tipo de pegatina.
Pensando en esto, dando vueltas con el coche alrededor de la escuela del master pensé: :¿Porqué no existe una app que me diga que sitios libres hay de zona azul o verde cerca de mi destino?
Solución:
He utilizado la idea de los parking privados, donde hay sensores de reconocimiento. Te indican que plazas libres hay en cada pasillo. He desarrollado una app que te ayude a encontrar aparcamiento en zona azul, verde o libre, tipo maps, permite pagar el parkimetro. Registrando tu tipo de etiqueta puede avisarte si estás a punto de entrar en Madrid Central, para que no lo hagas en caso de que no tengas una etiqueta correspondiente. También tiene una serie de predicciones de lluvia, posibles atascos basados en patrones de tráfico según el día y la hora.
Metodología
Este proyecto ha seguido la metodología Design Thinking. Investigando y observando la competencia, encontrando la dirección del proyecto con los resultados conseguidos en las encuestas y entrevistas. Esta parte me ayudó mucho a entender por ejemplo que la app te avisara si ibas a entrar en Madrid central era algo de gran utilidad para los usuarios encuestados. Los personae, mapas de empatia, Matriz de necesidad fueron realmente utiles para empatizar con las necesidades del usuario y desechar ideas secundarias menos relevantes. Por ultimo en la fase UI he utilizado el Atomic design, por su facilidad para componer de menos a más. Test de usuario y análisis de accesibilidad para encontrar errores a mejorar en la app.
Proceso:
1. Observar:
Desk reasearch, Netnografía, Research Question, Benchmarking, DAFO, Entrevistas, cuestionarios.
2. Sintetizar:
Personae, Mapa de empatía, Customer Journey y Matriz de necesidades.
3. Idear:
Finding e insights, Matriz de utilidad, IN-Out, Moscow, Propuesta de valor, Business model.
4. Diseñar:
Moodboard, Árbol de navegación, Diagrama de flujo, Wireframes (Low-fi / Hi-fi), Test de usuario, Accesibilidad.
5. Prototipar:
Foundations, UI Kit, Atomic Design, IxD.
Observar y sintetizar:
Después de realizar las investigaciones UX encontré información valiosa. Una serie de necesidades del usuario conseguidas en las entrevistas, encuestas y researchs. Cómo es el caso de que el aparcamiento lleva siendo un problema desde los años 60's. Que la mayoría de usuarios encuestados tienen etiqueta tipo C. Que el ser avisados de que van a entrar en Madrid central es un 50% más util para ellos que la ayuda de aparcado.
Otros insights han sido la utilidad de que la app tenga una opción de trayecto asistido y opción de pagar el parking sin tener que ir al parkimetro físico. con esto queda claro que lo que eran ideas secundarias tienen incluso mayor importancia que la idea inicial de aparcamiento asistido.
Idear:
En esta fase del diseño UX redacté los insights encontrados en las entrevistas y anteriores paso. Organizando y priorizando que ideas eran las realmente importantes y cuales se quedarían fuera del proyecto. Teniendo en cuenta las necesidades del usuario es como se forman los cuatro bloques de esta app: Pronóstico de tiempo, Cálculo de ruta, buscar aparcamiento asistido y pago de parkimetro.
Diseño UI:
El diseño es de un tono oscuro de fondo con una escala de morados como color primario. Un tono amarillo de secundario para destacar pequeños detalles de la aplicación. La paleta busca un contraste alto facilitando la lectura.
La app tiene 4 partes principales que en realidad son partes de una misma ruta, puedes ver el pronostico de lluvias, calcular una ruta, hacer la ruta con maps, pedir aparcamiento asistido y pagar el parking. Desde el menú principal puedes empezar esa ruta desde el punto que tu necesites. por ejemplo pagar el parking directamente.
Empecé los Wireframes de baja fidelidad en papel, me siento más cómodo desarrollando esa primera fase a mano. En cuanto a la tipografía he usado "Nunito Sans", una única familia tipográfica para el proyecto con sus variantes de estilo. Me parece atinada para una app tipo maps, donde la lectura rápida es importante mientras la persona conduce. Las ilustraciones del onboarding las hice con perspectivas rotas, por rebajar la seriedad en el tono del proyecto y dar unas notas más desenfadas.
El sistema de diseño utilizado es atomic design, ha sido muy útil cuando he rediseñado este proyecto para no tener que rediseñar los elementos usados en cada pantalla. Al modificar el componente padre, los componentes hijos varian, lo que es un gran ahorro de tiempo.
Fundations & Sistema de diseño
Wireframes Baja y alta
Conclusiones:
Fue el trabajo final del master que realice de manera indiviual. Una vez acabado el master con ayuda del profesor Iván Rico, mejoré partes como el diseño UI, los componentes gerarquía visual, añadí ilustraciones personalizadas al onboarding y añadí algunos cambios en la investigación UX.
