Vistaprint Masks

At the start of 2020, no one could have predicted face masks would be the hottest new product. Or that the top pick for masks wouldn’t be from a popular apparel brand, but from Vistaprint, a company known for printing and signage for small businesses.

- Work & Co Team

Can you describe your project and the concept behind it?

At the start of 2020, no one could have predicted face masks would be the hottest new product. Or that the top pick for masks wouldn’t be from a popular apparel brand, but from Vistaprint, a company known for printing and signage for small businesses. Early on in the pandemic, Vistaprint pivoted operations to help keep communities safe, enlisting Work & Co to design and develop an e-commerce experience to sell high-quality masks.

Tell us about your initial moodboard, wireframe, or prototype. How did things change throughout the process?

Because of the pace of our work, having an early proof of concept was key to validating design and architecture decisions. We launched into high-fidelity designs and functional prototypes very quickly. In days we had a simple skeleton of the product coded, depicting what the key flow would look like.

What influenced your chosen technical approach, and how did it go beyond past methods?

Speed to market was critical. We needed to move quickly while also learning to work 100% remotely. Our strategy, design and engineering teams collaborated daily with Vistaprint's C-suite using real-time tools like Figma, Slack, and Dropbox. It was digital product creation in its most iterative form, resulting in a global e-commerce platform built — from concept to launch — in a couple weeks.

When did you experience a breakthrough or an "a-ha" moment during this project?

We knew we needed to simplify the process of finding and buying masks. We also wanted to drive adoption by helping people be proud of wearing one — essentially, we wanted to reframe the experience of masks. The safety of families and communities depended on it. Vistaprint forged great artist collaborations for the masks, and fortunately, the customization Vistaprint’s known for means people can create a design that expresses their personality.

What web technologies, tools, and resources did you use to develop this?

The site’s architecture leverages a microservices, API-first, cloud-native, and headless approach. Using React and Gatsby accelerated our delivery of a highly-interactive and performant front end, and Vistaprint’s sophisticated services ecosystem made it possible to set up a new line of business in just a matter of weeks.

How did you balance your own creative ideas and technical capabilities with a fair representation of the client’s brand?

Effective digital product development requires establishing a focused set of KPIs. First and foremost we had to build a fast experience that gives people access to face masks they’ll actually wear. Together we saw a way to connect the digital product to the company’s core values. It’s less about Vistaprint branding and more about their mission of helping people and businesses through technology. The site does exactly that, simply and effectively.

How did the final product meet or exceed your expectations?

The Masks website empowers the user to take control of their safety, so we focused on creating a seamless browsing and purchasing experience that delivers quality, well-designed masks to their homes. We anticipated a positive response, but the site blew past expectations. Even without advertising support, the site sold one new mask every five seconds on its first day alone.

Why is this an exciting time to create new digital experiences? How does your team fit into this?

Our process encourages iteration which is exciting because it allows for more versions, more testing, and better alignment with our strategic goals. From a technical perspective, this period has validated the power of creating flexible platforms with loose coupling and quick iteration cycles. We’ve always been advocates of this approach because it so easily enables a product or a business to pivot and face new challenges and opportunities.

See More Projects

World AIDS Day 2020 - A National Conversation -

The National AIDS Memorial

World AIDS Day 2020 - A National Conversation -

View the Project
In Event of Moon Disaster

MIT Open Learning/Center for Advanced Virtuality

In Event of Moon Disaster

View the Project
Frontier Development Lab: Solving NASA’s Toughest Challenges with Google Cloud × Intel

MediaMonks

Frontier Development Lab: Solving NASA’s Toughest Challenges with Google Cloud × Intel

View the Project