Custom promotion micro site builder

Online social promotions and sweepstakes have become a seasonal staple for many retailers. A returning Daylight customer approached us looking for a tool that would allow them to build custom promotional micro sites and manage their sweepstakes’ entries and winners.  They needed to be able to run multiple promotions across multiple brands owned by one parent company, and the steep cost of a third-party promotion-builder site quickly becomes prohibitive. 


Knowing and liking Fuel, they wanted to leverage a CMS they understood and keep all of their content in one place. We thought this would be a great opportunity to show off FUEL CMS’ broad capabilities.

Planning For The Future

All projects start with content mapping.  Designing for a CMS site building tool requires a different thought process and movement through the build phases.  We approached the mapping phase by first discovering what needed to be communicated, and then we created a flexible content layout for each piece of the message.  We identified all the content needs and also found unnecessary information in past promotion examples that caused a bloated page structure.  Our final site layout was slimmed down to one page, streamlining the viewer’s entry by bringing the entry form to the front page.

Content Guided Design

During the content planning phase, Kristin, the front end developer on the project, came in early to help breakdown the content into three groups of importance.  These groups allowed for content organization in the stylesheet as well as a design hierarchy.  This small ordering task was the base on which to start designing.

A major design obstacle for this promotion builder was the need for flexibility, not only in content but in appearance as well.  Multiple brands would be creating promotions using the same tool.  To accomplish this need, we chose 7 typefaces that suited various styles.  The different fonts are toggled in the CMS by the admin at the start of a new project.  We also designed 5 different color theme options to jumpstart a new promotion build.  Color overrides for certain elements were also set in place to create a higher level of customization.

The design was handed off to Kristin to go into development as a single color layout with minimal copy.  We talked about what the design would look like with more or less copy in each section, making sure we created a CMS friendly template.  The design went into development, leaving tuning edits, font choices and color themes to be added later. 

Content Strategy and Design Successes:

• Limiting the color and image upload options in the CMS.  You want to create flexibility but keep it as user (admin) friendly as possible.
• The narrow content layout moves between devices really nicely, without needing to reduce columns.  This makes the content input easy and helps the admin to understand placement and size requirements for all devices with only one preview.
• The background image option created extreme flexibility in the look of each site created.  Using a background color vs. a pattern would completely change the look of the site.
• Providing the pre-selected font options and color themes added a higher level of ease for the admin and gave a polished look to the final websites’ appearance.

Fuel CMS Powering The Site Builder

The promotion tool needed the ability to create a highly customized landing page for various promotions. This translated into being able to enter various amounts of copy, create menu structures, set expiration dates, build data capturing forms, select colors, and upload image assets for a promotion. FUEL CMS’ flexible page creation feature allows developers to create these complicated data entry forms with ease and proved to be a great fit for creating the promotion pages. This included the ability to create customized forms with various validation options.

The more complicated part of creating the administrative interface was displaying all these fields in a manner that wouldn’t overwhelm the client and would provide an intuitive workflow for creating a promotion. We grouped related promotion options together using a series of tabs and provided tooltips where necessary.

The client began playing with the tool and testing it out with very little training.  The first promotion was setup in no time.  Our expectations for rounds of tweaking the tool to the client’s needs vanished.  No additional work was needed by our team, the promotion builder tool was a success right out of the gate.