top of page

Marcus Brookins

Sharpnel.png
Jade Tree2.png
Sampler VST GUI Stems Spaced.png
Sampler VST GUI Pitch Spaced.png
Sampler VST GUI Spaced.png
Sharpnel.png

Cutting Jade

A Sampler GUI Case Study

Sampler 3D.png
Case Study

“Cutting Jade” Sampler VST — Modular GUI System

/01 Project Overview

Role

Tools

Goal

jade.png

Solo Product Designer 

Figma, Illustrator, Photoshop

Build an intuitive interface for a drag-and-drop sampler that:

• slices audio manually or with AI-powered “smart chops”
• auto-detects Key/BPM
• separates stems
• gives multitrack control & quick sound-design tools

Project Definition

Project Definition

Target Users

Bedroom producers who don’t want to leave their plugin for complex resampling tasks.

Targeted Tasks

1) Drop a loop and get playable slices fast.
2) Isolate stems without third-party plugins.

Success Metrics

• SUS Score of 80 
• AI First-click accuracy of 85%

About Project

The goal is to deliver a drag-and-drop sampler that fuses stem separation, key/BPM detect, filters, and an adaptive AI Chops slicer into one panel. Loops become playable pads in seconds, eliminating multi-plugin detours and keeping producers locked in creative flow inside their DAW..

Problem 

Samplers are a necessity to audio production and have a large user base. However, current solutions do not have AI integration and force users to juggle multiple plugins leading to workflow fragmentation, redundant audio rendering, and creative block.

Solution

Design a single, intuitive sampler interface that lets producers drag-and-drop any audio and slice, pitch-shift, filter, separate stems, detect Key/BPM, export playable chops and generate AI chops within seconds without leaving their creative flow.

If you always do what you’ve always done, you’ll always get what you’ve always got.

- Helmut Schmidt

/02 Design Process

Design Process Timeline 2.png

Research

Define

Ideate

Prototype

Testing

Research & Analysis

Competitive Scan
Stages
Serato Sample
Ableton Simpler
XLN XO
Strengths

  • AI stem separation

  • Key & BPM detect

  • Integrated in all Live tiers

  • Intuitive UI

  • Cloud loop library

Weak Spots

  • No piano-roll

  • Manual key entry

  • No stem separation

  • No pad triggers

  • No user stems

Opportunity Gap

  • Provides built in MIDI editor

  • Add seamless AI chops

  • Offer playable pads

Define

Persona
User Profile Chris 2.png

Chris Love

Age

Location

Profession

​

27

Atlanta, GA

Retail Associate

About

Self taught beat maker who releases lo-fi and trap instrumentals under the alias “Love Beats.” Chris works a retail day job, produces at night, and drops one new track onhis beat store every Sunday to keep his follower streak alive.

Personality

Curiosity

★★★★☆ — always grabbing new VST trials

Patience

★★☆☆☆ — workflow stalls kill inspiration

Tech Savvy

★★★★☆ — comfortable mapping MIDI & macros

Visual Learner

★★★★★ — quick to grasp GUI cues & colors

Goals

  • Instant Inspiration – drag a loop, hear playable chops fast.

  • Unified Workflow – tweak pitch, ADSR, and filters without opening extra plug-ins.

  • Consistent Sundays – finish a complete beat every week without late night tech hurdles.

Frustrations

  • Must bounce to external EQ/Filter plug-ins, breaking flow and adding latency.

  • Limited Pad Feedback. Wants velocity-colored pads; flat grids feel “dead.”

  • No Piano-Roll Inside. Has to open a MIDI track to fix off-beat chops, adding extra windows.

Empathy Map

Says

“Can I just drag a loop and play? I don’t want to read a manual.”

“Too many buttons up top. I only need slices and pitch.”

"I hope it won’t crash my DAW."

"Is the AI chop really better than Serato Sample?"

Thinks

"If the pads don’t light, I’ll assume it’s broken."

"Relieved once a pad finally triggers audio."

"Quickly turns frustrated/overwhelmed when no clear next step appears."

Feels

“It looks powerful, but I’m not sure where to start.”

"Curious at first launch."

"Drops a loop, then hesitates, searching the screen for a “Slice / Chop” call-to-action."

Opens the waveform, zooms, but abandons when handles feel tiny.

Clicks random knobs to see visual feedback.

Does

Consumer Journey Map
Stage

Producer's Goal

Key Touchpoints

Emotions

Pain Points

Applied Opportunities

Discover & Install

  • Compare sampler options

  • DAW plugin manager

  • Curious

  • "Too many features. Will this be slow?"

  • Landing page shows <15s chop workflow

First Launch

  • Understand UI at a glance

  • In-plugin tips layer (toggleable)

  • Cautiously optimistic

  • Overwhelm from 5 mode buttons

  • Need tool tips

Drap & Drop Sample

  • Hear loop play back

  • See slices in the waveform header

  • Engaged

  • Unsure if Key/BPM detected correctly

  • Key/BPM chip appears with ✔️ when detection locks

Auto-Slice with AI Chops

  • Get instant playable pads

  • AI button                          (3 complexity levels)

  • Excited

  • Progress unkown on slow laptops

  • Circular progress ring around AI icon; pads grey out until ready

Manual Refinement

  • Re-align pads, adjust ADSR

  • Pad editor drag handles in waveform

  • Focused

  • Small handles hard to grab on Hi-DPI

  • Zoom wheel support

Sound Design

  • Filter, pitch, reverse

  • Filter quick pick list

  • Creative flow

  • Can't hear tweaks in context

  • Live loop audition button 

Stem Separation

  • Isolate drums / vocals

  • Stems mode toggle

  • Hopeful

  • Wait time too long on files

  • Real time FFT Preview   progress % bar

Multitrack
Tweaks

  • Solo/mute stems,  level mix

  • Mute/solo buttons, gain knob

  • Empowered

  • Lane Labeled too small in dark rooms

  • Stem color LED per lane

Multitrack
Tweaks
Export / Save Preset

  • Commit chops and save for later

  • Drag pad to DAW   track

  • Satisfied

  • Forgot where files saved

  • Export dialog box

Pain Point

Unclear first action  (“Where’s the slice button?”)

Visual overload from header icons

Unclear first action (“Where’s the slice button?”)

Opportunity

Add a single, high-contrast “Auto-Slice Now” CTA that appears after drag-and-drop.

Collapse secondary tools behind a settings cog; surface only transport + slice modes.

Expand hit-areas by 1.5× and show hover outlines to reinforce click-targets.

Sharpnel.png
Robotic Jade Tree.png

Key Pain Points Identified

Sharpnel.png

Information Architecture

Each branch shows the first-level tools available in that view, highlighting how users can dive deep (AI chops, lane FX, piano-roll edits, etc.) without ever leaving the single-screen workflow.

Untitled (1).png

Ideate

Wireframe mockup.JPG

Wireframes

Instagram post - 3.png
Instagram post - 1.png
Instagram post - 2.png
Instagram post - 4.png

Edit 

Instagram post - 5.png
Instagram post - 7.png
Instagram post - 6.png
Instagram post - 5.png
Instagram post - 8.png

Stems

Instagram post - 11.png
Instagram post - 9.png
Instagram post - 12.png
Instagram post - 10.png

Pitch Shifter

Inter

ABCDEFGHIJKLMN
OPQRSTUVWXYZ

abcdefghijklm
nopqrstuvwxyz

0123456789 &→!

Aa

Light

Regular

Medium

#302F2F
#AFA1A1
#098D41
#BEA8FD
#00A6FF
#FF3659

/03 Final Interface & Key Features

FL Wrapper Large fade2.png
Sampler VST GUI Spaced.png

Feature 1: Cut Samples (Primary Chopping Panel)

Producers can drag-and-drop any loop and instantly generate playable slices.
The dedicated “Smart Chop” button analyzes the waveform and proposes slice variations at three complexity levels — allowing users to move from idea to rhythm in seconds without menu-diving or setup friction.​

​

Key Improvements Solved:

  • Reduces hesitation during first use

  • Eliminates hunting for slice controls

  • Keeps workflow inside one screen

Feature 2: Edit Stems (Multitrack Layer Control)

Instead of sending loops to a separate stem-separation plugin, users can isolate vocals, drums, bass, or melodic layers directly in the sampler. Each lane has color-coded gain, solo/mute, and filter options — minimizing DAW window clutter and preserving creative flow.​

​

Key Improvements Solved:

  • Removes dependency on multiple third-party tools

  • Lets users refine mixes on the fly

  • Reduces workflow breaks that kill inspiration

Sampler VST GUI Stems Spaced.png
Sampler VST GUI Pitch Spaced.png

Feature 3: Pitch Shifter & Musical Transform 

Producers can shift key and pitch harmonically without leaving the interface. The pitch panel includes chord selection assistance and scale-safe adjustments, making sample flipping feel intentional rather than random.

​

Key Improvements Solved:

  • Supports fast melodic experimentation

  • Helps users stay in tune without external theory tools

  • Encourages variation & exploration during early ideation

Cut Samples

Sampler VST GUI Spaced.png

Add paragraph text. Click “Edit Text” to update the font, size 

Edit Stems

Sampler VST GUI Stems Spaced.png

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

Pitch Shifter

Sampler VST GUI Spaced.png

Add paragraph text. Click “Edit Text” to update the font, size 

Studio desk_edited.jpg
Robotic Jade Tree.png
Sampler 3D.png

Cutting Jade

Slice, pitch-shift, filter, separate stems, detect Key/BPM, and export playable chops within seconds without leaving their creative flow.

/04 Outcome & Validation

Task

Create playable chops from a loop

​

Separate stems for creative remixing

​

Adjust pitch & feel musically

Time Before

~35 seconds

​

Required external plugin

​

Required multiple windows

Time After

< 10 seconds

​

Built into workflow

​

1-panel control

What I Learned

This project strengthened my ability to:

  • Design for creative flow and minimal cognitive friction

  • Translate emotion-driven workflows (music-making) into efficient UI pathways

  • Balance visual personality with functional clarity

  • ​

Next Iteration Opportunity:

  • Introduce pad-lighting animations for velocity and energy feedback.

Success Metrics

  • SUS Score: 80

  • AI First-Click Accuracy: 85%

  • Zero Drop-Off During user testing

Qualitative Feedback 

“I didn’t have to stop my idea to set anything up.”
“Feels like everything I need is already here.”
“The AI chops are actually musical and not random.”

Conclusion

This case study reinforced the importance of designing for feel, not just function — especially in music-making. I look forward to refining tactile feedback and performance-driven features that make the instrument feel even more alive.

3D Sampler Promo Landscape.png

Rock Solid

Cemented in efficiency

/04 Empathy Map

Add paragraph text. Click “Edit Text” to update the font, size 

Add paragraph text. Click “Edit Text” to update the font, size 

Add paragraph text. Click “Edit Text” to update the font, size 

Add paragraph text. Click “Edit Text” to update the font, size 

Add paragraph text. Click “Edit Text” to update the font, size 

Add paragraph text. Click “Edit Text” to update the font, size 

Add paragraph text. Click “Edit Text” to update the font, size 

Add paragraph text. Click “Edit Text” to update the font, size 

Add paragraph text. Click “Edit Text” to update the font, size 

Add paragraph text. Click “Edit Text” to update the font, size 

Add paragraph text. Click “Edit Text” to update the font, size 

Add paragraph text. Click “Edit Text” to update the font, size 

Add paragraph text. Click “Edit Text” to update the font, size 

bottom of page