CHAVEZ
AboutSkillsWorkContact
COMMERCIALUI DesignFront-End EngineeringUsability Testing

PastreeClipboard Manager

A browser extension that transforms the clipboard into a powerful Copy & Paste tool with automatic capture, keyboard shortcuts, and contextual organization for repetitive workflows.

Client:Digisoma
Role:Product Designer & Engineer
Duration:6 months
Pastree

About the Project

If you're constantly on your computer online juggling multiple applications, documents, and communication channels, you might have come across the need to have at least one more paste shortcut. Copy-paste operations consume valuable time, and frequently used text snippets are lost in the traditional single-item clipboard. Pastree emerged from observing these friction points in daily workflows across online forms, SaaS tools, and content creation tasks.

The Problem

The user research identified three critical productivity blockers affecting power users.

1

Pain Point

Lost Context: The standard clipboard holds only one item. Users frequently copy something new before pasting the previous item, losing valuable information

2

Pain Point

Repetitive Tasks: Professionals repeatedly type or copy-paste the same text snippets dozens of times per day—email signatures, code snippets, form responses

3

Pain Point

Context Switching: Switching between applications to find and copy frequently used text breaks focus and disrupts workflow momentum

4

Pain Point

93% of users reported losing important clipboard content at least once daily

5

Pain Point

Average user copies the same 8-12 text snippets repeatedly throughout their workday

6

Pain Point

67% maintain separate documents or note files with frequently used text

Design Process

I mapped out user flows based on research findings and prioritized features that would solve real workflow problems without adding cognitive overhead.

1

User Research & Insights

Conducted interviews with 15 professionals across different domains to understand clipboard usage patterns and pain points.

Deliverables:
User interview reportsUsage pattern analysisPain point identificationFeature prioritization
2

Information Architecture

Designed three primary user flows: passive capture, quick access via keyboard shortcuts, and contextual organization through custom lists.

Deliverables:
User flow diagramsInformation architectureFeature specificationsInteraction patterns
3

Interface Design

Created a minimal, keyboard-centric interface with dark mode first approach and contextual actions to reduce cognitive load.

Deliverables:
WireframesHigh-fidelity designsComponent libraryDesign system
4

Technical Implementation

Built modular architecture with service worker, content scripts, and popup UI using TypeScript and modern browser APIs.

Deliverables:
Browser extensionCross-browser compatibilityPerformance optimizationUser testing

My Role

As both Product Designer and Front-End Engineer, I led the entire product development cycle from user research to technical implementation.

  • Conducted user research interviews with 15 professionals across different domains
  • Designed information architecture and user flows for clipboard management
  • Created visual design system with dark mode first approach
  • Implemented browser extension using TypeScript and Chrome APIs
  • Built cross-browser compatibility for Chrome and Firefox
  • Conducted weekly usability testing sessions throughout development
  • Optimized performance for large clipboard histories with virtual scrolling

Methodologies

User-Centered Design·Agile Development·Usability Testing·Cross-Browser Development

User Research Insights

Through interviews with designers, developers, writers, and customer service representatives, I discovered critical patterns in clipboard usage that informed the product design.

0%

losing important clipboard content at least once daily

0%

maintain separate documents or note files with frequently used text

8-12

user copies the same text snippets repeatedly throughout their workday

Users wanted keyboard-first access without interrupting their workflow

Context switching between applications was a major productivity blocker

Users needed better organization for different types of content (i.e., job applications vs email templates)

Key Features & Solutions

I delivered five core features that transform the clipboard from a single-item storage into a powerful productivity tool with automatic capture, keyboard shortcuts, and contextual organization.

Automatic Clipboard Capture

Pastree monitors all copy operations in the background and automatically saves up to 100 clipboard items with timestamps. Works transparently—users copy as normal, but can now access their complete clipboard history anytime through the extension popup or keyboard shortcuts.

Automatic Clipboard Capture - Figure 1

Copy any text snippet into Pastree by using Cmd + C or any menu option.

Automatic Clipboard Capture - Figure 2

Pastree's Clipboard history view displays all captured clipboard items with timestamps.

Keyboard-First Paste System

Dedicated keyboard shortcuts paste the three most recent clipboard items: Option+P (most recent), Option+O (second), Option+I (third). Users can paste recently copied content without touching the mouse—keyboard shortcuts are displayed in the popup for discoverability.

Keyboard-First Paste System - Figure 1

Pastree extends your clipboard automatically with two extra shortcuts to paste from your keyboard. Pastree also allows you to add text and assign it to a shortcut of choice.

Keyboard-First Paste System - Figure 2

Add extra paste shortcuts to your keyboard by using option + P, option + O, option + I.

Custom Lists for Context Organization

Users can create custom lists (e.g., 'Job Applications', 'Email Openings') and organize related snippets together. Items can be added to lists via drag-and-drop or action buttons; lists are accessible from the dedicated Lists tab and context menu.

Custom Lists for Context Organization - Figure 1

Create lists from clipboard items through the action buttons or while adding new text using the Add button.

Custom Lists for Context Organization - Figure 2

The Lists view displays all your lists and allows you to add, edit, delete and organize your lists.

Search & Starring System

Full-text search filters clipboard history in real-time; starred items persist permanently and appear in a dedicated section. Search bar is prominently placed; typing immediately filters results; star icon toggles favorite status with visual feedback.

Search & Starring System - Figure 1

Find any item in your clipboard history by typing in the search bar. Filter results quickly and identify words with highlighting.

Search & Starring System - Figure 2

Star items to easily access them anytime using the Star filter view.

Right-Click Context Menu Integration

Context menu shows recent clipboard items and custom lists as nested submenus when right-clicking any text field. Natural right-click workflow; menu dynamically updates with current clipboard state; one-click paste for any item.

Right-Click Context Menu Integration - Figure 1

Right-click on any text field to access the Pastree context menu to paste clipboard content.

Right-Click Context Menu Integration - Figure 2

Find all items in Pastree with the context menu allowing you to browse through your clipboard history, lists, starred items and more.

Key Learnings

Insights and knowledge gained from this project that shaped my approach to future work.

Product Design

User Research Foundation

Starting with interviews and workflow observations ensured features solved real problems rather than assumed needs. Weekly user testing sessions prevented building in the wrong direction.

Technical Architecture

Modular Development

Modular code structure made cross-browser compatibility manageable; TypeScript caught potential bugs during development. Supporting both Manifest V2 and V3 created complexity but ensured broader reach.

UX Design

Progressive Enhancement

Core functionality (clipboard history) works immediately; advanced features (lists, search, shortcuts) are discoverable over time. This reduced initial complexity while maintaining powerful functionality.

Performance

Optimization Strategies

Implemented virtual scrolling and optimized storage queries; tested with 1000+ items to verify performance. Performance degradation with large clipboard histories was solved through careful optimization.

Project Overview

Role
Product Designer & Engineer
Duration
6 months
Year
2025
Client
Digisoma

Techniques

UI DesignPrototypingUsability TestingDevelopment

Tools

FigmaTypeScriptViteChrome APIsUser InterviewsVS Code

Tags

UI DesignFront-End EngineeringUsability Testing

Ready to Work Together?

Let's apply this process to your next project and create something amazing together.

View My Work
CHAVEZ

Navigate

  • About
  • Skills
  • Work
  • Contact

Resources

  • Resume
  • Case Studies
  • Design Process

Connect

  • LinkedIn

© 2025 Roy Chavez. All rights reserved.

Privacy Policy