Portland Madness: The Method Behind the Madness

It’s been an amazing few weeks around eROI as well as for Portland in general. We set out a couple of months ago to try and define our beloved city. What is it that most represents a city so unique and, some would say, so weird? Could there just be one thing that would become the iconic image of Portland for the world?

We knew we are more than just Hipsters riding around on fixies in the rain.
Or are we?

The following paragraphs are the first person accounts of those people that were most closely involved in the process, and they will walk you through the thought process, the challenges and the eventual products that emerged from a rather large undertaking.

Matt Popkes (Strategy Director)

It started as a random conversation, over a beer, in January, 2013.

“We should do some sort of fun campaign around March Madness.”
“Yeah, we should!”

This brief interaction slowly evolved into the creation of Logo Madness: The Battle for the Greatest Brand Logo of All Time. Launched in March, 2013, 64 brand logos entered our seeded tournament, where the public voted on individual match-ups via Facebook. The campaign incorporated a downloadable bracket, email and social media promotion and plenty of blog content. Not surprisingly, Nike was ultimately the tournament winner and crowned “Greatest Logo of All Time.”

Fast forward to January, 2014…

“Remember Logo Madness? We should do something like that again.”
“Yeah, we should!”

The goal in 2014 was taking the concept of a March Madness-style tournament bracket to the next level and, most importantly, create a concept that was interesting and accessible to everyone. While Logo Madness was a fun campaign, successful in the number of people it reached, brand logos are ultimately a niche thing to be interested in. It didn’t take long to discover that the concept was our own backyard; Portland, Oregon.

Portland can be a polarizing city, with Portland-esque cliches (some very true) being broadcast on a weekly basis by national media, food/drink publications, travel and food shows, and of course, “Portlandia”. The answer to what this year’s bracket would be became obvious and had a near endless bank of competitors to choose from. Portland Madness: The Quest for the most “Portland” thing about Portland.

And so it began. Our “Selection Committee” narrowed down a HUGE field of Portland competitors into our field of 64.

Rain, Microbrews, Hipsters and Bikes earned top seed honors in their respective brackets, each of which was named, naturally, for an iconic section of Portland; Burnside, The Pearl, NoPo, and Powell.

Phil Herbert (Digital Strategist)

Starting out, we wanted Portland Madness to be something where we could show off all of our different capabilities as an agency, as well as play around with things we don’t normally do (who knew that Kim Pearson and Danielle Mau-Holmes were such great sock puppet crafters?).

Probably the single hardest thing about this project was deciding things NOT to do. By nature most of us here at eROI are big thinkers and in a project like this with no clear boundaries, it was like having five gas pedals and no brakes. Eventually we brought in an account manager to help get us back from the world of the possible and into the world of the realistic.

Ultimately, we knew that this idea had the legs to get a bit viral, so we focused much of our effort on social media. To help with visibility of our hashtag, we created a concurrent contest on Instagram for people to submit their most Portland photos. Once the brackets opened, we had a list of people and companies we wanted to reach out to on Twitter to help drive it. We used a combination of the @eroi account as well as our own personal accounts. We also built in social sharing functions to the bracket to let  people share their bracket with their friends and drive some extra competition.

To aid our social efforts we wanted to create a lot of content. We created a series of emails, wrap-up blog posts every couple of rounds and five videos featuring a sock-puppet spoof of Sports Center. We knew we didn’t have the time or budget to get a really professional looking set created for life-sized actors, but what we did have was a client who makes really sweet socks, and some really crafty hands. Internal projects are all about making use of what’s on hand. And because videos are only as good as their theme song, we worked with a great friend of eROI, Tanner Russell, to go through every sports theme we could find, and create an amazing intro theme that immediately brought all of the videos together.

In the strategy world, I think you’d call this a “full-court press,” and it’s what happens when the sky’s the limit.

Matt Grantski (Development Lead)

I’ve filled out brackets for March Madness for fifteen or so straight years, whether it was on a newspaper clipping, a printed bracket, or online through one of the major sports websites. One thing I had never considered until after we decided to create a “Madness” style experience from scratch is how those tools worked in a web development setting.

ow do you save a user’s choices? How do you allow them to edit them later? How do you present the actual winners compared and contrasted with their picks?

And most important of all, how do you present a bracket on a webpage and allow anyone to fill out a bracket, whether they’re on a laptop, tablet, phone.

I checked the major sports websites, CBS Sports, ESPN, and Yahoo for how they rendered brackets on mobile devices, and I was a little surprised that these large companies put no special consideration for users on phones. You were in for a very bad user experience if you wanted to fill out a bracket on your phone. We decided we didn’t want to strictly follow the conventions, so we put a little extra effort in making filling out a bracket on a phone just as easy (or as close as we could get) as on a large screen. To do this, we showed one region at a time, and scrolled the user to the next region once their region was completed. This kept the user focused to the task at hand, and didn’t force them to scroll all around the bracket to make updates or edits.

We knew we had something special, but the moments it truly clicked and I started to feel all warm and fuzzy was when Nicole handed over her designs. While I worked on functionality, she was working hard in making something good to look at. Just look at the comparison of what I was working with versus what it became when I incorporated her styles.

This is why I don’t do design.

The other moment was when she finished up the icons. I was using yellow blocks as placeholders, but putting all the icons in place really made everything click and look gorgeous. All that was left to do at that point was iron out the bugs, launch the site, and let everyone at it.

It took a lot of late nights, a lot of pixel pushing to get the bracket lines just right, and a ton of CSS hacks to get “Darth Vader Unicycling Bagpiper” to fit in the tables no matter what resolution the screen was. If only I had known he went by just “The Unipiper” before we started…

Nicole Mors (Design Lead)

I have to to admit upfront, before Portland Madness, I had NEVER filled out a bracket of ANY kind and the whole concept of the March Madness tournament kinda confused me.

I like going to Blazer games, I mean it’s fun to root for our big time Portland team and drink beers, but my knowledge and experience with basketball ends there. College basketball??? March Madness??? Never heard of it. So when the team came to me and asked me to help, it went something like this… Basketball Tournament blah blah blah March Madness blah blah, The Most Portland Thing about Portland.

Now, Portland… that is something I can get into. They had me at microbrews and strip clubs.

My deliverables for the project were first, the design of the actual bracket and microsite and secondly, a set of 64 icons each depicting a Portland Thing. When Matt handed over his working bracket, I spent a bit of time clicking around, and getting a feeling for how the bracket actually was going to work. My approach from a design and user experience standpoint was really having no experience with sports brackets at all, so it was important to me that the layout and functionality was intuitive. Matt and I went back and forth, trying to find that trifecta of awesomeness: intuitive user experience + bracket integrity + slick design. I took screen shots and pushed pixels in photoshop, pass to Matt to tinker with the code, then he would pass back to me for some more design touches. Once we had it where we both felt good, we tested it with the whole eROI team on both desktop and mobile. Screenshot 2015-06-26 09.39.50Coming up with 64 Portland Thing icons proved to be just as challenging as bracket design. How does one illustrate the concept of irony? Many of the icons I had to reach out to my clever co-workers for ideas. For irony, we came up with the idea of it being a broken image graphic. We actually had a few people at eROI call it out as a “bug” in testing because they actually thought it was a broken image in the bracket, when in fact that is the icon itself. I think that is irony at it’s best. With all the work it took to make the Portland Madness icons, I felt it was only fitting to make them available to download, so I converted the whole set of icons into a Portland Madness icon font which you can use as a web font or in your own designs.

Tyler Holmes (Performance Director)

Creating a site from the ground up involves a lot of organization and planning on all fronts of the team. Performance is no different. Working on a site that is built entirely on one page presents some challenges in that, moving a visitor around to different content is done through anchor links and is not a new pageview.

Solving for this requires using event tagging and custom dimensions to visualize what our visitors are busy doing on the site. Our custom Performance code allowed us to see what visitors were choosing as a bracket winner (top 3 choices were microbrews, followed by rain and Powell’s), how many times our content was shared out to social channels after voting (307), what channel they were using to share(Mostly Facebook), how many errors in form submittal there were(nearly everyone missed something when submitting), and a ton more. We built it to be intuitive and read clearly as you progress through the Google Analytics reporting you are literally walking through the actions of our visitors through the event tracking.

This campaign was unique in that the majority of outbound marketing was done via social media, with a large push on Twitter and Facebook utilizing the hashtag #pdxmadness. Facebook, with it’s longer running content visibility was the clear winner in driving people to the site.

There was a small “guerrilla” campaign utilizing print and a sign at the “Real” March Madness that was also tracked via a 301 redirect on a vanity URL that was appended with campaign tagging upon redirection. We saw 37 visits via print which was not exactly successful but does prove our mission to track and determine ROI on literally everything we put out in the world. Don’t let anyone tell you ROI on non-digital outreach is fuzzy at best. Not True!

The campaign far exceeded expectations in just about every metric; brackets submitted, matchup votes (over 75,000!), social interaction/engagement and earned media coverage.

As the word got out, and we watched the visitors come to the site from all over the world, we could tell that we had hit the mark.

About eROI

eROI crafts compelling digital experiences across email, web, and social channels. Our work has been consistently successful in driving revenue and exceeding goals for our partners.