Photobox :
Mobile App
Overall
Photobox realised that the mobile Apps, built by multiple external agencies, needed to be fixed. The companies that had built them had followed the instructions of various product managers for features to be added, and the result was a buggy, inconsistent interface and an exploded code base, making the app slow to download and use.
I joined and was put in charge of the UX and UI for the native experience across all mobile devices.
The existing app had been developed by multiple agencies as well as patched by internal needs, leading to a partly broken experience.
The green area represented the focus of the Photobox experience. This diagram showed where other possibilities lay.
Different user scenario maps were used to show different dimensions.
We used archetypal user scenarios in order to inform the service design.
Real user quotes were used to sum up the key scenarios.
We explored how Photobox could better work with other apps.
The work was a blend of User Research and Usability Testing
Each session used a standard five users.
The findings document focused upon the key screens for the checkout.
A simple system of pass, uncertain and fail was used for clarity.
This approach quickly allowed us to see where improvements were needed.
And just for good measure we asked users to rate the experience.
Mapping out the existing experience and service.
My first task was to map out what was there, identifying the inconsistencies and issues across the app. Some were very obvious.
I then ran a series of usability testing sessions and folded in generative user research to fill in the gaps with Photoboxs existing user knowledge. Photobox had a series of assumptions, like most users backed up their photos from their camera to their PC, and the journey started with the need to make something for a birthday, etc.
The usability testing highlighted how bad the existing app was, and the user research told us how out of touch our assumptions were! It was clear that there were two streams of work here
We reviewed and all the flows of the existing experience, identifying where customers were having issues and created a new flow based upon what we learnt.
Flows and sitemaps are vital to the creation of any project and if there is no ‘as is’ flow/map I always create one.
This board shows a matrix of item studios and funcationality complete with sketches for solution.
Creating a structure for the Photobox home page
Tactical and Strategic workflows
As a lead UX designer, I had to ensure that the agreed-upon product roadmap was delivered agilely while helping us better understand our customers.
Tactical work first.
The experience was divided into five main areas: discovery (front page/product pages), studios (upload, editing mugs/books/prints, etc.), photo upload and management, checkout, and the user account section.
We had obvious things we could do to improve the app. Working with the UI designer, we first unified the navigation/icons, etc., across the app and essentially did some tidy-up work. We had many quick wins to keep the development team fed with the UI designer enough to start building towards a grander vision.
We also improved loading for the front page and updated its design.
The checkouts (there were three used in the apps) and account sections were earmarked as separate Photobox projects. I later moved on to the checkout as a priority.
Meanwhile, I mapped out each of the studios on the app and looked at what each did and the main actions. I looked at how each of the studios carried out the same tasks, how different objects required specialist treatments, and where the commonalities were.
This was mapped out on a board, and I used team members and fellow designers to brainstorm new ways to solve each interaction, such as moving between photos, cropping images, and previewing a book or mug.
I work through the UX of the most challenging items, books, prints, calendars and mugs, in sketches, then to sketches and then onto prototypes.
We needed our first candidate from our new approach, so we chose Retro Prints, a new category that was doing well.
Working with a UI designer, I took various ideas and implemented them in several prototyping tools, adding transitions and animation and making the interface more fun and tactile.
You can see this in this video grab of the prototype. This is 90% of my work, with a few visuals improved by the UI designer.
We iterated on this but only some things I had envisioned could be fitted within the technical time available!
These are screens from a high fidelity prototype close to production (take from an old file so some misalignment) As we were selling physic objects a Skeuomorphic interface sat along side standard flat design to separate real objects from interface.
These are screens from a high fidelity prototype close to production (take from an old file so some misalignment) As we were selling physic objects a Skeuomorphic interface sat along side standard flat design to seperate real objects from interface.
I use paper and whiteboards a lot to quickly work through ideas by myself and with others.
Creating a structure for the Photobox home page
Going Live
The Retro Print studio went live after many discussions with the developer team. Several members were not on board with the UI approach and wanted it to adhere more closely to the native UI guidelines.
After UI testing and an excellent reception from stakeholders (with some shared disappointment, we had to make things a bit less fun), we went live and saw a 5-10% instant improvement in Retro Print sales.
I then handed the reigns for the Mobile design to another designer because of the issues I had uncovered with the Checkout - beyond mobile.
Meanwhile, Photobox and service design
In each round of usability testing, we did on the existing and new experience design work, we also learned more about the user. Across Photobox, all usability testing different teams were doing now started with a set of standard questions to understand the user. So we’d had desktop users and mobile users. We were learning a lot.
As my degree included what is now known as Service Design, I started to map out the journeys our users were taking beyond the flow of our site/app. I have used a tube map approach to how users interact with services since borrowing it from someone in 2000. For Photobox, things turned out surprisingly simple, quickly showing how limited our existing vision had been.
For example, Photobox was separated from taking a photo and then how that photo was kept on a phone and organised before someone thought about an event and then tried to find the right photos to put in a book.
This work was fed into the leadership team, and during one productive Hackathon, one of the developers had an idea for an instant photo app. This completely solved that initial problem and made things fun!
Ultimately, I was instrumental in making the company more aware of how its users’ behaviour had shifted. I also discovered some important tactical things to fix, which led to more work.
What I learnt
Balancing tactical and strategic work is always tricky.
Usability testing and generative user research can be done at the same time.
Strategy work can and will take on a life if it’s clear enough.
Fun is great but hard to implement.
Developers need good reasons to move beyond the native design patterns (e.g. Google Material)
Design Portfolio V6.1
Created using Framer