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.
Extras
Graphic displayed while there is no Costco Business Center savings event.
Costco Business Center - Digital Savings Redesign
1
11
0
Published:

Costco Business Center - Digital Savings Redesign

1
11
0
Published:

Tools

Creative Fields