Zero to Fluff in about three weeks

Screen Shot 2015-09-15 at 12.56.35 PM

About a month ago, we were approached by Union Square Main Streets (USMS), an organization in Somerville, MA that represents the businesses throughout Union Square, to work on a site for their premiere annual event: The Fluff Festival, affectionally titled “What the Fluff?” It’s a celebration of the marshmallow creme invented right there in Union Square that is a well-loved staple in New England. Up here, kids aren’t given peanut butter and jelly for lunch, they’re given peanut butter and Fluff (affectionately named a “Fluffernutter.”)

The turn around would be tight: they needed the site in less than a month! And being a grass-roots organization, they didn’t necessarily have the budget to support months of research, design & development. But it sounded like a lot of fun, and once in a while we love to tackle pro-bono work that we feel passionate or excited about, and this seemed like the perfect opportunity. We jumped at the chance to bring some bright, silly, retro Fluff fun into our lives for a few weeks.

Typically, a project of this scope this would take at least 6-8 weeks (and that’s BLAZING!,) but we’d have less than half that time. Our normal design & production schedule was compressed into three frantic weeks. Here’s how it went down.

Week 1: Foundations

Week 1 was dedicated to the groundwork: brainstorming, building a mood board, initial design sketches, and wireframe. For initial design explorations, we let two of our designers loose on finding materials that set the tone for the site. After a couple days, we looked at what they had and noticed they were both exploring a very similar art direction: a bright, retro look that just screams Fluff. From there, they started some initial design work, focusing on various parts and “chunks” of the site, this time with more of an eye on useful assets, but still working to establish the overall feel & mood of the site. We locked down a palette of saturated blue and red along with some light, bright, worn colors that fit the fun of the brand really well. For type, we decided on the chunky Cubano for headline and the friendly but refined Fira Sans for body. Take a look at the mood board we were working from.

We knew that this site was going to be the place for the thousands of festival-goers to get all the info on event schedules, maps, and other pressing details. We worked with the folks at USMS to create a hierarchy of the content that would make the most sense to festival goer’s both before, and during the event. It was decided early on that a one-page design was perfect for the content we had. One thing they told us they wanted to push was getting people aware and excited about the cooking contest. We dedicated a band near the top as well as an anchor link in the hero area. The vendor lists and schedules were designed to read well primarily on mobile and they use a similar style to trim development time as well as making it easier for the client to make updates if necessary. Here’s a peek at our initial wireframe.

Concept art
Concept art
Concept art
Concept art

Week 2: Design

Using Sketch, we jumped in and started styling the wireframe. Initial art concepts were refined, and color, type, and feel further established and implemented. Having such a strong direction and ready assets made the design come together very quickly. Because we expect the site to be accessed on phones at the festival, we took “mobile-first” quite seriously, making sure that all content would be easily accessible from a phone. The desktop design followed, allowing content to “stretch its legs” a bit. Within a day or so, we had our design in InVision for the client.

The design in Sketch
The design in Sketch

Week 3: Development

Feedback was swift, so by the end of the week, we were ready for development. The Sketch file was used to pull out assets and begin the build on a WordPress install. Since the festival attracts attendance numbers in the thousands, one of the biggest concerns we had for the site was to stay up during what was essentially a DDoS attack during almost the entirety of the event. There was another big event in Somerville this summer whose website melted down right at the start due to traffic. To assure this wouldn’t happen, we used CloudFlare to offload some of the weight of the large images and to help provide stability. We estimate that the site should remain up even if it’s being hit by a few thousand simultaneous users. Once the site was on our staging server, we dragged in all the copy, images, and assets, gave it some QA love, and pushed it live.

In it’s first day, the site had nearly 1500 eager Fluff fans checking it out and after being kicked around on social media for a few days, the numbers only grew. Not to mention, it scored us a mention on OnePageLove!

Projects like this are why we love doing what we do. In just a few weeks time, we took the site from being a cold, hard-to-navigate portion of another site to something that elevates the festival to something way better looking and so much easier to use. Great ideas, great clients, and great talents make great projects.