¿Cómo hacer esta vida en todos los sectores más sostenible?

¿Me acompañáis en este viaje en solitario?

Laura CH
12 min readOct 1, 2021

¡Hola a todos!

Esta vez vuelvo con mi proyecto personal realizado a través de la metodología Design Thinking, si no sabéis de que trata esta metodología os invito a ver el anterior proyecto.😊

Para este proyecto arrancamos de 0, sí sí de cero patatero… y bien, al principio aunque no tenía muy claro qué tema elegir sabía que quería algo amplio, en el que explorar, perderme, converger… Y esto ligado a que siempre me ha preocupado el cómo tratamos nuestro entorno partí del tema medio ambiente, en concreto:

Tema del proyecto

A partir de aquí hice un poquito de desk research, el cual me dio muchísima información…

Pero la información era tanta, que necesitaba sacar el pisto mental que llevaba y definir algunos conceptos, por lo que plasmé todo en un mind map, el cual me ayudó a centrarme, a poner orden a todo ese research y a definir aún más el briefing.

Inicio vs “Final” del mind map

Tenía claro que quería enfocarme a un colectivo, ayudar al sector o empresas afectadas, crear una propuesta real y factible a corto/medio plazo y que fuera innovadora y digital, por pedir que no falte… 🧔🏼🧔🏽🧔🏿

También quería entender el problema, que es que estamos agotando los recursos, viviendo por encima de nuestras posibilidades, y comprometiendo a las futuras generaciones, lo cual viene a ser el objetivo del desarrollo sostenible, y la solución no es precisamente encontrar otro planeta…

Briefing | Mapa de afinidad

Empezaron a surgirme preguntas, las cuales ordené en un mapa de afinidad, para luego concretar el perfil y las preguntas que utilizaría para realizar las entrevistas. ¿Y por qué entrevistas y no encuestas? Porque como dije antes la información en cantidad era mucha y lo que necesitaba para el proyecto era información cualitativa. Para ello me marqué unos objetivos, con esas preguntas quería saber:

  • si la sostenibilidad estaba siendo una moda pasajera o se iba a quedar.
  • si hay conocimiento y visibilidad.
  • si hay interés e implicación por parte de las empresas.
  • si existen empresas que proporcionen servicios para mejorar la situación.
  • y sobre todo, quería detectar necesidades actuales que no cubran estas empresas o incorporar servicios complementarios a los existentes.

ENTREVISTAS

Encontré una primera entrevista, Carmen, fundadora de Sosteniblízate (pequeña consultora medioambiental), lo que ella decía es que la sostenibilidad está de moda, que los consumidores la estamos reclamando cada vez más a las marcas, y por ello ahora estamos viendo mucho a empresas como estas, intentando limpiar su imagen a través de la publicidad.

Entrevista online Carmen Cárceles

Por otro lado, me dio un dato importante y es que el tejido empresarial en nuestro parís, está en su mayoría formado por PYMES y autónomos, y que precisamente este rango es el que más complicado lo tiene para acceder a esas certificaciones.

Entrevistas a Lucía Suárez y Lucía Sanz

Lucía Suárez, cofundadora de Miogas, empresa que transforma los residuos orgánicos en energía y fertilizantes, me habló sobre la visibilidad que hay, afirmando que en estos últimos años ha ido creciendo. Tenemos acciones como que en 2018 se empezaron a cobrar las bolsas de plástico y en el análisis de tendencias vemos cómo las búsquedas sobre “sostenibilidad” y “ODS” aumentaron.

Concluía su entrevista con la reflexión de que tiene que haber un cambio de chip, que parece no lo hacemos hasta que tocamos fondo, y coincide con la última entrevistada, Lucía Sanz, trabajadora en la consultora APPLUS, que me decía que hemos tenido que pasar por una pandemia para darnos cuenta de que los problemas “externos” también nos afectan a nosotros.

También me explicó con detalle cómo es su trabajo en la consultora, y encontré varios puntos de mejoría que vendrían a definir mi user:

USER PERSONA

User Persona

Pequeña consultora de sostenibilidad medio ambiental, que por lo que vi no tienen tecnologías muy potentes, y lo que utilizan son los equipos de medición y algún software gratuito para pasar las mediciones que toman a un Excel.

JOURNEY MAP

Journey map

Este sería su proceso de trabajo, como veis, es un proceso bastante aparatoso y manual. Algunas de sus frustraciones son:

  • No se pueden incorporar al trabajo de otros compañeros porque estos tendrían que ponerles al día y supondría una pérdida de tiempo.
  • No es muy buena la gestión actual del trabajo.
  • Tienen que pedir permisos si quieren consultar que la empresa ya ha trabajado con ellos.
  • Tienen que encuadrar las mediciones dentro de los rangos legislativos.

Depués de hallar esos findings recopilé los insights detectados con toda esta investigación:

  • La sostenibilidad es algo necesario, cada vez se la demandamos más a las empresas.
  • Es un sector que está en crecimiento.
  • No hay más opciones, la sostenibilidad es el camino que sí o sí vamos a tener que seguir.
  • No existen herramientas para ayudar a las consultoras en sus procesos.

De todos ellos decidí centrarme en que:

No existen herramientas para ayudar a las consultoras en sus procesos.

De aquí marqué el que sería mi reto:

Ayudar a las consultoras de sostenibilidad a gestionar y agilizar sus procesos.

Imágenes del motion graphic de BIC “2 minutos para entender el desarrollo sostenible”

IDEAR

¿Qué quería conseguir con este reto?

Mis objetivos eran muy claros:

  • Automatizar los procesos de las consultoras
  • Dar información de forma visual y clara.
  • Conectar diferentes bases de datos

¿Cómo podía conseguirlo?

La verdad en este caso no dudé mucho con el formato, ya tenía algo de experiencia trabajando con herramientas Saas, CRMs, consolas en nube con gestión centralizada, etcétera, por lo que ¿porqué no aprovechar las herramientas que conocemos y adaptar sus funcionalidades a las necesidades de la empresa?

Así fue como nació:

Logotipo Cloud

CLOUD es un CRM SAAS, pensado para que las consultoras puedan ofrecer a las pymes un servicio completo, tanto de evaluación como de cumplimiento de sostenibilidad medioambiental. Esto sería posible gracias al apoyo de los organismos públicos y las organizaciones asociadas a la causa como las que vemos aquí en el modelo de negocio, ethiclab, ecodes, entre otras.

Modelo de Negocio

PROTOTIPADO

Para desarrollar esta idea, comencé planteando varias historias de usuario que hicieron meterme aún más en la piel de la consultora (mi user) y así poder sacar las funcionalidades que después iba a necesitar desarrollar. Una vez definidas las priorizé con la técnica MoSCoW, aunque para mí eran todas muy importantes e intentaba abarcar lo máximo posible debía focalizar…

Historias de usuario | MoSCoW

Una vez clara y definida la idea y las funcionalidades, era el momento de diseñar la arquitectura de información que tendría esta plataforma. Como véis tenemos diferentes perfiles de acceso tanto consultoras como las propias empresas, ya que quería conectarlas en un mismo sitio y que en cualquier momento puedan disponer ambas de la información que necesiten para realizar sus procesos. Para ajustarme al timming tuve que priorizar y seleccionar las funcionalidades más relevantes que se iban a desarrollar.

Arquitectura de la información Cloud

Como buena seguidora de Art Attack cogí lápiz, papel, goma y tijeras, y me puse a diseñar algunos wireframes de esas funcionalidades seleccionadas para saber cómo se vería esta plataforma con los diferentes contenidos, cómo se vería mejor el menú, los perfiles del usuario…

Wireframes a mano

Después realicé un primer prototipo, aquí ya vemos la plataforma CLOUD, cuya finalidad es agilizar y automatizar los procesos de las consultoras. Este que vemos a continuación sería el perfil de la consultora, aquí el responsable tendrá acceso tanto a proyectos como empleados y empresas. Podrá dar a sus empleados unos permisos según su perfil y podemos ver un Kanban de todos los proyectos y su estado, con una priorización según la urgencia de cada proyecto.

Prototipo Desktop v1.0

En CLOUD, las empresas van a poder realizar peticiones y las consultoras con un click al botón convertirán estas peticiones en proyectos, les aparecería un overlay en el que podrán seleccionar o las diferentes empresas o las peticiones que están activas, ajustar la prioridad, la duración y asignar los empleados que realizarán el proyecto.

Prototipo Desktop v1.0

Desde el perfil de cualquier empleado de la consultora, podemos ver tanto sus proyectos como las empresas que pertenecen a la comunidad CLOUD. Y nada más acceder nos aparecería un dashboard que nos va a dar una visualización global de datos.

Prototipo Desktop v1.0

Aquí incorporamos la parte de legislación que es un aspecto importante, que los empleados tengan disponible la legislación de la empresa filtrada según el sector y localidad a la que pertenezca la empresa, esto evita tener que buscarla.

También tenemos el apartado de mediciones que realizan a las empresas y de acciones para aquellas empresas que necesiten tomar medidas protectoras. En ambos apartados incluirán el estado actual del proceso.

Y por otro lado tenemos las acreditaciones, el cual también va a estar en el perfil de la empresa y es un aspecto muy importante para ellos, porque les va a permitir enviar de forma automática esas acreditaciones a los organismos públicos.

¡OJO! Pero esto no se quedó ni ahí, ni así… ¿qué hice? ¡Iterar! 🎉

Así que os voy a contar ahora todo ese proceso visual de diseño de interfaz (UI). Tenía ya marcados algunos futuribles:

  • Creo que aún se puede mejorar bastante la capa visual, sobre todo el contraste en algunos campos de texto.
  • Quiero desarrollar los flujos, y también el perfil del cliente final que serían esas empresas que solicitan el servicio.
  • Y validar finalmente tanto las funcionalidades como el flujo con ambos perfiles.

Pues bien de estos tres se ha desarrollado el primero, que era el principal, y se ha añadido alguna cosita más… voy a explicaroslo por frames y partes, haciendo las comparativas, con los objetivos y cambios realizados en cada uno de ellos, de esta forma se verá seguramente mucho más claro.

Prototipado CLOUD (todas las versiones)

Como veis, el primer cambio y más principal fue el cambio de grid, inicialmente se había elegido una grid general para todo el dashboard sin distinguir entre el sidebar menu y el panel, a parte el sidebar ocupaba bastante espacio de ancho por lo que se redujo. Para todo ello creamos dos grids una para el sidebar menu y otra para el contenido del dashboard, y reajustamos todos los elementos de cada frame.

A parte de este cambio había que hacer en cada frame varios ajustes más, por lo que os explico ahora uno a uno (aunque se repitan algunos de ellos) para que se aprecien mejor los cambios realizados:

Primer Frame

PERFIL DE LA CONSULTORA

Prototipo Desktop Consultora v1.0 | Prototipo Desktop Consultora v1.1

¿Qué pasa aquí?

Los colores

Contraste fondo-texto

Consistencia en los iconos

¿Cómo lo resolvemos?

Se ajustó la luz en los colores semánticos, y se hicieron varias pruebas de color en texto-fondo para que todos pasaran el contraste 4:5. También igualamos los iconos de cada sección al mismo tamaño.

Segundo Frame

OVERLAY CONVERTIR PROYECTO

Prototipo Desktop Overlay v1.0 | Prototipo Desktop Overlay v1.1

¿Qué pasa aquí?

Los colores

Contraste fondo-texto

Consistencia en los iconos

¿Cómo lo resolvemos?

Un poco en la misma línea, los colores estaban muy subidos y la sombra en botones hacía que resaltaran aún más, tanto los botones como iconos llamaban más la atención que el resto, y no se veía un “conjunto” si no diferentes elementos en una ventana. Al corregir los colores y tener en cuenta el contraste, como mencioné en el frame anterior, la cosa cambia bastante como veis en la imagen de la derecha.

Tercer Frame

PERFIL DEL EMPLEADO

Prototipo Desktop Empleado v1.0 | Prototipo Desktop Empleado v1.1

¿Qué pasa aquí?

Los colores

Contraste fondo-texto

Consistencia en los iconos

Accesibilidad en los gráficos

¿Cómo lo resolvemos?

Los primeros puntos a resolver son los mismos mencionados anteriormente.

Para mejorar la accesibilidad en los colores del gráfico, me apoyé en “color blind” un plug-in de Figma que nos muestra como ven las personas con diferentes discapacidades visuales los colores de nuestro widget. Aquí veis tres líneas de testeo del widget, la primera del original, la segunda con el primer cambio y la tercera con el segundo ajuste de colores:

Original test color blind | Primer test con color blind | Segundo test con color blind
Widget v1.0 | Widget v1.1

Como veis también se ajustó el color-contraste de los textos y añadimos una línea de texto para indicar qué estamos midiendo en el gráfico. Creo que mejorar este punto en realidad compensa mucho, con solo dedicarle un momento estamos mejorando la experiencia de estos usuarios “olvidados” o que a menudo no se les tiene tan en cuenta como al resto.

Sidebar Menu Reducido

¿Es necesario?

Creo que la mejor respuesta es “depende del usuario”, en este proyecto crear una pantalla con el sidebar menu reducido es coherente, ya que los empleados se desplazan y toman mediciones in situ, para ello es mucho más fácil, cómodo, viajar con una tablet o similar, ya que pesa mucho menos y tiene más autonomía, por lo que reducir este elemento para que en formatos más pequeños funcione mejor cobra bastante sentido.

En este caso acompañamos los iconos de etiquetas para que sea más fácil identificar cada sección del menú.

Prototipo Desktop Sidebar reducido v1.1

Nuevo Breakpoint

VERSIÓN MOBILE

¿Porqué mobile?

La forma que tenemos de comunicarnos con los demás y conectar calendario, tareas diarias, se unifica generalmente en los móviles, por lo que no podía faltar en este caso el breakpoint con la versión mobile, para tener más accesible toda la información. Por eso he diseñando alguna funcionalidad para ver cómo se vería.

¿Cómo pasamos de desktop a mobile?

Ya sabemos que no interactuamos igual desde un ordenador que desde nuestro teléfono móvil por lo que debemos adaptar lo que tenemos. Antes de ir a lo loco, miré algunas aplicaciones, ¿cómo lo hacen los demás?¿qué aplicaciones usamos día tras día? ¡no está de más investigar un poco antes de dar el paso! Tras echar un 👁 por aplicaciones como gmail, monday, pocket, adapte la parte del Sidebar menu y el Kanban de proyectos. Aquí podéis ver el prototipo y su interacción:

Adaptación versión mobile

Y por último las conclusiones:

La verdad es que empecé planteando el tema como si fuera a cambiar el mundo y he acabado con la sensación de que no es que no podamos cambiarlo, si no que tenemos que focalizarnos en pequeñas cosas y cambiar esas pequeñas cosas para lograr cambiar el mundo entre todos.

Este proyecto me ha enseñado a parte de lidiar con mi “impostora” a tener en cuenta muchos aspectos, a no cerrarme de primeras y fluir con la investigación. Me ha encantado descubrir la solución con el proceso y también verlo al cabo de un tiempo para iterar, mejorar y poder tener en cuenta aspectos que no pude por tiempos.

Agradecer como siempre Raúl Marín por enseñarnos a hacer las cosas con cabeza y corazón, y especialmente en este proyecto a Olga Muñoz decir que me ha ayudado sería poco! Ha sido mi guía en este proyecto, mi “va que tú puedes” o “¡tira que ya lo tienes!” (entre otras) hasta el último día, desde aquí mil y una gracias! 🥰

Y a vosotros como siempre, espero que os haya gustado y ¡nos vemos en el siguiente! 💛

--

--

Laura CH

Product Designer · UX / UI · Audiovisual Designer