BESTBUY.COM SALE PAGES

Creating a way to more efficiently manage Best Buy’s digital online sale (and other) experiences

best-buy-sale-pages.jpg

LEFT: then (version 1.0); RIGHT: now (current state)

 

Best Buy is a leading provider of technology products, services and solutions. Whether customers visit their stores, engage with Geek Squad agents in their homes, or use BestBuy.com or the Best Buy app, Best Buy works to enrich the lives of their customers through technology across a range of areas, including entertainment, productivity, communication, food, security and health.

 
 

 

Background

 

When I first started working as a designer at Best Buy back in 2011, my very first assignment was to design the holiday sales pages. Overtime, the necessity for these pages grew greatly, going from seasonal and sparingly to quarterly, then monthly, and eventually weekly. It got to the point where not only were these sale pages being created multiple times a week but when items sold out, new offers were then created to replace them, requiring the pages to be updated quickly and multiple times even once the pages were already live.

As the main designer of the sale pages, the increasing need for and frequency of these pages prompted me to come up with a way to be able to more efficiently build, manage, and update them. In the beginning, the sale pages were custom designed and manually built with unique HTML, but eventually, a proprietary content management system (CMS) was created so that the sale pages could be easily managed—even by someone without a design or development background—that inadvertently served as a proof of concept for the development of a library of reusable components that the majority of BestBuy.com is built upon today.

While the main goal wasn't necessarily to increase conversion, revenue, or profit, A/B testing was performed as design improvements were made to ensure that the incremental changes weren’t detrimental to the overall experience.

 
 

Version 1.0 - The OG

 

To begin with, the need for the sale pages was infrequent and usually reserved for seasonal promotions, such as the holiday season. Each sale page was custom designed and painstakingly laid out in Photoshop and then built using unique HTML for each sale.

 
 
sales-01.jpg
 
 

Version 2 - Crawl

 

My first attempt at creating a "template" started out with using CSS to define various layouts—such as 2-, 3-, and 4-across product rows—which made it easy to build a sale page according to the number of offers it had. This also allowed other designers who were less experienced in front-end development to leverage my code and styling for their own work.

This version also included a more uniform way of badging products as well as a more formulated approach to the layout of the page, which made it easy to swap out images and content as well as to build pages for future sales.

 
 
sales-02.jpg
 
 

Version 3 - walk

 

The next progression of the sale pages continued the use of CSS styling for the different product row layouts. Badging of products was removed entirely in order to clean up the design. Price blocks became more uniform in their use and layout and aligned to each other for improved scanning and readability.

This version also accommodated a more promotional look and feel that could be customized to the seasonality of the sale.

 
 
sales-03.png
 
 

Version 4 - Run

 

In its final evolution, the sale pages began leveraging a proprietary CMS to manage the content and overall layout of the page. No coding (or even knowledge of) is required, and almost no manual design labor is necessary, with the exception of promotional branding elements and offers that include multiple products. The majority of content (images, product titles, prices, etc.) is pulled dynamically by simply entering the product SKU, and the pages are constructed using a framework of various standardized reusable components.

Headers to separate products based on type of offer and product category were introduced to make shopping easier for the user. Buttons were brought in to use as call-to-actions and align to each other for consistency and ease of use. In this version, price blocks became even more uniform and continued to align to each other for improved scanning and readability.

 
 
sales-04.jpg
 
 

Applying the concept elsewhere and Scaling it site-wide

 

The development of this proprietary CMS to efficiently manage the sale pages through a combination of various standardized layouts and reusable components was so successful, it effectively served as a proof of concept for the development of a library of reusable components for the rest of BestBuy.com. The concept was scaled site-wide and the majority of BestBuy.com is built upon it today.