Creating a full Mobile Web experience

Goals

the proposition

Mobile Web

Back in 2019 Photobox decided that they wanted to become a market leader in the personalised gift creation space. They identified a key opportunity to expand their offering to include a mobile web application. Working with a small team of designers, we worked closely with a variety of stakeholders to develop a Value Proposition, Product Vision, Mission & Strategy to implement this. Designs were then taken in to early prototyping and low fidelity mockups. Backed up by customer data and insights through user testing, this work resulted in investment from Photobox to put together a team of design and engineering resources to build out the mobile product. The work was conducted in 6 one week design sprints. 

 

MVP of the web experience was built in 2019, we decided it was time to optimise the mobile creation experience and give re-design the experience.

  • KR1.To enable all 16 books to be created via mobile web

  • KR2. Achieve an uplift in conversion on mobile devices to 12%

My Role

My role on the team included working closely Lead Designer (Cerven Cotter), Scrum master, and 4 software engineers to help shape and define the final output. This included wire frames, low fidelity mock ups, writing scripts for user testing, moderated testing and the final UI.

2020 Optimisation

DEFINING THE CUSTOMER NEED

Understand

When thinking about a mobile web platform, we had to think about the types of customers who would be interested in using this proposition. Therefore we needed to identify the following:

  • Market competitors & their offering

  • Customer Segments

  • User Research

  • Business initiatives & concerns

Therefore as a team we decided to do an in-depth analysis of all the competitors in that market space, define the journey end to end and begin identifying user personas and research methodologies to fit. We hypothesised that the main age group of users interested in a mobile web app would be 18-35 year olds. It was decided that this younger demographic would be referred to as the "Developer Market" and would be our core focus for the mobile proposition.

DEveloper market

  • Moving out from home

  • Establishing more friendship groups and entering more serious relationships

  • Starting to make progress in their career

  • Creating products is associated with meaning, creativity and personality

  • Look for innovation, high-quality products, sophistication and being stylish

behaviours

  • Prefer buying products handmade with a personal touch

  • Express their identity through photo products

  • Make simple and quick personalised photo products on mobile

  • Photos related to Travel/Adventure, Personal Milestones and Celebrations

  • Prefer purchasing a personalised photo product easily and fast

  • Create simple products on mobile

MY discovery process

STRATEDY

  • Stakeholder discussions

  • Project Goals planning with PM & EM

  • Brand Strategy

  • Measure of Success

  • Project Priorities

Discovery

  • User Interviews

  • Surveys

  • User Testing

  • Competitor Research

  • Analytics Review

analysis

  • Use Cases

  • Persona Creation

  • Story Boards

  • Red Routes / Critical Design Paths

  • Experience Maps

  • Workflow Diagram

design & test

  • Mood Boards

  • Flow Diagrams

  • Wireframing

  • Low Fidelity Concepts & Prototypes

  • High Fidelity Concepts & Prototypes

  • Testing / User Testing

production

  • Internal Launch and Testing

  • Beta Launch

  • User Testing

  • Launch

  • Live Testing (A/B Testing) Tweaks and Improvements

  • New Features

Journey map

Before creating any designs, I decided to create a User experience map based on the journey from our existing editor designs for the desktop experience. 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 both the desktop and introduce in the mobile 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

Initial wireframes - mobile

LOW FI Mock ups

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.

Final designs

Books Creation

Books was quite an interesting challenge for us to get right on mobile. Books offer quite a complex journey as there are multiple entry points to the creation as well as multiple different journeys a user might take to complete their book. However we feel we provided a great MVP product, which we are now iterating on to be the best in class personalised product provider.

Screenshot 2021-02-19 at 13.44.48.png
Screenshot 2021-02-19 at 13.45.10.png
Screenshot 2021-02-19 at 13.45.40.png

Calendars Creation

In October 2020 we released calendars on mobile web. This was a huge success with 47% of all users, creating their calendars on mobile. This was an amaing achivement that not only did we release a new product but we also made it simple to create these products on the go on mobile phones.

Screenshot 2021-02-19 at 13.46.58.png
Screenshot 2021-02-19 at 13.47.41.png
Screenshot 2021-02-19 at 13.46.34.png

Improving desktop

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. See Photobox Optimisation project for more detail.

Wireframes

DESKTOP iteration

High fidelity Mock ups

My account - Pink highlights all pages v
My account - spread@2x.jpg

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.