Digital Savings Redesign for Costco Business Center
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.
Layout: Before & After
Old
New
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.
Ads: Before & After
Old
New
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 with 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 eachother and have rounded corners like the savings tiles for consistency.
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.
Inspiration: The Print Version
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.
"No Event"
Graphic displayed while there is no Costco Business Center savings event.
Late 2020 Redesign
about kevin
Kevin is an interdisciplinary visual, product and UX designer looking to create fantastic
aesthetics while giving a great experience.
In his free time he enjoys exploring new web development methods, hiking, longboarding
and
movies.