codeshamzah

self initiated

Canvas — Creative Studio

A Dark-Mode Workspace Unifying Media Previews and Real-Time Review Flows

Role
Product Designer — Interface Design, Dark Theme Token System, Media Preview Micro-Interactions, and Framer Prototyping.
Scope
Kanban project boards, a file browser with inline media previews (images, video, PDFs), real-time commenting on visual assets, team spaces with role-based access, notification management, and a dark-mode-first design system.
Timeline
10 weeks
Category
Web Application

Overview

A 25-person creative agency managed projects across Asana, Google Drive, Slack, Dropbox, and email. Each tool handled one piece of the workflow, but nothing connected them — and the gaps were costing real time.

Challenge

Files were uploaded in one tool, discussed in another, and tracked in a third. Designers couldn't preview assets without downloading them. Feedback got buried in email threads. The result: missed deadlines, lost files, and frustrated creatives.

Objective

Build a single workspace where creative teams can track projects, preview media files inline, and leave contextual feedback — all without switching tools or losing context. Consolidate 5 creative management tools into 1 unified dark-mode workspace Shorten asset review and approval cycles by 50%

Approach

Wrote down the review loop the brief implies — export, download, comment elsewhere, re-upload — and designed to remove each hop. Built the dark theme system first, since review work happens on image-heavy screens, then designed the commenting and asset-state model on top of it.

Selected decisions

Dark mode was the default because creative professionals spend eight-plus hours in their tools and lighter interfaces cause fatigue. Inline media previews removes the 'download to review' bottleneck by design. The kanban layout was spatial rather than linear so cards could display thumbnail previews of attached assets directly on the board.

Responsibilities

Workflow Shadowing & Contextual Inquiries Dark-Mode Theme & High-Contrast Visual System Inline Media Preview & Annotation Micro-Interactions Interactive Framer Prototype & Design Handoff

Deliverables

Complete application UI built in Framer, a dark-mode token system with documented color scales, interaction prototypes for drag-and-drop and real-time collaboration, component documentation, and implementation handoff specs.

Outcome

The exercise produced a consolidated review workflow with explicit asset states, an inline preview model that removes the download-comment-reupload loop, and the interface architecture for running feedback in one place. Nothing was built for an agency; the output is the workflow and the screens that describe it.

Reflection

Creative teams don't want project management software — they want creative flow management. The features that drove adoption weren't task lists or gantt charts. They were inline previews and the ability to comment directly on a design without opening a separate app.