Q-Photo website process redesign
This project was completed for my UCD course. The task was to identify a problematic user journey on a website of your choice. I chose Q-Photo's photographic printing service and it's problematic process. The process included choosing a type of print, in this case a framed print, choosing a frame and putting your own photos into it.
​
Redesigned home page for Q-Photo
One of the problems found in the process was the fact that the user had to choose a frame type and colour before they put their own photo in it. This was a problem as it is hard for users to visualize without seeing in real life, how their specific photo would look with a particular frame.
​
This was solved by allowing the user to change the type of frame in the customising stage instead and see it with their photograph.
​
It can be seen from the photo above that the frame type can be changed while the user can view their own photo in a print on a realistic looking mockup.
​
The other problem was that the preview mode in the old process was useless, it only took away the controls and tools, and showed the user's photo on a blank white background.
​
If users can visualise how something will look in real life before buying it, they are more likely to make better decisions and even to buy it. This was achieved in the new process through a series of different mockups displaying the users photo in a framed print. The highlight however is the AR visualising tool. This feature enables the user to scan a qr code on the website with their phone, and then follow the instructions on their phone to see their photo in a framed print on their own wall with their phone's camera!
This feature is successful in helping users see how their photo in their choice of frame will look on their own wall, before they decide to order it.
The concept of seeing the print on your own wall is illustrated above.
More pages of the design shown above
The redesigned home page for the Q-Photo website
The solution was achieved using the Design Thinking process, brainstorming, usability tests, wire frames, low-fidelity prototypes, high-fidelity prototypes and a/b tests.