Mobile web stationery editor designs

Papier Stationery Editor

Challenge

The product customization that happens in the editor is the magic moment when a user develops a personal relationship with the product. During my time at Papier, the editor has gone through rounds of iteration.

Recent user testing revealed pain points, particularly around touch interactions (Papier.com is fully responsive, with 75% of traffic on mobile). I knew this was impacting our conversion rate. In response I recently decided to redesign the UX and work around what we found to be insurmountable mobile browser constraints.

The challenge was to design a solution that balanced:

UX

While the editor has an end goal (adding the product to the cart), it's also a space where the user can be creative. I developed a number of approaches with the goal of introducing the design tools without overwhelming the users. My solution was to have the UI appear progressively, and only when needed.

One major challenge on mobile screens was to display text editing UI on screen while not obscuring the text itself.

Table illustrating some differences between customer groups

Papier attracts people of all ages and technical proficiency. It was important that the editing experience was engaging and intuitive. The combination of an uncluttered screen and some subtle animation would guide users to begin their product customization - that was the plan anyway. To test this assumption I built a high-fidelity prototype and trialed the interactions with a handful of customers and collegues, tweaking the design in response to feedback.

Design

The exact UI a customer sees depends on the type of stationery product being customized. Simple products, such as a printed photo, have just one interaction while a more complex product like a wall calendar supports editable elements across 13 printed pages, with text styling and layout options.

The editor had to support all levels of complexity. The various modular blocks required a consistent, intuitive visual design language, and the page layout had to feel balanced regardless of which combination of tools were available.

Mobile web stationery editor designs Desktop web stationery editor component designs Stationery editor component designs