Costco Business Center - Digital Savings Redesign

•

Costco Business Center has been using a tool to generate savings data for our website for years. Due to growing limitations, I proposed redesigning and implementing a new method for generating this page that cuts down on workload.

The Look

Before & After: Layout

As shown in the Before shot (left), there was not a lot of thought put into the design and flow of information. Yes, it took some elements from the print-version of our savings but had an overall cluttered feel. During the redesign I opted to make overall look and feel more similar to our print version while taking requests such as large product images into consideration.

Before & After: Ads

Ads used to be part of a pieced-together solution. Since we did not fully control the output of the previous code, it was riddled in errors and adding things such ads at the bottom of the page was harder than it should have been. The new layout, given that it is all designed from the ground up, took ads into consideration from the beginning. Ads now line up with each-other and have rounded corners like the savings tiles for consistency.

Inspiration: The Print Book

Seeing the new digital savings layout alongside the printed copy, you can immediately see where inspiration was taken. The front cover, tiles and ads all took inspiration to keep a consistent look from print to digital.

The Code

Utilizing the JSON2HTML framework, the page is dynamically built by importing a JSON export of our spreadsheet data. This allows for the marketing team to make edits in the same document that we source the data from. No code editing is required. The edited data is simply interpreted by the page. This cuts down on maintenance and overall production time.

Future Proof: Dynamic Filtering

With Costco Business Center expanding their delivery zones, things are changing. For local next-day delivery, we use our own fleet of delivery trucks which allows for most products in the warehouse to be sold. With the expanded zones, we use 3rd-party shipping carriers which limits our catalog and in turn our list of savings. To limit frustration of our members as this project grows, we can adjust the code to not display items that are not available to members that are outside of the local delivery zone.