PROYECTO

Cliente

Iberdeco humedades

 
 

Servicios

Diseño de CRM a medida

 
 

Mi rol

Diseñadora UX/UI

 

Link al proyecto

Contexto del proyecto

El cliente es una empresa especializada en el diagnóstico y la solución de problemas de humedad a nivel nacional. Ha realizado con éxito cientos de proyectos en los últimos 20 años y, sin embargo, carece de un sistema centralizado donde recopilar todos estos trabajos.

Necesidades del cliente

El objetivo de este proyecto es crear un CRM a medida donde centralizar toda la información de sus clientes. Este CRM contendrá un mapa geográfico con filtros que les permita filtrar los trabajos por ubicación, tipo de humedad y tipo de cliente. Este mapa les ayudará, además,  a realizar un seguimiento de su trabajo y como portafolio de trabajos y casos de éxito para futuros clientes.

User Story: “Como gerente de proyectos, quiero tener un CRM que muestre todos los proyectos completados en un mapa geográfico, para poder visualizar fácilmente nuestro trabajo anterior y mostrar nuestra experiencia a clientes potenciales. Esto me ayudará a atraer nuevos clientes y demostrar nuestra amplia experiencia en la solución de problemas de humedad”.

Diseño visual de la zona pública

Con los wireframes y los flujos aprobados, pasé a la fase de diseño, asegurándome de que la interfaz de usuario estuviera en sintonía con la marca. Para ello consulté con el manual de identidad corporativo, adoptando los colores corporativos y las característica de los elementos como la tipografía y otros graficos de apoyo

El mapa muestra todas las ubicaciones de los proyectos en España. Al pasar el cursor sobre un pin, aparece una ventana flotante con una imagen del proyecto, su nombre y el tipo de problema de humedad. Al hacer clic en esta ventana, se accede a una página detallada del proyecto (solo lectura).

Diseño visual de la zona interna

Los bocetos iniciales creados junto con skateholder y compañeros sirvieron para capturar rápidamente la navegación y organización del contenido. 

Partiendo de esos bocetos, creé con más detalle wireframes y posteriormente wireflows para mostrar cómo los usuarios navegan por las diferentes tareas, garantizando una experiencia fluida. 

UI Kit

El kit de interfaz de usuario utilizó los colores de la marca para mantener la coherencia, y se eligió la fuente Poppins por su aspecto limpio y moderno. Componentes clave como botones, campos de formulario y pines de mapa se personalizaron para adaptarse a los requisitos del cliente y a la funcionalidad del CRM.

Test de usabilidad

Hice test de usuarios a mis compañeros, project manager y desarrolladores (aunque lo ideal hubiese sido a usuarios finales).

  • Con la interacción, comprobamos que faltaba diseñar los elementos de feedback necesarios para informar al usuario por parte del sistema (modales y toast).
  • También por parte de desarrollo, solicitarón modificar el flujo de creación de proyecto ya que era necesario generar un identificador del proyecto, para comenzar con la carga de imágenes (es decir, se dividió el flujo en dos pantallas). 

Aprendizajes

  • La importancia de crear un prototipo para comprobar su usabilidad. Hice test de usuarios a mis compañeros, project manager y desarrolladores (aunque lo ideal hubiese sido a usuarios finales). Con la interacción, omprobamos que faltaba diseñar los elementos de feedback necesarios para informar al usuario por parte del sistema (modales y toast).
  • La flexibilidad con desarrollo. Una vez en desarrollo, me solicitaron cambios en el diseño. Como por ejemplo, añadir una pantalla más para la carga de imágenes en el flujo de creación de proyecto ya que era necesario generar un identificador del proyecto, para comenzar con la carga de imágenes. 
  • Iteración. Tras unos meses de uso por parte de los usuarios, el cliente también solicitó cambios: quiso añadir la posibilidad de cargar los datos de los proyectos (nombre, localización, tipo de trabajo, teléfono, etc) a partir de tablas de excel para ser más efectivos en su trabajo.