LogoMassana

Gestor de tareas

webApp

Tipo de trabajo

· UX Design
· UI Design
· Front-End Development
· Back-End Development
· QA

Tecnología

tecnologia icons
1 Desktop Coverrrr scaled
1 Phone Cover

Objetivo

“Necesitamos que nuestro proceso de gestión tareas diarias en la via pública sea más ágil, rápido y automático para aumentar la productividad y eficiencia de nuestro dia a dia de trabajo”.

El objetivo primordial del Comú de la Massana era implementar una solución para mejorar la comunicción, colaboración y eficacia entre los diferentes equipos. Assegurarse de que todas las tareas en la via pública se realizen y exista un seguimiento de todas las acciones realizadas.

2 Desktop Background scaled

_Documentos utilizados para planear las tareas

2 Phone Background

_Documentos utilizados para planear las tareas

El reto

Todas las tareas del departamento de vía pública eran comunicadas por hojas o whatsapp, tratadas y planeadas en Excel, dificultando el seguimiento de la realización de las tareas.

Estábamos delante de varios desafíos:
1- Digitalizar un proceso que tenía varias fases.
2- Entender los flujos de todos los procesos de trabajo.
3- Crear una interfaz que fuera intuitiva y fácil de usar para todos los niveles de usuarios.

3 Desktop Desafio scaled
3 Phone Desafio

Definición de la experiencia de usuario

Para iniciar el proyecto, tuvimos que dar un paso atrás y trazar una estrategia sobre el enfoque a seguir. Lo primero a hacer fue diseñar el mapa de navegación, para tener una vista de alto nivel sobre la plataforma. Para eso nos hemos basado en el perfil de administrador principal que es el que más funcionalidades va a tener a su disposición.

También diseñamos el flujo del proceso de incidencia para entender todo el camino hasta estar cerrado

4 Desktop Definicion scaled

_Estructura de menús en el mapa de navegación

4 Phone Definicion

_Estructura de menús en el mapa de navegación

Flujo del proceso

Antes de empezar a diseñar hace falta una última etapa, que es la de definir al menos los principales flujos, para así entender que perfiles hay de usuario, qué estados pueden tener los procesos, que aprobaciones podemos automatizar y cuáles tendrán que ser manuales.

Por ejemplo, tenemos las incidencias que pueden nacer desde cualquier dispositivo y con cualquier perfil de usuario.

5 Desktop Flujo scaled

_Flujo del proceso de incidencia

5 Phone Flujo

_Flujo del proceso de incidencia

Conectando todos los puntos (de diseño)

Ahora que sabemos como trabaja el usuario, sus principales problemas y necesidades, estamos listos para diseñar una primera estructura visual de la interfaz.


Estos dibujos van a ser muy útiles para visualizar todo el análisis que se ha desarrollado hasta ahora y así cambiamos de una visión de alto nivel a más bajo nivel, funcionalidad a funcionalidad.

6 Desktop wireframe scaled

_Representación de creación de incidencia

6 Phone Wireframe

_Representación de creación de incidencia

Garantizar la coherencia

Un Sistema de Diseño sólido es la columna vertebral de la coherencia visual e interactiva de una marca, asegurando que cada elemento gráfico y funcionalidad se alinee armoniosamente en todos los puntos de contacto con el usuario.

Decidimos utilizar bootstrap para los componentes por su madurez y la versatilidad de los componentes.

7 Desktop dsm scaled

_Sistema de diseño

7 Phone dsm

_Sistema de diseño

Adaptando el traspaso

El proceso de transferencia también se adaptó para garantizar el lanzamiento dentro de los tiempos definidos.

Esto significó que el equipo de desarrolladores intervino antes de lo habitual y trabajó codo a codo con el equipo de diseño.

Gracias a sólidos procesos de colaboración que garantizan que el diseño y el desarrollo estén siempre sincronizados, el equipo se adaptó a un proceso diferente, pero perder la calidad de la transferencia.

8 Desktop traspaso scaled

_Figma

8 Phone traspaso

_Figma

Solució tècnica

Utilizar TypeScript con React en el desarrollo del frontend proporciona ventajas significativas. TypeScript agrega tipos estáticos, mejorando la detección de errores y la robustez del código. Esto facilita el mantenimiento y la comprensión del código, aumenta la productividad del equipo y garantiza una experiencia de usuario más sólida en las aplicaciones web modernas. Además, con los componentes de React se puede reutilizar múltiples elementos de las aplicaciones web sin alterar la experiencia del usuario final.

El uso de SQL Server, C# y .NET Core en el desarrollo back-end ofrece una combinación potente y eficiente. SQL Server proporciona una gestión robusta de bases de datos, asegurando la integridad y seguridad de los datos. C# es un lenguaje versátil y orientado a objetos que permite crear lógica empresarial compleja de manera clara y eficiente. .NET Core, como marco de trabajo, es multiplataforma y brinda flexibilidad para crear APIs escalables y de alto rendimiento. En conjunto, estas tecnologías permiten construir aplicaciones seguras, rápidas y altamente adaptables para satisfacer las demandas modernas del desarrollo back end.

Azure ofrece una solución fiable y escalable para el almacenamiento de archivos y el despliegue de aplicaciones web. Utilizar Azure para File Storage garantiza una gestión segura y eficiente de datos, con acceso fácil y rápido desde cualquier parte del mundo. Con características como redundancia y escalabilidad automática, Azure simplifica el proceso de almacenamiento de archivos para aplicaciones empresariales modernas.

9 Desktop tecnica scaled
9 Phone tecnica

Claves del éxito

Después de construir este producto desde cero, se ha logrado mejorar la manera como el usuario gestiona las tareas, vacaciones, guardias, entre otras funcionalidades.

Se ha disminuido el porcentaje de tareas no realizadas, se ha aumentado el control y eficacia de todos los equipos.

Entender bien al usuario y como eran sus rutinas diarias fue clave para que al final desarrollásemos un producto de calidad que ha venido a mejorar el día a día del usuario y poder eliminar por completo el papel y otras aplicaciones redundantes.

10 Desktop resultado scaled
10 Phone resultado

Próximos pasos

Ahora estamos trabajando en desarrollar nuevas funcionalidades e integraciones para seguir mejorando y actualizando la plataforma. Siempre sin perder foco de lo más importante: el usuario y la usabilidad de la plataforma.

Transforma tus proyectos en realidades innovadoras