Andrew Shiau

PowerPoint Pen Toolbox

Type
Prototype study
Role
UX prototyper — prototyping, usability testing, A/B testing, UX design.
Tools
Framer Classic, JavaScript, Sketch.

Redesigning the Pen Toolbox in PowerPoint’s Draw tab through 20-plus working prototypes. The last test proved the team’s favourite design wrong.

The final redesign proposal.

The problem

Millions of people use the Draw tab to get an idea onto a slide with a pen, and its tools didn’t behave the way they expected. A usability study of the shipped tab — eight users recreating two diagrams, sorted by affinity diagramming into six themes — produced 52 recommendations.

I joined after that study and spent 13 weeks on it: I built candidate toolboxes from its findings, tested them across 20-plus working prototypes, and handed engineering a prototype to build from.

What changed

Remove “add pen”
People ink with one tool over and over, so the add-pen button mostly added clutter. We gave one of each tool and moved “add” to a long-press for the users who wanted more.
Eraser = a pen
Users reached for the eraser the way they reached for a pen, so we moved it into the toolbox and gave it its own width and type dropdown.
Dropdown refresh
The ink preview and width slider now show the real width and colour, “colours” and “effects” merged into one panel, and the recently-used-colours algorithm was retuned.
“If we didn’t prototype, we’d have shipped one of the first three models as the spec.”— Adam Riddle, UX Design.

Why a functional prototype

I built each design as a working prototype in Framer Classic: a real toolbox over an HTML canvas you could draw on, with an ink drawer I wrote that listens for mouse-move and lays down SVG. That let us test a prototype the same way we’d test the shipped product, by handing someone a drawing task.

The prototype in use. You draw on it with a real pen.
An arrow marks which colours can be modified — a fix testing found.
A colour that jumped between slots got an enlarge animation.
Long-press adds a pen — the power-user path that replaced the button.

The three we built

The team wanted colour and thickness at the top level of the UI and was confident about it. So we built three ways to pick a colour rather than argue about them. Two of the three mattered: a ribbon that put the swatches in the top-level toolbox, and a plain dropdown. Each candidate went in front of users, and what tripped them got fixed — four of those fixes are in the clips above.

The ribbon was the favourite for most of the project. It cost the most engineering, so it was the one that had to be right, which is why it’s the one we tested against a control instead of shipping on confidence.

Outcome

We A/B-tested the ribbon against the plain dropdown, holding everything else constant. The ribbon lost: its benefit was too small to pay for the engineering, and the plain dropdown shipped. The final proposal took the add-pen button out and moved the eraser into the toolbox as one more pen, so the toolbox holds one of each tool.

We had been confident about that ribbon for most of the project and we were wrong. We found out because the prototype was real enough to hand someone a drawing task.