An up arrow icon. Click to return to the top of the page.

G

I’m on the look out for full-time positions

Stationery editor

Papier

The latest iteration of Papier’s web-based product customization tool

PROBLEM

Product customization conversion rates were underperforming on mobile.

SOLUTION

New intuitive editing tool UI, and clearer page hierarchy.

RESULTS

12% improvement in conversion rates on mobile devices.

MY ROLE

Product design, research, product management.

Introduction

In 2020 I led a redesign of the Papier stationery editor - the step in the buying process where the user gets to add their own text, image, and design flair to the stationery items.

Research

Our data showed conversion rates on mobile that were underperforming, with drop-off rates at the product personalization step identified as an area for improvement.

Qualitative research revealed confusion about how to progress, and technical issues with touch interactions around text selection. With 75% of traffic on mobile this was something we needed to address.

Approach

We decided the engineering team would rewrite the technology behind the editor, while I would work to improve the interactions.

I developed a bunch of ideas, starting on paper (in my Papier notebook of course), and moving quickly to prototyping in Figma and Framer. Below are three approaches to the editing tools UI that we considered:


We opted to move ahead with the third option, and test whether users were comfortable with the full list of options being hidden behind a menu.

Results

After releasing the updates we saw a 12% increase in mobile editor completion rates, and a decrease in the number of customer support tickets in relation to issues within the editor. The improvements led to additional revenue and time saved for our customer experience agents.

An unexpected finding

After the initial release, I launched a three-step how-to widget, explaining how to use the editor for first time users. I thought it was a no-brainer. It totally bombed.

This was a big failure, but an interesting lesson.


An A/B test showed a 15% decrease in editor step completions for users who were shown the how-to screen. Customers were confused - the animated illustration looked too much like the real UI. Some people were were trying to interact with it and, of course nothing was happening, so they were giving up entirely. Lesson learned. After going back to the drawing board, we ended up with a flashing hotspot that gently indicated the editable areas when loading a new screen.

The Wider Editor System

The stuff for mobile was just one part of a system that had to work across screen sizes and product types. The mobile designs prompted further UI improvements. That's a whole other story, but here’s a taste of some desktop elements: