Paperchase Plus

Role
Lead UX designer
URL
https://www.paperchase.com/en_gb/paperchase-plus
Paperchase Plus

What’s it all about?

Paperchase Plus is a brand new app for iOS/Android offering premium personalised products from Paperchase.

I was asked to join a small team of product specialists to create the app from scratch, leading the design effort from a user experience perspective. Our goal was to go from concept to v1.0 in the midst of a global pandemic with local lockdowns forcing the entire team to work remotely from their kitchens and spare bedrooms.

The ultimate aim of the project was to bring together a great digital experience with the quality and joy of Paperchase products that customers know and love. 

How we did it

Development began back in December 2019 when we started researching the various products already on the market, which included the likes of Moonpig, Papier, Touchnote, and Thortful. By studying and assessing the customer journeys for each of the existing products we were able to identify what aspects were done well, and where there were opportunities to improve the user experience - such as the onboarding experience and how customers personalise their products.

Competitor research - User journeys - Competitor research - User journeys
Competitor research - User journeys
Competitor research - Overview of user journeys - Competitor research - Overview of user journeys
Competitor research - Overview of user journeys

The competitor research phase was an important first step because it gave us a framework for what our own customer journey should look like and the pitfalls we should avoid. With the basic customer journey mapped-out, we were able to start defining the user flows for each step. This in turn led to the creation of wireframes for each screen that helped guide the UI design process.

Some of the user flows for v1.0 - Some of the user flows for v1.0
Some of the user flows for v1.0
Notebook options wireframes - Notebook options wireframes
Notebook options wireframes
Notebook options UI - Notebook options UI
Notebook options UI

While the design team were busy crafting the user experience, engineering were busy laying the foundations for the backend and core front-end functionality, as well as liaising with the print production team to ensure integration with the printer’s systems. Over the course of 5 months and 10,000 Zoom calls (well, maybe not that many) we designed, tested, redesigned, and tested again, until the first version of Paperchase Plus hit the App Store in August 2020.

Making it personal

One of the highlights of the app is the ability to personalise notebooks and greetings cards with your own message and styling. This was the most challenging feature to design and build as it required a lot of joined-up thinking, from defining the interactivity of the personalisation tools (as well as understanding the limitations), to ensuring the final printed product matched what customers saw on the screen.

During the research phase we identified what personalisation options would offer the most value to customers whilst being achievable from a print/production basis. These ideas were sketched out and translated to a user flow:

Greetings cards personalisation user flow - Greetings cards personalisation user flow
Greetings cards personalisation user flow

Throughout the design process we used simple prototypes to test all new features, including the personalisation editor (seen below). This helped us spot any potential usability issues prior to engineering.

Greetings cards personalisation editor prototype - Greetings cards personalisation editor prototype
Greetings cards personalisation editor prototype

One such issue that came up was the need to handle excessively long or unusually formatted messages in a way that didn’t restrict the customer’s freedom to express themselves creatively. This was eventually solved by the introduction of a line counter, dynamically resizing text, and prompts to explain when there’s a problem with the message. We also introduced custom palettes for each notebook to help users choose background/foreground colour combinations that always look good when printed.

Personalisation editor UI - Personalisation editor UI
Personalisation editor UI

Credits

Design Ben Stevens, Steve Simmonds, Alix Craig, Rona Marin Miller

Engineering Biljana Lukic, Momir Kostic, Nemanja Modic, Miroslav Boljanovic, Nemanja Vujovic, Dragan Nedeljkov, Spasoje Jesic

Product Derek Kenneally, Valeria Del Sordo, Kristina Ostojic, Joe Timson

Print production Steve Palmer