PHOTOBOX

Creating customer first moments

Overview

Earlier this year I joined the design team for the Photobox group. I joined the core editor team, creating the new editor for the Photobox site, in order to increase AoV and conversion. In September 2019, Photobox's new creation studio went live 100% of customer traffic and was successful in the first "peak" from release. This was great to see after all the hard work put in from ensuring we had a strong design & testing as well all the customer validation from user testing. Using a comprehensive customer insight strategy and A/B testing approach we were able to drive experience and revenue upside throughout the project. This has resulted in +33% AoV, -50% creation time and +5.5pp better conversion.

An illustration I did for the Photobox Blog

The live mobile site lets you create photobooks quickly and easily

Problem

Photobox, have a very loyal set of customers, who are experts when creating personalized products on the website, with many of our customers falling into the 6+ year cohort. Whilst we really value this cohort we identified an opportunity to increase our customer potential by 35% by providing a mobile experience. When looking at competitors such as Popsa, LaLaLabs and Snapfish, these companies are all heavily mobile-driven. Therefore we wanted to reach a younger audience and increase conversion by providing a mobile site. 

The Propositon

As well as identifying a new market opportunity, Photobox was faced with a bigger issue. Our current studio is supported by Adobe Flash, which discontinues in December 2020. Therefore in order to support our existing customers and reach a newer younger set of archetypes, we had a tricky challenge on our hands to create a new editor. The build of the new editor and early designs were well underway when I joined in 2019, but I became an essential part of the team, to help define the new editor. At the start of this year, we decided we wanted to optimize the new editor, creating an exciting opportunity to review the current designs and enhance the experience in order to improve AoV and conversion. 

Customer Experience map

Before creating any designs, I decided to create a User experience map based on the journey from our existing editor designs. I identified all the high-level interaction points such as Login, uploading images, creating their creation, and finally checkout. From these interaction points, I was able to identify any pain/gain points and any opportunities to improve for the new experience. To get to a granular level of understanding I the took this experience map and broke all the interaction points into micro journeys. This helped really shape the customer 

How might we workshop

Customer focus

In order to make better-informed decisions and prevent bias we decided it was important to test the designs from end to end. Working closely with the researcher we decided to get users to come to the office in Farringdon to come to test our designs. To ensure we got the most out of the testing and weren't leading we created a script. We started the script by getting them to imagine themselves in a scenario of making a book for a friend's birthday.  Then we created 4 main tasks for users to complete, to see how they responded to the set tasks. Each of these 4 tasks was marked against a SUS scale, to see whether users successfully completed the tasks. 

The tasks:

1. Add Photos to photo book 

2. Apply a layout

3. Customise book with illustrations or text

4. Preview their book

Evaluation of existing designs

Summary of Findings

We tested with 6 females varying in ages from 25 - 55. Females are the main demographic of our business so we felt keeping to female testers would give the most consistent results. We then watched each session and wrote down all the delight moments as well as their frustrations. Below are the pain points identified in the customer experience map:

  • The UI lacked inspiration was "boring", "so much Grey looks like a rainy day", also felt "masculine".

  • The Viewport of the book was too small

  • Applying text was confusing and difficult 

  • Lots of information appearing at one - "feels cluttered"

  • Would like more backgrounds and customization 

  • Applying images was quick and easy 

  • Low cognitive load even though they have not used the new site before. 

Prioritisation

Once we had collected all our findings from the customer research it was important to find a way to prioritise what ones to work on first. Working with my PM, we went through all the data insights from Usabilia to validate the pain points we had identified from the moderated testing. Once we had created a list, it was then time to dig into the nitty gritty. Looking at the UX and creating a service design for customers. 

Learnings

xx

Initial wireframes - Desktop

Initial wireframes - mobile

DESKTOP iteration

Once we started designing for mobile, it felt important to then really align both experiences together. Using what we had learnt from the testing conducted help make the desktop experience have better usability and usefulness. 

Iterating on existing desktop designs

The Final Product

September 2019, Photobox's new creation studio went live 100% of customer traffic and was successful in the first "peak" for from release. This was great to see after all the hard work put in from ensuring we had a strong design & testing as well all the customer validation from user testing. Using a comprehensive customer insight strategy and A/B testing approach we were able to drive experience and revenue upside throughout the project. This has resulted in +33% AoV, -50% creation time and +5.5pp better conversion.

©2016 mcameron Design.