avatarAquaticat

DONE -- To-Do List App

Overview

DONE is a to-do list application designed and developed as both an academic project at Algonquin College and a personal project within the Monochromatic monorepo (2025 -- present).

The guiding principle: "Works for you, not creating more work for you." DONE aims to eliminate the overhead that plagues most task management tools -- no limitations, just focus on your auto-assigned tasks, full speed ahead.

My contributions

  • User research -- Personas, target market analysis, creative briefs
  • Information architecture -- User flows, site maps, flow diagrams
  • Visual design -- Moodboards, branding, typography, colour system
  • Wireframing -- Low-fidelity and high-fidelity wireframes for phone, tablet, and desktop
  • Prototyping -- Interactive Figma prototypes for key user flows
  • Front-end development -- Building the working application (in progress)

Design process

Research and personas

Started with user research to understand the target audience. Created detailed personas identifying pain points with existing to-do apps: complexity that creates more work instead of reducing it.

View personas and creative brief in Figma

Moodboards

Developed visual moodboards establishing the geometric, minimal aesthetic -- angular shapes, high contrast, and purposeful negative space. The visual language reinforces the app's philosophy of clarity over clutter.

View moodboards in Figma

User flows

Mapped out a possible user journey through flow diagrams, identifying decision points and optimizing for minimal friction.

View flow diagrams in Figma

Low-fidelity wireframes

Sketched initial layouts for phone, tablet, and desktop breakpoints. Focused on task hierarchy and one-handed mobile interaction patterns.

View lo-fi wireframes in Figma

High-fidelity wireframes

Refined wireframes into pixel-perfect layouts with the full colour system, typography, and component library applied.

View hi-fi wireframes in Figma

Pitch and storyboards

Involved in the creation of a pitch presentation communicating the product vision and design decisions.

View pitch presentation in Figma

Key design decisions

  • Geometric visual language -- Angular icons and shapes inspired by crystalline and runic forms, establishing a distinctive identity
  • Auto-sync from external sources -- Tasks sync from APIs, RSS, or crawling, reducing manual entry overhead
  • Minimal chrome -- Every UI element earns its place; nothing exists purely for decoration
  • Responsive-first -- Designed simultaneously for phone, tablet, and desktop rather than adapting after the fact

Skills and tools demonstrated

  • Figma and FigJam
  • Full UX lifecycle (research through development)
  • Persona development and creative briefs
  • Moodboard creation and visual direction
  • User flow mapping
  • Wireframing (low-fidelity and high-fidelity)
  • Interactive prototyping
  • Responsive design across device classes
  • Storyboarding and pitch presentations
  • TypeScript and front-end development