uxwithmelissa
Mobile Web Editor
RE-PLATFORM
Back in 2019 Photobox decided that they wanted to become a market leader in the personalised gift 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.
Role & Scope
Responsibilities:
-
Leading research to identify customers pain points.
-
Driving mobile first thinking and supporting the business.
-
Developing Wireframes and final deliverables.
-
Working closely with cross functional team, Product Manager, Engineers, QA.
Hypothesis - We believe customers increasingly expect to create and personalise photo products seamlessly on mobile devices, rather than being constrained to desktop-only experiences.
💡 Project Problem
Problem Statement
Photobox historically relied on a desktop-based creation experience for designing personalised photo products. However, customer behaviour has shifted toward mobile-first usage, with the majority of photos now captured and stored on smartphones. This created friction in the creation journey, requiring users to switch devices or delay their purchase, increasing drop-off and limiting engagement.
Customer Problems
-
Customers want to be able upload theirs photos directly from their mobile phones.
-
Customers are moving away from traditional desktop devices therefore need to widen the platform offering.
-
Cross platform to start their creation on one device and be able to edit and amend when they have a moment.
Delivery
-
Enabled all products to be supported on mobile web.
-
Simplified UX across both platforms.
-
Shift in business thinking to mobile first.
Outcomes
-
Saw an uplift in conversion across mobile web by 2%.
-
Increase easy of use scores and customer satisfaction.
-
Increase in LTV of customers.
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.
Customer Segmentation
"The Developer market"
Who are they?
-
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
What are their key 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
Defining the Problem statement
To enable customers to create Photo first products, anywhere with out having a dependancy on a desktop device. To support easy photo upload service.
Discovery
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.
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" Statements
-
How might we enable customers to seamlessly create fully personalised photo products on mobile web without needing to switch to desktop?
-
How might we make uploading photos from a user’s phone fast, intuitive, and frictionless?
-
How might we design editing tools that feel powerful yet simple within the constraints of a small screen?
-
How might we reduce cognitive load during the creation process while still allowing meaningful customisation?
-
How might we help customers quickly turn their camera roll moments into tangible products with minimal effort?
-
How might we build trust and confidence in the mobile creation flow so users feel comfortable completing purchase on their phone?
-
How might we optimise performance and load times to prevent drop-off during high-intent creation moments?
-
How might we create a consistent cross-device experience that allows users to start and complete projects seamlessly?
DELIVERY
📱Experience Design
Key Journeys
Starting with our core Product - Photobooks, I mapped out the full end to end of how our creation studio might function
-
Photo upload
-
Manual or Ai powered photo import - Ai uses date/time stamp to put the photos in a chronological order
-
Page curation e.g layouts, text boxes
-
Personalisation, stickers, frames, colour fonts
-
Preview of book in situ
The wireframes were integral for white boarding discussions, timeline planning and roll out plan.
Wireframe review
What are we optimising for?
Reduced friction in photo upload and editing
Given that most photos live on users’ phones, we optimised for:
-
Fast, reliable upload from camera roll
-
Minimal steps to start creating
-
Low cognitive load in the editing flow
Speed to first meaningful progress
We prioritised getting users from landing to “I’ve started my product” as quickly as possible. Early momentum is critical in creative tools.
What did we not do?
Just replicate the desktop editor
-
Not just replicating desktop. Porting desktop functionality 1:1 would have created a cluttered, unusable mobile experience. Instead, we re-prioritised features based on mobile user intent
-
Advanced layout manipulation and deep customisation features were deprioritised in early iterations. The focus was mainstream customer needs and conversion uplift.
-
We avoided tutorial-heavy onboarding or feature-dense entry points. Instead, we relied on intuitive UI patterns and contextual guidance.
-
We didn’t treat mobile as a “companion” experience. The goal wasn’t to support mobile as a stepping stone to desktop — it was to make it a fully viable, standalone creation environment.
How did research inform my decisions?
-
Customers were frustrated by having to email photos to themselves to use desktop.
-
Many wanted to create in “micro-moments” (on the sofa, commuting).
-
Tool overload on small screens caused hesitation and abandonment.
-
These insights directly influenced:
-
A simplified, step-based creation flow
-
Prominent camera roll integration
-
A bottom-sheet editing pattern to preserve canvas space.
Prototype testing
Wireframe testing helped refine:
-
Thumb-reach zonesTool prioritisation
-
Visibility of progress indicators
-
We iterated on interaction patterns before moving to high-fidelity design.
Low Fi Mock ups
Moderated Research
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
Invision 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.
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.
Desktop Optimisation
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
High fidelity Mock ups
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.
