Forge: Business Card Design Experience at Vistaprint
Forge was challenged with the task of finding a way to seamlessly introduce a host of new upgrade options to our flagship product line - business cards. We'd been hearing from customers that the current experience was "cumbersome" and "painful". Partnering with a core team of business card hard-hitters, we addressed the hopes and fears of the group, developed a solid HMW and set course with prototypes crafted to dig deep into user thinking around, and consideration for, business card options - how and when to encounter them in the flow.
Role(s): Creative Direction, UI/UX Design, Research, User Testing Moderation (online and in-person)
— Project Hypothesis —
How might we create a site experience that empowers all business owners to arrive at a card they'll love?
User Stories
1. As a premium customer who believes that VP only sells cheap business cards, I want to be able to quickly understand if your offering meets my needs so that I don’t waste my time exploring the site only to find out you don’t have what I need
2. As a customer exploring business card options I want to understand and see the difference between the various business card options that are available and know why I would choose one over the other so that I can make an informed decision and get the product that is right for my needs
3. As a customer looking for a basic business card I want to quickly understand the base product available to me so that I can quickly check out and get back to my small business
4. As a customer with a specific design or style in mind, I want to get right into gallery to make sure you have my design and then I want to make decisions on product options so I can pick the options that work well with my design
Sprint 01 – Understanding first impressions
With first impressions in mind, the team collaborated on variations for starting users on a path that would introduce options in different ways. This culminated in five unique category page concepts. Each of which would help us understand what impressions users had of both getting started with business cards and how and when they considered option upgrades.
Sprint 02 – Design first approach
Our second sprint focused on a design first flow to dig deeper into how users wanted to experiment with options once designing. One introduced an overlay gallery of options, a second on progressively disclosing options with real-time visualization, and a a third displayed options via a fly-out control panel.
Sprint 03 – Package structures
After a solid second sprint of testing options for design first flow, we pivoted to a sprint dedicated to packages. There were three key dimensions to our learning agenda:
• What features, options or uses cases make the most sense to differentiate in packages?
• What is the ideal way to display the packages to provide clarity and entice upgrades?
• What’s the next step after selecting a package (including various config options)?
In addition to our three main learning goals, we probed on package names and the idea of å la carte upgrades after selecting a predefined package.
Sprint 04 – Feature first
Our main objective with sprint 04 was to explore a user flow that began with a feature selection such as a specialty finish. It wasn’t clear if ‘feature first’ was needed as a core path or if the concept of ‘family pages’ and dedicated feature pages were truly value add. To help find out we developed a se of prototypes that would test a range of possibilities.
Our key takeaways noted that contextual previews were key for configuration, and so is the quality of renderings for finishes. This is the main reason the Visual GPP (Gallery Product Page) with contextual previews performed best. Additionally, the pure review step without configure options is critical for customer proofing.
Sprint 05 – Journey mapping
After testing ~20 prototypes over the last 6 weeks we felt ready to start synthesizing the learnings and beginning the IA work. These high level journey maps were necessary before painting th final layer of polish on our recommended UI/UX for the different business card flows.