PHOTOBOX

Website - www.photobox.co.uk

Role - Product Designer

2020 was an interesting year for all of us, with some big changes for how we work and socialise. It also had an impact on Photobox as a business with the removal of Adobe Flash Player. This was a huge impact to our customers who have been loyal to our creation studio for the last 10 years. The removal of Flash brought on an interesting challenge for us as a team. To create a new editor to replace the long standing Flash legacy.

 

We needed to create a new creation space with little disruption to our customer base as possible, as well as be scalable across all 8 locales. Which everyone knows is almost an impossible task. However through 2020 my team have done an amazing job delivering a new editor, increasing our rendering ability by 10x, become super customer focused, this has resulted in +33% AoV, -50% creation time and +5.5pp better conversion.

2019 -Where we started

An illustration I did for the Photobox Blog

We started this project back in 2019. I was brought on board to solely focus on the mobile aspect of the designs and help Photobox become more mobile leading. I joined as the 3rd Product Designer, and my team comprised of 1x  UX Lead, 2x Product Designers, 1x PM, and 12x Engineers. Working with researchers to interview existing customers to find out what they want from an editor, with my focus being what did customers want from a mobile experience. The most common feedback was they wanted a studio that was simple, easy and quick to use. 

2020 -Where we Finished

In 2020, lots of changes came about. Our team was re-arranged, sadly one of the designers left, another was moved to another team, so from February 2020, I become the sole designer and design lead for the Editor team. I was still working with my PM and the team of 12 engineers. We decided that the editor needed a bit of work to become more of an editor customers would like. 

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

Initial wireframes - mobile

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

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.