Seagram's Escapes Holiday Marketplace

Design & Development

Fall/Winter 2020

Design and development for the Seagram’s Escapes Holiday Marketplace featuring Black Owned Businesses, which Seagram’s Escapes ran during the holiday season in 2020 to support Black small business owners. It was an amazing experience working on such a large project with a creative team for such a good cause.

Design Process

The design process for this project began with a project brief submitted by the Seagrams Escapes Brand team and an initial discussion surrounding their ideas for the project and what was technically feasible.

Once we agreed on what was and wasn’t feasible, we collaboratively iterated on an initial set of wireframes before I proceeded with the design work. I broke the design work into two stages, designing page layout (how components are structured and organized) and component visual design (how the components look). I was able to provide the Brand team with several variations on both layouts and component designs that match with the existing design system for the Seagram’s Escapes brand.

We reviewed the mockups together and collaboratively made revisions until the Brand team was satisfied that it met their expectations. Once everyone was happy with the designs, development work began

Development Process

Tech Stack

11ty
SASS
Netlify
JS/jQuery
Algolia

The development process included several stages. First was collecting all the data about the businesses participating. Next was building out a static version of the site as a prototype for final design feedback and review. After that would come adding in the logic layer to display the data about the businesses and implement user interactions.

Setting up the database

Each of the businesses participating submitted an application form with basic details about their business which the Brand team reviewed for eligibility. The application included links to their business website and up to 5 product pages. I was able to set up a Node.js script that would scrape each of the product pages for open graph tags and save what information it could find (product name, description, image and price). The script saved all the data scraped into a JSON file.

Rather than deal with the hassle of setting up a database server and writing up API endpoints to return the data, I used Algolia to handle all of it for me. I uploaded the JSON file and set up which attributes should be searchable or filterable, and we were ready to go.

Setting up the static site.

The primary build stack at FIFCO USA is 11ty, which generates static HTML & CSS lightining fast using javascript. I used 11ty to build out a basic version of the home page, category pages, about and faq pages. Using the same JSON file that I fed to algolia, I was able to set up a shop directory page listing all the businesses.

Making the Magic!

Next came putting all the pieces together, and using Algolia’s js library, I was able to very quickly replace all the static business listings with live dynamic data. The homepage displayed a random selection of businesses, and the category pages showed a gallery of businesses and their products, and had full search, filtering and pagination capabilities.

The Live Marketplace

The project was huge success! We had over 1600+ businesses featured in our marketplace, and several tv shows and news sites covered our project. Our partners from the “Real Housewives of Altanta” also helped with promoting the project and driving engagement.

Through this project we helped generate thousands of dollars of additional revenue for small Black business owners, helped them reach new audiences, and strengthen brand loyalty with our consumers. Throughout the time period in which the marketplace ran, our main Seagram’s Escapes site saw 20% more traffic than normal!

## Desktop Screens

## Mobile Screens

Back to All Works