I’m on the look out for full-time positions
The latest iteration of Papier’s web-based product customization tool
Product customization conversion rates were underperforming on mobile.
New intuitive editing tool UI, and clearer page hierarchy.
12% improvement in conversion rates on mobile devices.
Product design, research, product management.
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.
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.
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.
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.
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.
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 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: