Skip to content
MonoGrMonoGray Studio
Back to all projects

Project Tools

Bringing project intent, everyday tasks, and working context into one open-source workspace.

Project Tools workspace showing project cards with status, priority, progress, due dates, and owners
Deliverables
  • Web App UI
  • Interactive Prototype
  • Open-source Frontend
Roles
  • UX Design
  • UI Design
  • Design System
  • Frontend Development
  • SaaS
  • Productivity
  • Web App

Project Tools brings planning, tasks, notes, and files into one workspace for small product teams. I designed and built the open-source frontend, published as Project Dashboard.

The challenge

A project list shows what exists. It should also help people understand why the work matters, who owns it, and what happens next.

The exploration connects project intent with everyday work: a clear starting brief, flexible views, and context that stays close to each task.

These archived designs and recordings use sample data. The frontend demo has no authentication or backend; research findings and measured business results are outside this case study.

Start with the right amount of detail

Quick create captures an early idea. Guided Setup helps define the purpose, outcome, and people before work begins.

Quick create and Guided Setup choices at the beginning of a new project
Project intent step offering Delivery, Experiment, and Internal project types

Turn intent into a shared brief

Define success, assign owners and contributors, then review the brief. Each step keeps one decision in focus.

Guided project setup defining success through deliverables or metrics, with a sample conversion target and deadline
Project ownership step separating owners, contributors, and stakeholders
Review step summarizing intent, outcome, ownership, and work structure before project creation

Scan projects by status

The board groups projects into stages while keeping progress, priority, and owners visible. Cards offer a quick way into the work.

Project Tools board grouping project cards into status columns, with project progress and owners visible

Keep the brief close

Scope, outcomes, and the timeline live in the project overview. A collapsible side panel keeps ownership and key details within reach.

Project overview for a sample Fintech Mobile App Redesign, showing scope, outcomes, features, and project metadata

Move from planning to action

The task list connects each item to its status, assignee, dates, and work category. Project context stays visible beside the list.

Sample project task list with status labels, assignees, dates, and work categories beside the project metadata panel

Plan the week, define the task

A weekly board brings daily commitments together. The task composer captures the details, while workstreams group related tasks.

Weekly task board with work arranged by day and completion state
Annotated task composer showing project, workstream, task properties, and primary creation action

Give notes a place in the project

Notes sit alongside tasks and files. Desktop and mobile compositions explore how the same material can be browsed at different screen sizes.

Archived Project Tools montage showing notes, a sample note preview, a task board, and project files
Desktop and mobile notes compositions from the original Project Tools social artwork

Keep discussions and files together

A note preview pairs the summary with its transcript. The files view separates recent items from the full document list.

Project note preview with a sample summary, key points, and an adjacent transcript panel
Project Assets and Files tab with recent files, file search, and a document list

Connect clients to the work

A searchable directory opens into a client panel with company details, relationship stage, linked projects, and notes.

Sample client directory with company, industry, relationship status, and linked project counts
Client directory with the Sarah Lee detail panel open, showing company information, notes, and linked project cards

See the workspace at a glance

The Performance view combines project status, throughput, and work mix. Date controls let people explore a reporting period using sample figures.

Performance dashboard with sample project status, throughput trend, work mix, and bug-clearance charts

From design to a working frontend

Built with Next.js, TypeScript, and shadcn/ui, the demo makes the interface explorable. This recording follows project navigation and guided setup.

Keep exploring

Related work

Brew AI automation workspace displayed on a desktop monitor

Brew

SaaS • AI • Email Marketing

Let's get the next version ready to build.

Tell us what you're building, where the product feels stuck, and what your team needs.