avatarAquaticat

DONE: aplicació de llista de tasques

Visió general

DONE és una aplicació de llista de tasques dissenyada i desenvolupada com a projecte acadèmic a Algonquin College i com a projecte personal dins del monorepo Monochromatic (de 2025 fins ara).

El principi rector: "Treballa per a tu, no et crea més feina." DONE busca eliminar la càrrega que afecta la majoria d'eines de gestió de tasques: sense limitacions, només cal centrar-se en les tasques assignades automàticament, a tota velocitat.

Les meves contribucions

  • Recerca d'usuaris: personas, anàlisi del mercat objectiu, briefs creatius
  • Arquitectura de la informació: fluxos d'usuari, mapes del lloc, diagrames de flux
  • Disseny visual: moodboards, branding, tipografia, sistema de colors
  • Wireframing: wireframes de baixa i alta fidelitat per a telèfon, tauleta i escriptori
  • Prototipatge: prototips interactius de Figma per als fluxos d'usuari principals
  • Desenvolupament front-end: construcció de l'aplicació funcional (en progrés)

Procés de disseny

Recerca i personas

Vaig començar amb una recerca d'usuaris per entendre el públic objectiu. Vaig crear personas detallades que identificaven els punts de dolor amb les aplicacions de tasques existents: complexitat que crea més feina en lloc de reduir-la.

Veure personas i brief creatiu a Figma

Moodboards

Vaig desenvolupar moodboards visuals que establien l'estètica geomètrica i minimalista: formes angulars, alt contrast i espai negatiu intencionat. El llenguatge visual reforça la filosofia de l'aplicació de la claredat per damunt del desordre.

Veure moodboards a Figma

Fluxos d'usuari

Vaig mapejar un possible recorregut d'usuari mitjançant diagrames de flux, identificant punts de decisió i optimitzant per a una fricció mínima.

Veure diagrames de flux a Figma

Wireframes de baixa fidelitat

Vaig esbossar disseny inicials per als punts de tall de telèfon, tauleta i escriptori. Em vaig centrar en la jerarquia de tasques i en patrons d'interacció mòbil amb una sola mà.

Veure wireframes de baixa fidelitat a Figma

Wireframes d'alta fidelitat

Vaig refinar els wireframes en dissenys precisos al píxel amb el sistema de colors, la tipografia i la biblioteca de components aplicats.

Veure wireframes d'alta fidelitat a Figma

Pitch i storyboards

Vaig participar en la creació d'una presentació de pitch que comunicava la visió del producte i les decisions de disseny.

Veure presentació del pitch a Figma

Decisions de disseny clau

  • Llenguatge visual geomètric: icones i formes angulars inspirades en formes cristal·lines i rúniques, que estableixen una identitat distintiva
  • Sincronització automàtica des de fonts externes: les tasques se sincronitzen des d'API, RSS o crawling, reduint la càrrega d'entrada manual
  • Chrome mínim: cada element d'interfície es guanya el seu lloc; res existeix purament per decoració
  • Responsiu primer: dissenyat simultàniament per a telèfon, tauleta i escriptori en lloc d'adaptar-ho a posteriori

Habilitats i eines demostrades

  • Figma i FigJam
  • Cicle complet d'UX (de la recerca al desenvolupament)
  • Desenvolupament de personas i briefs creatius
  • Creació de moodboards i direcció visual
  • Mapatge de fluxos d'usuari
  • Wireframing (baixa i alta fidelitat)
  • Prototipatge interactiu
  • Disseny responsiu per a diverses classes de dispositius
  • Storyboarding i presentacions de pitch
  • TypeScript i desenvolupament front-end