Vistaprint UX Challenge: Enable the user to make multiple editions of a business card
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.
Here is how I worked to simplify how you can make multiple editions of a 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.
The current webpage UX design works like this:
Design card #1
Approve the design, choose the quantity, choose a brilliant finish, choose paper stock, before landing in the shopping cart
Leaves the shopping cart and goe back to the list of completed projects
Make a copy of your first card
Click "edit" on the new project
Revert to step #1
The three main problems with this way of solving the task is as follows:
1) The task must be completed by using workarounds, i.e. there is no function for completing the task
2) Completing the task through this workaround is not intuitive, labor-intensive and takes a lot of time.
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
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.
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.
The video clip below demonstrates the new functionality on the website.
My design decreased user task completion time by 75% and greatly reduced customer effort.
Implementation of the new user experience design is pending (July 2017)