Contactar
LogoMassana

Gestor de tasques

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

Objectiu

“Necessitem que el nostre procés de gestió tasques diàries a la via pública sigui més àgil, ràpid i automàtic per augmentar la productivitat i eficiència del nostre dia a dia de treball”.



L’objectiu primordial del Comú de la Massana era implementar una solució per millorar la comunicació, col·laboració i eficàcia entre els diferents equips. Assegurar-se que totes les tasques a la via pública es realitzen i hi hagi un seguiment de totes les accions realitzades.

2 Desktop Background scaled

_Documents utilitzats per planificar les tasques

2 Phone Background

_Documents utilitzats per planificar les tasques

El repte

Totes les tasques del departament de via pública eren comunicades per fulles o whatsapp, tractades i planejades a Excel, dificultant el seguiment de la realització de les tasques.



Estàvem davant de diversos desafiaments:


1- Digitalitzar un procés que tenia diverses fases.


2- Entendre els fluxos de tots els processos de treball.


3- Crear una interfície que fos intuïtiva i fàcil d’utilitzar per a tots els nivells d’usuaris.

3 Desktop Desafio scaled
3 Phone Desafio

Definició de l’experiència d’usuari

Per iniciar el projecte, vam haver de fer un pas enrere i traçar una estratègia sobre l’enfocament a seguir. La primera cosa a fer va ser dissenyar el mapa de navegació, per tenir una vista dalt nivell sobre la plataforma.

Per això ens hem basat en el perfil d’administrador principal que és el que més funcionalitats tindrà a la vostra disposició.

També dissenyem el flux del procés dincidència per entendre tot el camí fins estar tancat

4 Desktop Definicion scaled

_Estructura de menús en el mapa de navegació

4 Phone Definicion

_Estructura de menús en el mapa de navegació

Flux del procés

Abans de començar a dissenyar cal una última etapa, que és la de definir almenys els fluxos principals, per així entendre quins perfils hi ha d’usuari, quins estats poden tenir els processos, quines aprovacions podem automatitzar i quins hauran de ser manuals.

Per exemple, tenim les incidències que poden néixer des de qualsevol dispositiu i qualsevol perfil d’usuari.

5 Desktop Flujo scaled

_Flux del procés d’incidència

5 Phone Flujo

_Flux del procés d’incidència

Connectant tots els punts (de disseny)

Ara que sabem com treballa lusuari, els seus principals problemes i necessitats, estem a punt per dissenyar una primera estructura visual de la interfície.


Aquests dibuixos seran molt útils per visualitzar tot l’anàlisi que s’ha desenvolupat fins ara i així canviem d’una visió d’alt nivell a nivell més baix, funcionalitat a funcionalitat.

6 Desktop wireframe scaled

_Representació de la creació d’una incidència

6 Phone Wireframe

_Representació de la creació d’una incidència

Garantir la coherència

Un sistema de disseny sòlid és la columna vertebral de la coherència visual i interactiva d’una marca, assegurant que cada element gràfic i funcionalitat s’alineï harmoniosament a tots els punts de contacte amb l’usuari.

Decidim utilitzar bootstrap per als components per la maduresa i la versatilitat dels components.

7 Desktop dsm scaled

_Sistema de disseny

7 Phone dsm

_Sistema de disseny

Adaptant el traspàs

El procés de transferència també es va adaptar per garantir el llançament dins dels temps definits.

Això va significar que l’equip de desenvolupadors va intervenir abans del que és habitual i va treballar colze a colze amb l’equip de disseny.

Gràcies a sòlids processos de col·laboració que garanteixen que el disseny i el desenvolupament estiguin sempre sincronitzats, l’equip es va adaptar a un procés diferent però sense perdre la qualitat de la feina.

8 Desktop traspaso scaled

_Figma

8 Phone traspaso

_Figma

Solució tècnica

Utilitzar TypeScript amb React en el desenvolupament del front-end proporciona avantatges significatius. TypeScript afegeix tipus estàtics, millorant la detecció d’errors i la robustesa del codi. Això facilita el manteniment i la comprensió del codi, augmenta la productivitat de l’equip i garanteix una experiència d’usuari més sòlida a les aplicacions web modernes. A més, amb els components de React es poden reaprofitar múltiples elements de les aplicacions web sense alterar l’experiència de l’usuari final.


L’ús de SQL Server, C# i .NET Core al desenvolupament backend ofereix una combinació potent i eficient. SQL Server proporciona una gestió robusta de bases de dades, assegurant la integritat i seguretat de les dades. C# és un llenguatge versàtil i orientat a objectes que permet crear lògica empresarial complexa de manera clara i eficient. .NET Core, com a marc de treball, és multiplataforma i brinda flexibilitat per crear APIs escalables i d’alt rendiment. Tot plegat, aquestes tecnologies permeten construir aplicacions segures, ràpides i altament adaptables per satisfer les demandes modernes del desenvolupament backend.



Azure ofereix una solució fiable i escalable per a l’emmagatzematge de fitxers i el desplegament d’aplicacions web. Utilitzar Azure per a File Storage garanteix una gestió segura i eficient de dades, amb accés fàcil i ràpid des de qualsevol lloc del món. Amb característiques com ara redundància i escalabilitat automàtica, Azure simplifica el procés d’emmagatzematge de fitxers per a aplicacions empresarials modernes.

9 Desktop tecnica scaled
9 Phone tecnica

Claus de l’èxit

Després de construir aquest producte des de zero, s’ha aconseguit millorar la manera com l’usuari gestiona les tasques, les vacances, les guàrdies, entre altres funcionalitats.



S’ha disminuït el percentatge de tasques no realitzades, s’ha augmentat el control i l’eficàcia de tots els equips.


Entendre bé l’usuari i com eren les seves rutines diàries va ser clau perquè al final desenvolupéssim un producte de qualitat que ha vingut a millorar el dia a dia de l’usuari i poder eliminar completament el paper i altres aplicacions redundants.

10 Desktop resultado scaled
10 Phone resultado

Propers passos

Ara estem treballant en desenvolupar noves funcionalitats i integracions per continuar millorant i actualitzant la plataforma. Sempre sense perdre focus del més important: l’usuari i la usabilitat de la plataforma.

Transforma els teus projectes en realitats innovadores

PARLEM?