Vistaprint UX

I did user experience work for Vistaprint, a leading global provider of mass print customization and small business marketing.
This project was my contribution to a company-wide contest in having the most innovative idea for any part of the business. I chose to improve three aspects of the usability of the Vistaprint website. 
The goal of this challenge was to make the tools offered on Vistaprint's website easier and more user-friendly, so that users can spend more of their time customizing their products and marketing themselves through Vistaprint.
Vistaprint offers customers the possibility to create and customize business materials such as business cards, flyers and mugs. 
Users can create products in an online editing tool where text and images can be placed on the product, then aligned, resized and adjusted.
I set out to solve three usability issues that currently exist on the webpage. I did so by researching the problem space, wireframing and prototyping a novel design, conducting user testing, before presenting my designs and my data.
I will here summarize one of these three challenges, namely my efforts to simplify how you can make multiple editions of a business card.
Vistaprint UX Challenge: Enable the user to make multiple editions of a business card
The most heavily profiled product offered by Vistaprint is business cards.
Users can design their own business cards online in the Vistaprint Design Studio. This can be done by inserting text and images, or uploading a ready-made design they may already have.
With this project I wanted to improve the way in which users can create multiple editions of one business card.
User and task description
Let's imagine George. 
George is an architect who just started working in a newly formed architect bureau. George wants to make a business card for himself and his three other colleagues.
First, George spends time working on his own card. It has his name, contact information, and company logo / design. 
When he is happy with the result, George wants to make three more copies of this card, changing only the contact information for each of his co-workers. In this way, all four employees will have the "same" card.
Current scenario
The current webpage UX design works like this:
Once George has designed his own card, he must go through several steps where the website offers different paper stock, quantity of cards, optional brilliant finishes, etc. When all choices have been made, George lands in the shopping cart. 
From here, George must get out of the shopping cart and back to his list of completed projects where his card design is saved. There, he must make a copy of his project. George must then click "edit" on that project.
George can then edit the first copy of his card, which will serve as a template for the first of three co-workers. 
George edits this card, and then repeats all the steps of paper stock, quantity, etc. 
This must be done for all the cards.
The three main problems with this way of solving the task is as follows:
1) As there is no real procedure for making multiple cards, there is no intuitive way to find out that this how this task can be solved.
2) Making multiple editions of a card is labor-intensive and takes a lot of time. The same steps have to be repeated for each card.
3) There is no easy way for the user to compare the designs / layouts of the various editions to ensure that all card-designs are streamlined.
Strategy and goals
The goal of this challenge was to make it easy and intuitive for a user to make multiple editions of one card.
I chose to implement this new functionality into the already existing studio. It made sense to build and test a prototype where the user can design all the cards, and choose all the steps for the cards in one go. 
The following flowchart laid the groundwork for the prototype I developed:
Wireframing, prototyping, design
Wireframing and prototyping was done with particular care to how the new functionality should be integrated into the existing interface. I was not aiming for a complete redesign, but rather an improvement of functionality.
This low-fidelity pencil-and-paper prototype helped me stake out the two most important design objectives to increase the site's usability:
1) Integrate a panel for multiple cards into the studio
2) Make it easy to create and delete copies of cards, as well as comparing them to each other.

Prototyping with Adobe XD

This is a high-fidelity prototype made with Adobe Xd. This interactive prototype was also used for user testing.
A "Make multiple cards" button is added in the top, and a panel of the different cards appears on the right.
User testing
I performed user testing with three individuals who had no prior knowledge of Vistaprint or its design studio. 
Through user testing, I was able to gain important feedback in regard to the user flow and interface design. 
Based on the feedback and data gained from user testing I made a final, high-fidelity prototype that was presented to the contest judges.
Result
The video clip below demonstrates the new functionality on the website. 
My design has made the web app:
1) More logical in the way that users can easily use one card as a template for others.
2) Easier to use, as users can design multiple cards next to each other. The design enables the user to design multiple cards simultaneously.
3) Further achieve the principles found in Vistaprint and its ideas of mass customization.

Implementation of the new user experience design is pending (May 2017)

You may also like

Love&Magic - Chill Out IV
2015
Love&Magic - JustChillOut
2016
Love&Magic - Fjordcruise 2016
2016
Love&Magic - Can You Tech More 2.5
2016
Musikkfest 2014 Aftermovie
2016
Desert Roots Crew
2016
Iniciatíva zahraničných študentov na podporu učiteľov
2016
Love&Magic - JustChillOut II
2016
Love&Magic - Just Chill Out IV
2015
Reentries Monk / Jam Tipi Rum Pyx
2017
Back to Top