Case study: funcionalidades innovadoras en el complicado mundo del transporte eléctrico.

Lara Amadeo Tarantino
8 min readJul 15, 2021

Cliente

El cliente en este caso, es una empresa fabricante de coches eléctricos internacional que quiere empezar a vender sus modelos en España.

Se encuentra con barreras ya que el sector automovilístico sostenible en España tiene poco despliegue.

Esto se debe principalmente a tres razones:

  • Baja autonomía ya que no suelen alcanzar más de 300km
  • Red de carga insuficiente repartida por el territorio Español
  • Altos tiempos de carga que no son compatibles con la vida urbana

‌Reto

De esta manera, se define nuestro reto. El briefing propone una solucion en forma de aplicación móvil que ofrezca un servicio de cambio de baterías a demanda y puntos de cambio de batería dinámicos.

Mi reto es conseguir plasmar en una aplicación estos dos procesos de forma sencilla para los usuarios y que de una vez por todas, el sector automovilístico sostenible despegue.

El reto se afrontó mediante Design Thinking pero a una escala menor.

Reasearch: empaparnos de información

Para ello, abriremos una pequeña fase de research, comenzando con un desk reseach, que nos permite marcar un contexto y extraer painpoints.

Establecemos un par de research questions para enfocar la búsqueda en una dirección orientada. Estas se basan en las barreras que frenan el desarrollo de la movilidad eléctrica:

  • ¿Es la falta de autonomía una barrera de gran importancia para los usuarios?
  • En relación con la anterior, ¿Cuál es la perspectiva de los usuarios acerca de la red de carga en España?
  • ¿Son influyentes los tiempos de carga?

Lo primero que buscamos fue el porcentaje de uso de VE en España. En este gráfico podemos ver como España queda en el último puesto en la incorporación de tecnologías automovilísticas eléctricas.

Gráfica obtenida a partir de datos estadísticos

Seguidamente, en la investigación, encontramos los insigths que respondían a nuestras Research questions y confirmaban esas barreras del desarrollo eléctrico del briefing.

En el siguiente enlace vemos un artículo donde declaraciones de diferentes perfiles, nos dejan el tema más que claro.

Link al articulo

Benchmark: analizar lo que otros hacen

Para acercar el proyecto a la realidad, realizamos un benchmark con el fin de analizar la competencia. He buscado distintas empresas que actualmente ofrecen servicios de coches eléctricos de alquiler (Share-now, Emov…) y empresas que proporcionan servicios de recarga de batería de coches eléctricos.

De este modo, extraeremos los puntos fuertes y débiles para ofrecer servicios inmejorables.

Benchmark realizado en Figma

Tras realizar un análisis de la competencia tanto directa (Bateras a domicilio y First Stop) como indirecta (Share-now y Emov), podemos sacar en claro que los servicios que ofrecen son eficientes aunque no completos. Los que ofrecen un servicio de recarga a domicilio no disponen de talleres de recarga.‌

En todo caso, podemos destacar que ninguna empresa de la competencia ofrece un servicio de recambio de baterías, solo la posibilidad de recargar. Y aquí es donde localizamos nuestra propuesta de valor, de la que más tarde hablaré.‌

Después del benchmark y, con el fin de ‘clusterizar’ estas empresas y encontrar así océanos azules, hacemos una matriz 2x2.

Matriz 2x2 realizada en Figma

En ella vemos claramente un gran océano azul, un nicho, una oportunidad recambios de batería a domicilio para urgencias y en talleres con antelación.

Con toda esta información, es hora de definir nuestra propuesta de valor para tener claro los servicios que nos diferencian de la competencia. Para ello, acudimos a las plantillas de la comunidad de DesignPedia y organizamos nuestra información.

Propuesta de valor. Plantilla Designpedia.

UX Persona: mapeando a nuestros usuarios

Dejamos atrás la fase de research para adentrarnos en la fase de definición. Hablamos de diseño centrado en el usuario y por eso, generamos unos user persona y un journey map de la experiencia con los painpoints del reto.‌

Un user persona es un personaje ficticio creado a partir de la información extraída en la fase de Research mediante desk research, benchmark y propuesta de valor.

UX Persona realizado en Figma

Tenemos definida nuestra user persona, Julia. Ahora toca ponerse en su lugar y elaborar un Journey Map para entender cuáles son sus frustraciones y painpoints a la hora de usar un servicio de coches eléctricos.

Customer Journey realizado en Figma

Vemos como Julia comienza su experiencia con el vehículo eléctrico con una sensación buena pero poco a poco la experiencia va empeorando debido a la falta de autonomía y escasez de puntos de carga.

Solución: BOLT

Antes de presentar la solución, exponemos el concepto de la misma.

Concepto

Acabada las fases de research y definición de la arquitectura de la información presentamos la solucion. Siguiendo las pautas del briefing‌

  • Cambio de baterías a demanda
  • Puntos de cambio de batería dinámicos

Ideamos la solución, un servicio que mediante las anteriores pautas mejore la experiencia de los usuarios de vehículos eléctricos.

Logo BOLT realizado en Figma

Colores‌

Para la elección de colores, se ha cogido de punto de partida colores asociados con la electricidad, sostenibilidad y seguridad (verde y azul) y se han sacado tonos a partir de sus complementarios.

Tipografía

‌Se ha seleccionado una tipografía palo seco para brindar la marca con modernismo y simpleza. A su vez se escogido aquella que tuviera las astas de grosor medio y redondeado y una altura de la x extensa para que los ascendentes no sobresalgan demasiado y se cree uniformidad.

Flujos

A la hora de definir los flujos de la app me he centrado en las dos funcionalidades principales propuestas por el briefing como se puede ver en las fotos de abajo o directamente en Whimsical

Solicitar cambio de batería a demanda:

Diagrama de flujo realizado en Whimsical

Reserva de taller para cambio de batería:

El diagrama de flujo sirve para conceptualizar las distintas pantallas y procesos que ira pasando nuestro usuario y nos ayuda a organizarnos a la hora de hacer los wireframes.

Wireframes

Wireframes realizados a mano

BOLT: Sistema de diseño y prototipo

Tras plasmar las pantallas mediante wireframes, pasamos a definir el sistema de diseño. Nos ayudará a crear coherencia y estructura visual.

‌Además, nos proporciona eficiencia a la hora de diseñar ya que mediante la filosofía de Atomic Design, conseguimos diseñar con rapidez a través de átomos y moléculas creadas anteriormente.

Espacio de trabajo en Figma (Style-Guide)

Sistema de diseño

Colores

La elección de colores, como se ha mencionado antes, esta basada en los complementarios de los colores asociados a la electricidad, sostenibilidad…

Colores del sistema de diseño

Tipografías

‌Para la tipografía se ha seleccionado la Roboto de Google Fonts. Para definir los tamaños que deben llevar las tipografías, se ha aplicado un parámetro multiplicador (1.125) que nos permite escalar las tipografías con consistencia.

Tipografías del sistema de diseño

Iconos‌

Para los iconos se ha escogido una familia de iconos pre-hecha. En este caso Material Icons Rounded (Figma Community).

Iconos

Logotipo

‌El logotipo se ha construido en torno a la tipografía HammersmithOne y se le ha añadido un rayo como referencia al uso sostenible de la electricidad.

Logotipo
Favicon

Componentes y variants

Componentes y variants realizados en Figma

Cards

Cards realizadas en Figma

Prototipo

A la hora de diseñar el prototipo, dado que el briefing lo requiere, se han diseñado las pantallas mínimas para entender los flujos que se piden en el reto.

Sistema de Grid y columnas

El diseño de las pantalla se expone en dos flujos distintos.

Flujo recambio de batería

El proceso que se ha establecido para el servicio de recambio de batería a demanda consiste en un overlay donde introduces tu información y eliges si usar el ‘pase’ gratuito o, esta vez, pagar su precio.

A modo de confirmación y para mantener informado al usuario se manda una notificación con el tiempo de espera.

Pantallas realizadas en Figma

Flujo reserva de taller

Para el proceso de puntos de cambio de baterías dinámicos se propone un overlay donde eliges día y hora que quieres hacer la reserva. Según tus preferencias salen los talleres disponibles y por último un mensaje de confirmación de reserva.

Pantallas realizadas en Figma

Conclusiones

El reto consistía en diseñar la experiencia de usuario de una aplicación que permitiese combinar dos procesos:‌

  • Cambio de baterías a demanda
  • Puntos de cambio de batería dinámicos

Para ello, como en todo proceso, se ha llevado a cabo un pequeño Research para centrar al usuario en nuestro diseño y definir las bases del mismo.

‌Gracias al benchmark hemos detectado que la aplicación traería una solucion a las barreras que se interponen en el despegue de la movilidad sostenible. La aplicación soluciona la baja autonomía y la escasez de puntos de carga en el territorio.

‌De haber dispuesto de mas tiempo, se podría profundizar el Research por medio de entrevistas, focus groups y otras técnicas para detectar insights.

‌Con todo esto, se han elaborado seis sencillas pantallas donde se muestra el proceso que llevara a cabo el usuario al hacer uso de los servicios de la aplicación. Con más tiempo, hubiese plasmado estos procesos también mediante interacciones para un mejor entendimiento.

‌A modo de cierre, mi sensación con este reto es satisfactoria, pues en un corto periodo de tiempo, se ha realizado un prototipo high-fi resolviendo los painpoints de todos los usuarios de automóviles eléctricos.

‌Si has llegado hasta aquí, me gustaría agradecerte tu tiempo y dedicación y espero que te haya resultado agradable.

--

--