Metodología de trabajo
Design Thinking: Empatizar – Definir – Idear – Testear
Necesidades del cliente
El cliente es una empresa especializada en solucionar problemas de humedad en toda España. Ha realizado cientos de proyectos en los últimos 20 años y, sin embargo, carece de un sistema centralizado donde recopilar todos estos trabajos.
El objetivo de este proyecto es crear un CRM (o gestor de clientes) a medida donde centralizar toda la información de sus clientes. Además, el cliente quiere que éste contenga un mapa geográfico con filtros que les permita filtrar los proyectos por ubicación, tipo de humedad, tipo de cliente y fecha. Este mapa les ayudará, además de a realizar un seguimiento de su trabajo, como portafolio de trabajos que muestren sus casos de éxito a potenciales clientes.
Definir
User Story:
“Como gerente de proyectos, quiero visualizar la ubicación de todos los proyectos completados para poder consultar nuestra experiencia previa de manera rápida y comunicarla fácilmente a clientes potenciales.”
Arquitectura de la información:
Para estructurar las funcionalidades del CRM, comencé diseñando la Arquitectura de la Información. El sistema se organiza en dos áreas principales:
Área de visualización pública:
Incluye un mapa geográfico con filtros y tarjetas flotantes (cards) que permiten acceder a las fichas detalladas de cada proyecto en modo lectura. Esta sección está orientada a la consulta rápida y a mostrar la experiencia de la empresa.Área de gestión interna:
Un entorno administrativo conectado a la base de datos, desde el cual los usuarios autorizados pueden añadir, modificar o eliminar proyectos. Esta zona está optimizada para facilitar la gestión continua de la información.
Definir
Sketches, wireframes y wireflows
Los bocetos iniciales, elaborados junto con el project manager, permitieron definir la navegación y la organización del contenido de forma rápida. A partir de estos primeros esquemas, desarrollé wireframes de baja fidelidad con mayor detalle y, posteriormente, wireflows para representar el diseño de interacción y visualizar cómo los usuarios completan cada una de las tareas dentro del sistema.
Idear
ÁREA PÚBLICA
Con los wireframes y los flujos ya validados, avancé a la fase de diseño visual, garantizando que la interfaz estuviera totalmente alineada con la identidad de la marca. Para ello, revisé el manual corporativo y apliqué sus directrices en cuanto a colores, tipografías y componentes clave como botones, espaciados y estilos de interacción. Mi objetivo fue asegurar coherencia, legibilidad y una experiencia visual sólida en todo el producto.
El mapa muestra todas las ubicaciones de los proyectos en España. Al situar el cursor sobre cada pin, se despliega una tarjeta emergente con la información principal del proyecto. Desde esta tarjeta, el usuario puede acceder a una página detallada del proyecto en modo solo lectura, donde se amplía la información de forma clara y estructurada.
Idear
ÁREA PRIVADA
El acceso a la zona privada está reservado exclusivamente al equipo administrativo del cliente. Esta área incluye un listado de proyectos conectado a la base de datos y las funcionalidades necesarias para filtrar, crear nuevos proyectos, editar los existentes y eliminarlos.
Más adelante, incorporé la opción de cargar un archivo Excel, lo que permitió agilizar significativamente la importación masiva de datos y mejorar la eficiencia del proceso de gestión.
UI Kit
Creé un UI Kit para facilitar el trabajo del equipo de desarrollo y asegurar la coherencia visual en todo el producto. En él incluí, por un lado, las bases del diseño —tipografía, paleta de color y estilos fundamentales— y, por otro, los componentes clave: botones, enlaces, campos de formulario con sus diferentes estados, cards de proyectos, paginación e iconografía. Este sistema permitió establecer un lenguaje visual unificado y acelerar el proceso de implementación.
Testear
Test de usabilidad
Test de usabilidad: Hice test de usuarios a mis compañeros, project manager y desarrolladores (aunque lo ideal hubiese sido a usuarios finales, el equipo del cliente).
- 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 la usabilidad. 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).
- 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 el uso real. 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 agilizar el trabajo.