Powerpoint Pen Toolbox

Redesigning PowerPoint's Pen Toolbox for the Draw tab through rapid, functional prototyping — where testing the prototype refuted the team's own first design.

Role

UX prototyper — prototyping, usability testing, A/B testing, UX design.

Tools

Framer Classic · JavaScript · Sketch.

Span

13 weeks · 20+ prototype iterations · with a UX designer and PM.

The problem

The Draw tab is how millions of people get an idea onto a slide with a pen — but its design confused users, and the tools didn't behave the way people expected. A usability study of the live tab (8 users recreating two diagrams, analyzed by affinity diagramming into six themes) produced 52 recommendations.

I joined after that study and prototyped candidates for a new toolbox from its findings, tested them, and delivered a polished working prototype to hand the final design to engineering.

What changed

Remove "add pen"

Users ink with the same tool repeatedly, so the add-pen button mostly added complexity. We gave one of each tool and moved "add" to a long-press for power users.

Eraser = a pen

Users expected the eraser to work like a pen, so we moved it into the toolbox with its own width/type dropdown.

Dropdown refresh

The ink preview and width slider now show real width and color; "colors" and "effects" merged; the recently-used-colors algorithm was retuned.

"If we didn't prototype, we'd have shipped one of the first three models as the spec." — the UX designer on the team. The whole case study is that sentence.

Why a functional prototype

I built each design as a fully functional prototype in Framer Classic — a working toolbox on top of a real HTML/CSS/JS canvas you could actually draw on (I wrote an ink drawer that listens for mouse-move and lays down SVG). That mattered because we could test the prototype exactly like the live product: give a user a real drawing task.

The team was confident about bringing color and thickness to the top level of the UI. We built three ways to select a color, tested them with users, and iterated on every misfit — an unset sixth color got a rainbow cue, a color that jumped between slots got an enlarge animation, modifiable colors got an arrow. Then we A/B-tested the favorite ribbon design against the plain dropdown, holding everything else constant.

The result contradicted the team's hypothesis: the ribbon's benefit was too marginal to justify the engineering. Twenty-plus iterations got us to the right design precisely because the data overturned where we started. You only learn that by putting a working prototype in front of real users.