Amber — Proyecto UX/UI

Published in

UXER SCHOOL

7 min readMay 21, 2018

Aprende desde tu coche.

Amber es un proyecto que surge del trabajo en equipo desarrollado en el curso User Experience Immersive realizado en UXER SCHOOL. Los integrantes del equipo son:
Juanma Prous — Strategic & Product Designer
Iván Santamaría — Visual Designer
Inma Ortega — Account Executive
Santiago Campayo— UX/UI Designer
Verónica Lezana— UX/UI Designer

En primer lugar desarrollamos el concepto de Smart Cities para tener una visión ampliada de todos los campos susceptibles de intervención. Definimos Smart Cities como la aplicación de soluciones tecnológicas que tienen por finalidad optimizar la gestión de todos los agentes que intervienen en el funcionamiento de las ciudades: transporte, energía, residuos, educación, sanidad, seguridad… Con este marco tan amplio decidimos focalizar el proyecto en la movilidad. Para ello nos servimos de la metodología Design Thinking.

01. MAPEAR

Iniciamos el proyecto analizando el estado del arte de las soluciones de movilidad en las ciudades destacando cómo éstas actualmente solo dan servicio a determinadas zonas de Madrid. Esta realidad rápidamente nos posicionó en el extra radio y en los desplazamientos que diariamente realizan sus habitantes a sus respectivos trabajos. Con un usuario más definido, ciudadano que diariamente utiliza el coche para ir al trabajo, y antes de iniciar las entrevistas, destacamos los siguientes datos macro que ponen en relieve la dimensión del problema.

02. EXPLORAR

Para poder identificar las mayores frustraciones que encuentran nuestro usuario en sus desplazamientos cotidianos desarrollamos el guión de nuestra entrevistas y comenzamos la recogida de información.

Los descubrimientos más reveladores de las entrevistas fueron:

• Aunque los costes derivados de los desplazamientos son altos el usuario no valora la posibilidad de compartir coche debido a la incertidumbre en el compromiso de terceros.
• El horario para los trayectos de ida y vuelta no son estables. El usuario valora la libertad que le ofrece el coche para realizar otras tareas durante el trayecto de vuelta.
• El usuario considera importante el medioambiente pero no condiciona sus comportamientos (Concienciado pero no practicante).

Para completar la información obtenida de las entrevistas realizamos el Mapa de Empatía que nos permite ponernos en la piel del usuario y destacar referencias que no hayan sido incluidas anteriormente.

Una vez recogida la información procedimos a detectar patrones de comportamiento que nos permitieron desarrollar nuestra ficha persona.

Para conocer toda la trayectoria del usuario durante su desplazamiento al trabajo desarrollamos el “Costumer Journey Map” que nos facilita identificar cuáles son los puntos de apalancamiento más interesante a la hora de buscar soluciones.

Toda la recogida de información nos permite poner el foco en la mayor frustración experimentada por el usuario.

Este literal del usuario nos permite desarrollar y acotar nuestro problema para la búsqueda de soluciones innovadoras. Queda así planteado nuestro desafío de diseño:

No podemos olvidar que el desarrollo de cualquier producto digital utilizado durante la conducción tiene que estar sujeto a la menor interferencia posible durante su uso.

03. CONSTRUIR

Con el problema claramente identificado iniciamos la búsqueda de alternativas que pudiesen mitigar la frustración de los usuarios. Para ello realizamos un “brainstorming” que recogiese todas las posibilidades que diesen respuesta a nuestro desafío. De esta manera y volviendo a la ficha persona destacamos como nuestro usuario encontraba su crecimiento profesional como un “must”. De esta “hibridación conceptual” entre la falta de tiempo para mejorar competencias y el tiempo empleado en los desplazamientos desarrollamos nuestra propuesta.

Volvemos ahora a mapear el estado de la tecnología y las plataformas digitales de formación con el objetivo de tomar referencias didácticas, funcionales, de uso, de progreso y de monetización. Este estudio nos sirve para identificar rápidamente los requerimientos propios del producto:

• Baja interacción durante el uso (conducción)
• Procesos de gamificación.
• Accesibilidad a cursos.
• Controles por voz durante el uso (conducción)
• Producto freemium & pago

Con el problema definido desarrollamos el Mapa de “Stakeholders” que nos permite definir y agrupar todos los agentes que forman el ecosistema.

Para el desarrollo del “Business Model” (modelo de negocio) y la propuesta de valor detectamos que la plataforma estaba compuesta por dos agentes (mercado de dos caras); por un lado los proveedores de contenidos como universidades, escuelas de negocios, escuelas de idiomas…, y por el otro los conductores como consumidores del producto. Para ello determinamos cuáles son los trabajos que el conductor pretende conseguir con el producto, además de sus alegrías y frustraciones. Con esto procedemos a desarrollar una propuesta de valor que solucione los trabajos, mitigue las frustraciones y responda a la las alegrías.

Para la monetización del servicio determinamos desarrollar un servicio “freemium” para la primera lección de cada curso y una opción de pago que aumentase los servicios ofrecidos (charla con profesores, reconocimiento por voz…), destacamos también la posibilidad de incluir publicidad segmentada durante el audio de las lecciones(cuñas publicitarias).

Comenzamos el desarrollo de funciones con el fin de construir el “storyboard” de nuestro producto y validar las funcionalidades con el usuario. Este paso fue fundamental para testar el producto, valorar su compresión por parte del usuario y refinarlo antes de iniciar el desarrollo de la arquitectura, la estrategia de marca y el “frontend”.

PROTODISEÑO

Habiendo visualizado las potenciales características que implicaría nuestro producto, pasamos a modelar, a modo esquemático, algunas pantallas que considerábamos bastante prioritarias. De ahí surgió un “proto-diseño” que simplemente nos sirvió para visualizar aquellas funcionalidades de nuestra propuesta de valor, tales como:

• El reconocimiento por voz
• Enseñanza personalizada de la mano de un tutor
• La Interfaz con una condición de apoyo (NO estará diseñada para retener toda la atención del usuario, ya que éste está conduciendo)

ARQUITECTURA

Ya que la propuesta responde, como vimos anteriormente, a un modelo de dos caras, desarrollamos la arquitectura a partir de dos grandes bloques, el primero (ubicado a la izquierda) corresponden a la organización del contenido que va a nutrir los diferentes cursos de la plataforma. Y a la derecha se ubicarán todos los elementos relacionados con el usuario y sus funcionalidades.

WIREFRAMES

MARCA

Nuestra aproximación a la problemática inicial fue la de generar un valor en aquella franja de tiempo que perdían los conductores en los atascos recurrentes (como en los trayectos de camino al trabajo). Ese valor venía de la mano de un proceso de aprendizaje, o lo que es lo mismo, el conductor aprovechaba el tiempo en el coche aprendiendo alguna temática de su interés. Es así como empezamos a girar entorno a la idea de atesorar ese tiempo y de representar el producto con una marca que reflejara este adjetivo. En tal contexto AMBER(Ámbar en inglés) como piedra semipreciosa nos pareció un referente de marca idóneo.

En cuanto al logo AMBER representa un corte triangular como el que se le realizaría a una piedra para acceder a su interior. Es importante recalcar que el valor de un Ámbar se incrementa al poseer elementos en su interior (insectos o pequeñas plantas). De la misma manera como sucedería con el tiempo del usuario, que adquiriría un valor al albergar en su interior una sesión de aprendizaje.

PANTALLAS

Para preparar las pantallas (UI) nos centramos en la pasarela de lecciones de un usuario registrado, donde se visualiza el inicio de la lección, la llamada del tutor, el apartado de preguntas y el resumen de la lección.