WIRED Buy Buttons
Redesigning buy buttons to promote usability & provide editors the ability to create more nuanced product recommendations
--
Project Overview
I was brought onto this project after its initial launch in mid-2019. Its impetus lay in the business reality that product embeds with multiple buying options featuring different retailers receive more affiliate revenue than those featuring only a single retailer buying option. While this capability was already supported in our APIs, the rendering of multiple buttons on the front-end needed to be built into Verso.
Timeline
~ 4 months
User research
Our user research team conducted a series of unmoderated tests to learn more about the way readers approach buying decisions online. They learned that when introduced to a page with products, users expect to see which retailers buy buttons will take them to and the corresponding prices of items at those retailers. Users also tended to comparison shop, and found utility in features that would reduce the necessity to visit multiple destinations in order to make a decision.
Designing a gentle solution that accounts for multiple buying options while remaining scaleable across brands
Based off these findings, we decided to move the price and retailer data into the buy buttons, as well as provide editors the ability to add multiple offers from various retailers to a product, rendering multiple buy buttons (up to four) on the front-end. We also provided editors the ability to include reduced sale prices for a product.
Yet the road to this solution was rocky. Initially, the team had been under the impression that price and retailer information could not be rendered within the button, in accordance with the path set by the preexisting design:
Solutions that were initially explored by the team operated under this premise. Naturally, usability issues presented themselves when multiple buying options were added to a product. Longer retailer names would be cut off when two retailers were stacked side by side horizontally on the grid, curtailing legibility. And stacking multiple buttons, all labeled “BUY NOW,” made a friendly product recommendation feel bulky and aggressive:
Reducing the size of the button and stripping it of a fill color created an experience that felt marginally less loud, but the repetitiveness of the “BUY NOW” CTA still made the experience feel overly commercially forward, antithetical to the casual tone of the editorial voice in the product description. And this still didn’t solve the issue of longer retailer names that cut off on the grid:
I raised my concerns to the engineering team, trying to get to the technical heart of why we couldn’t render pricing data within the button itself, as I’d seen so many others do during the course of the competitive research I conducted earlier. And lo and behold, with a little extra effort it turned out we actually could do just that!
We arrived at a design that integrated this recently discovered technical capability. The new design consolidated a considerable amount of the excessive white space that had plagued lengthy product galleries, promoting content density:
View the live design on WIRED here.
We knew that this design wasn’t perfect from an aesthetic perspective — in fact, editorial asked us why we couldn’t design a solution that positioned the buttons side by side horizontally on desktop, à la The Strategist:
But while we agreed that this design looked cleaner and more visually pleasing, it simply wouldn’t scale across the various use cases which our solution needed to take into account, most notably long retailer names and discounted pricing — our button component increases in height when the CTA reaches a certain character length, and aligning one tall button and one short button would appear imbalanced visually.
And from a systems perspective, working within a design system that needed to accommodate so many different brands, each using their own set of typefaces, it would be impossible to guarantee the scaleability of such an approach, given the natural variability in letter spacing, line height, and font size. And even just looking at it from the perspective of WIRED themselves — updating the values of the type token referenced by the CTA could easily skew the experience visually in unintended ways.
Given these constraints, our design embodied the compromise we had to make, offloading the nuances of these extraneous factors onto the system rather than the editors.
Optimizing for legibility
Previously, price data on WIRED was rendered through their signature brand typeface, Wired Mono. However, this posed legibility issues, as type at such a reduced size was difficult to read, and certain numerals were in fact nearly indistinguishable, specifically the 0 and the 8:
Working with the WIRED team, we came to the conclusion that it was best suited for typographic editorial accents rather than this more utilitarian feature. We decided to deprecate the use of Wired Mono in this particular context, turning instead to Lab Grotesque, a reliable sans serif in WIRED’s brand identity that was better suited for more pragmatic instances such as this one.
Final product
Initially launched on WIRED, the updated design yielded a 58% increase in CTR post-holiday season, amounting to an average CTR of 13% compared to the previous design’s CTR of 8%. Since then, the design has been seen on brands across Condé Nast, including Bon Appétit, Allure, Architectural Digest, GQ, Condé Nast Traveler, among others.
