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

INVISON PROTOTYPES

Invision is an important part of my process. Prototypes help validate hypothesis me and the design team make on why customers may not be enjoying part of the experience and which areas to improve. Prototypes are used on User Testing.com to let customers experience new designs we wish to implement. This may either be end to end or in the case of the video shown, a small feature of the process. 

The Hypothesis - 

Customers were not checking their creations, and proceeded to check out with blank pages and empty text boxes. Create a checkout checklist that will capture any missing items customers may have forgotten to check and and flag these up before committing to checkout, helping to reduce customer complaints to CS and drive AoV.

Observations:

  • Those who tested the prototype thought the feature was valuable, and would not like to checkout and "waste" money with items that had blank pages accidentally added.

  • 10/10 participants completed the task successfully 

  • Some users felt the checkout button could be clearer, were unsure of the icon used 

  • Liked the fact the bar collapsed so you could be taken straight to where the errors were.

System Usability Scale-

The designs passed with a B rating, and a passive SUS score. The next phase now the designs have been tested is to implement the changes as part of a 50/50 A/B test.

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. 

MY Team

I worked with two other designers, a Senior Product Manager, and a team of 12 engineers to help execute the new studio direction. 

Using the prioritization framework set by the PM, the engineering team was broken into different streams, with design overseeing the and signing off before feature release. 

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. By starting with a mobile experience it was easy to ensure that the designs could be scaled up for desktop.

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.