← Back to portfolio
📋 UX Case Study

Quick Canvas

A self-serve, browser-based asset creation tool that eliminated design bottlenecks for Amazon's Events team — from idea to shipped product in weeks.

Role: Design + Engineering
Timeline: 4 weeks
Team: Solo (AI-assisted)
Status: Shipped & Live
80%
Fewer design requests
5 min
Avg. time per widget
50+
Active users
10M+
Customer reach
Quick Canvas interface
LIVE DEMO

See it working — for real.

No mockups, no smoke and mirrors. Here's a full screen recording of Quick Canvas in action — building a production-ready creative end to end.

🔍 Problem Space

The bottleneck nobody talked about.

😤 The Pain

Merchandisers needed 50+ promotional widgets per event. Each required a designer to open Photoshop, build from scratch, and hand off — creating a 2-3 day bottleneck per batch.

🔄 The Loop

Request → Wait → Review → Revisions → Wait again. A single widget took 4+ touchpoints before going live. Multiply by 50 widgets per event = chaos.

🎯 The Opportunity

What if merchandisers could create pixel-perfect, on-brand widgets themselves — in minutes, not days? No Photoshop. No handoffs. No waiting.

✅ The Hypothesis

A browser-based tool with pre-loaded templates, drag-and-drop, and smart defaults could eliminate 80% of design requests while maintaining brand quality.

↓ how might we...
🧪 Research & Discovery

Understanding the workflow.

👥 User Interviews

Spoke with 8 merchandisers and 3 designers. Key insight: merchandisers knew exactly what they wanted but couldn't execute. Designers were drowning in repetitive tasks.

📊 Data Points

• 50+ widgets per event
• 4+ touchpoints per widget
• 2-3 day average turnaround
• 6 major events per year
• 3 designers supporting 15+ merchandisers

🗺️ Journey Map Findings

Biggest friction: The back-and-forth on product placement, text sizing, and background choice. These are purely visual decisions that don't need a designer.

💡 Key Insight

"Give me the canvas and the constraints, and I'll do it myself." — Sr. Merchandiser, Prime Day team

↓ defining the solution
🖥️ Interface Walkthrough

A tour of the tool.

Classic editor pattern — top nav, left sidebar, center canvas. Pick a part to explore it.

Top navigation bar
01 · Top Navigation

Switch widgets, set scale, export

The command center — pick a widget, see live dimensions, choose export scale, and download from one persistent bar.

  • Widget tabs: SCTO, Carousel, Mini PCPO
  • Live dimension badge
  • 1× / 2× scale picker
  • Export PNG / GIF
Left sidebar controls
02 · Left Sidebar

Every control, one panel

All properties in a single scrollable sidebar. Context-aware — controls appear only when they're relevant.

  • Format toggle
  • Background grid + upload
  • Product + alignment tools
  • Text controls + counters
Live canvas area
03 · Live Canvas

Direct manipulation, real-time

The heart of the tool. Drag, resize, and position everything live — what you see is exactly what exports.

  • Drag & drop placement
  • 8-handle resize
  • Draggable text overlays
  • Safe-zone guide
Backgrounds and text controls
04 · Backgrounds & Text

On-brand by default

Pre-loaded event-themed backgrounds keep assets on-brand. Text renders in embedded Amazon Ember fonts for pixel accuracy.

  • GIF + gradient backgrounds
  • Per-widget scoping
  • Headline / sub-callout
  • Alignment + color
Quicky AI and export
05 · Quicky AI & Export

Batch-generate with a sentence

The Quicky AI agent turns a prompt into a batch of finished creatives, then exports them optimized to size limits.

  • Natural-language command bar
  • Parses widget + count
  • Auto-optimized exports
  • GIF for lifestyle + motion
↓ key features
✨ Key Features

What makes it click.

Pick a capability to explore it. Nine features, one focused view at a time.

🎨

Smart Background System

Pre-loaded, event-themed backgrounds keep every asset on-brand without effort — including animated GIFs for Prime Day — plus unlimited custom uploads.

  • PD-themed GIF backgrounds
  • Gradient swatch fallbacks
  • Unlimited custom uploads
  • Auto-scoped per widget
01 / 09
📦

Drag & Drop Products

Upload up to three product images and place them with direct manipulation — no menus, no coordinates, just drag, resize, and align.

  • 8-handle proportional resize
  • Full-canvas alignment
  • Select-area alignment
  • Keyboard delete
02 / 09
✍️

Live Text Overlays

Add a headline and sub-callout that render in embedded Amazon Ember fonts for pixel-perfect accuracy, draggable anywhere on the canvas.

  • Font size controls
  • Black / white toggle
  • L / C / R alignment
  • Live character counter
03 / 09
🎬

GIF & Motion Export

Lifestyle slideshow mode stitches images into an animated GIF, while motion presets bring static ASIN creatives to life.

  • Slideshow GIF export
  • Fade / slide / zoom / bounce
  • Duration + delay control
  • Easing curves
04 / 09
🤖

Quicky AI Agent

A natural-language command bar that turns a sentence into a batch of finished creatives — type it, and they download.

  • Parses widget + count
  • Reads background + position
  • Batch generation
  • Auto-download
05 / 09
🌙

Dark / Light Mode

A full theme toggle for comfortable extended sessions, with the user's choice remembered across visits.

  • One-tap toggle
  • System-preference aware
  • Persists via localStorage
  • Smooth transitions
06 / 09
💬

Figma-style Pin Comments

Drop numbered comment pins anywhere on the page for async design review — right on the live document.

  • Click to drop a pin
  • Draggable + repositionable
  • Persisted locally
  • Toggle or delete
07 / 09
📊

Usage Analytics

A password-protected admin dashboard that surfaces how the tool is really being used across the team.

  • Session tracking
  • Exports by widget / format
  • 7-day activity trend
  • Admin-only access
08 / 09

Zero Dependencies

The entire tool is a single, self-contained HTML file — no server, no build step, no install. It just runs.

  • HTML5 Canvas rendering
  • Vanilla JavaScript
  • Embedded fonts
  • Runs fully in-browser
09 / 09
↓ the journey
📅 Project Timeline

From zero to shipped in 4 weeks.

Tap through each phase to see what happened.

WEEK 1 — Discovery & Prototyping

Understanding the problem space

User interviews with merchandisers and designers. Mapped the existing workflow, identified pain points, and built a rapid prototype with basic canvas rendering and background selection.

WEEK 2 — Core Build

Canvas engine & widget system

Built the HTML5 Canvas rendering engine, drag-and-drop product system, text overlay engine, and multi-widget architecture (SCTO, Carousel, Mini PCPO). First internal demo to the team.

WEEK 3 — Advanced Features

GIF export, AI agent, analytics

Added lifestyle slideshow GIF generation, motion presets, the Quicky AI batch engine, and the admin analytics dashboard. Iterated on feedback from power users.

WEEK 4 — Polish & Ship

Beta launch & rollout

Dark mode, pin comments, safe zone guides, export optimization (auto-compress to size limits), and PD26-themed backgrounds. Deployed to Harmony and onboarded first 50 users.

ONGOING — Scale

Expanding to full org

New widget types (Quad Card, TDR Calendar), workspace system (HVELP + Gateway), and documenting the success story for org-wide investment case.

↓ results
📈 Impact & Results

Before & after.

⚡ Before Quick Canvas

• 2-3 days per batch of widgets
• 4+ touchpoints per asset
• Designers as bottleneck
• Brand inconsistencies
• Missed event deadlines

🚀 After Quick Canvas

• Minutes per widget, not days
• Self-serve = 0 handoffs
• Designers free for strategy
• Template-enforced brand
• Always on time, every event

↓ reflections
🧠 Learnings & Reflections

What I'd tell past-me.

🎯 Constraints = Speed

By limiting widget types and enforcing templates, users actually felt more empowered, not restricted. Constraints are a feature.

🤖 AI as Multiplier

Using AI as a co-pilot (not replacement) let me ship a solo project that would normally take a team of 3-4 engineers weeks longer.

🚢 Ship, Then Perfect

The beta was "good enough" in week 2. Shipping early got real feedback that shaped the final product far better than my assumptions would have.

Try Quick Canvas ↗    ← Back to portfolio