Vistaprint

About Visage

Our mission

Our mission: that nearly every page on our site can build its interface entirely from Visage components. While there always will be some pages that will have unique interface needs (Studio is the obvious example here), we believe we can (and should!) have a component toolkit that is versatile and robust to accommodate most pages’ interface needs.

Advantages

Consistency. A consistent user experience makes our site look more credible. Customers find the site easier to use when UX patterns repeat from page to make, and visual consistency makes the user experience more pleasant to the eye. It all cases, this means more revenue and a more positive impression of Vistaprint.

Design speed. Designers don’t have to design from scratch, and don’t end up re-inventing the wheel; they can use our ready-made kit of UI components for building page designs. New designers can instantly see what our site’s design language and standards are. Since components and patterns aren’t designed from scratch, mockups don’t have to be pixel-perfect; designers can pass along wireframes instead of precise mockups to developers.

Developer speed. Developers don’t have to code from scratch, either. Using an existing set of already-built components means scalability: it takes less time to build out the interface, leaving more time to refine the UI, focus on the UX, or hit stretch goals.

Developer ease. Many developers are inexperienced or not confident with UI technologies, especially CSS and mobile development. If a page can be built using entirely Visage components, the developer never has to write a single line of CSS, and can be confident that the page components will work on all devices.

Brand Updates

Vistaprint periodically updates its brand elements to stay fresh, and to stay consistent with design trends. Visage is the primary expression of that Vistaprint brand on our site.

Using Visage to build your interface means that brand updates happen without any extra work on your part, since the brand updates can all happen in Visage's common set of code. This allows us to easily and quickly freshen Vistaprint’s visuals on a sitewide (rather than page-by-page) basis. 

Versioning

While we want to make it easy to perform sitewide updates, we also want to allow individual teams to have precise control over any impact that Visage changes might have on their page’s UX. For that reason, while we provide an “evergreen” version of Visage, we also provide specific versions of the library that a page can “pin” to. Then, when a new version of Visage is available, teams can locally preview how their page will look when using that latest Visage version, and can publish that update once they feel confident about how their page will now look.

We encourage teams to stay up-to-date with their version of Visage. If different parts of the site are using different versions of the library, our site will feel inconsistent, and customers' page performance will suffer as their browsers download multiple versions of the code.

Component updates

Visage is designed to be a living thing; not a one-time snapshot that leaves the site’s look-and-feel frozen in time. Individual pages may also surface needs for visual or behavioral updates to a component, and we welcome this input into the library. By having those updates occur in the Visage system, those changes will now be global, rather than page-specific, thus keeping our sitewide user experience consistent for the customer. As the customer places an order, they feel like they’re on one site, rather than a bunch of somewhat-related sites.

Why build Visage?

Why does Vistaprint maintain its own component library, instead of using an off-the-shelf one like Material Design or Bootstrap?

  • Vistaprint's needs. The major libraries provide generic buttons and simple components, but Vistaprint has very specific e-commerce and marketing needs that these libraries don't provide. Our library has nearly 70 components, many of which are absent in the third-party libraries. Building our own library means we've been able to create components like product tiles, modal dialogs, and other features that we need to sell our products -- and we've been able to create exactly the features that we need from those components. 

  • Brand identity. The appearance and features of the Visage components are unique to the Vistaprint brand and experience.

  • Maintenance costs. The third-party libraries all offer convenient “basic building blocks” of a website, but those are the parts that require the least amount of day-to-day support, so we save little on maintenance costs for these. For complex components, we do incorporate a-la-carte third-party libraries where they save us maintenance costs (e.g. carousels and dialogs).

  • Browser support. Each third-party library supports a specific set of browsers, but that set may not match Vistaprint’s own support list. For instance, Carbon only supports the latest version of a given browser... but as of late 2019, Vistaprint was getting 56% of its revenue from browsers that are not the latest version! We are potentially jeopardizing revenue by risking a broken UX for older browsers that still account for sizable percentages of our revenue.

  • Accessibility. Third-party libraries all offer some basic level of accessibility support, but they all have gaps when trying to meet Vistaprint's accessibility targets. This is true even for Google’s Material Design. By contrast, Visage targets our accessibility support needs 100%.

  • Supporting our microfrontend strategy. Our system works fully across platforms, including React and vanilla JS, which is not true of all third-party libraries. For instance, Material Design is missing a lot of components on non-React platforms, and Vistaprint has multiple micro-frontends and pages that aren't using React.