When Ad Council approached Beaconfire about this monumental project, the FanGirl in me let out an embarrassing little squeal. What self respecting, red blooded Creative Director wouldn’t be thrilled at the chance to help one of the most iconic American brands reinvent itself online? We couldn’t wait to get started.

As the complexity of our task sank in I’ll admit to a few … small… moments of panic. Ya know, like… Would we be able to do justice to Ad Council’s incredible 70 year legacy? How could we represent the massive depth and breath of their body of work in an accessible and engaging way? Would the technical requirements for all that media be a roadblock? OH! And what if we weren’t able to translate Ad Council’s unerring creative vision effectively to the web? And.. And.. And… #omg

These seemingly overwhelming concerns (along with a laundry list of many more) are likely familiar to any organization as they start down the path of a site redesign. So how do you take that first step? It may be simple, but I truly believe that success boils down to a children’s riddle: How do you eat an elephant? One bite at a time.

To get you started, here are a few design/user experience tips to chew on:

Ask a lot of questions
Design requirements are obviously important, but expectations and dreams also need to be uncovered before jumping into a redesign. There are never dumb questions, only opportunities to learn more about who you are designing for.

Think like your audience
When it comes to supporting brand identity and organizational goals, client preferences will guide part of the creative direction. However, it’s the audience who will be using what you create. Put yourself in their shoes and advocate for their needs with every design choice.

Keep it simple
It’s far easier to overdesign than to create something deceptively straightforward on the surface that reveals a complex message underneath. Follow your gut and remember less is always more.

Tell a good story
Content, brand, imagery, media, messaging – these are all facets of a website’s narrative. Make sure that the site design and user experience not only supports your story, but also enhances it.

Design for action
Eye candy can win you awards, but doesn’t always ensure engagement. Design for beauty as well as for purpose and always remember that mindful creative can change the world.

Adcouncil.org represents hundreds of hours of work and the dedication of a focused team that not only embraced rebirth, but championed it at every step. It’s glib to say that any organization can do the same but I truly believe that armed with clear project goals, passionate creativity, smart people who have your back and the unshakable belief that anything is possible, you’d be amazed at what you can accomplish.

Happy Birthday, adcouncil.org. We can’t wait to see what you do next.

User Agent Switching: Some browsers, such as Safari (on the PC), allow you to switch user agents to an iPhone or iPad. This tells the website that you’re browsing from that device, and it sends you the version of the website that it would normally send to that device. This is an imperfect emulation, however, since the dimensions of your computer monitor probably differ somewhat from  an iPhone. (If not, it’s probably time to switch to a new monitor).

Emulator Software: We often use BrowserCam, which will allow you to do a screenshot of many mobile browsers. The software isn’t perfect, however. It doesn’t allow you to use authentication for example, and other inconsistencies from the mobile version may appear from time to time. It is, however, one of the best options available right now.

Specific device testing: There’s a good iPhone tester available, as well as Blackberry emulators to mimic individual phones. Be aware that the Blackberry emulators are very large downloads.

In the end, you really do need to test on mobile itself. Testing in an emulator means you’re using a keyboard and a mouse. So you may know what things look like, but you won’t know what will happen if you tap versus mouse-click, swipe, or whether or not your text is too small for medium sized fingers.

The map is not the territory

To really test, you need the devices themselves to see how they are going to respond.  Emulators are great for layout and design testing, but not great for testing how devices will respond to device detection (server side), media queries (client side), and of course any interaction with the hardware (besides gesturing and typing, think click to call or click to email functionality for now on mobile web sites – though the list will grow as new approaches are established for leveraging mobile hardware from websites).

Determine which browsers to focus on

As with any kind of testing, you should come up with a target browser/device list based on your site analytics. Most mobile sites will focused more on Safari/iOS and Android phones, as that is the devices used for browsing on most US based sites. You shouldn’t lose sight of Blackberry and Windows mobile, however, and perhaps even Nokia if you have a more international reach.

Beaconfire used Mobify to create the Zoo’s mobile site.  The free Mobify service allows us to pull live content from the site, present it in a way that is specifically optimized and designed for mobile users, and create HTML templates that are only served to those users.

The result?  We create a fully dynamic site using content from the CMS-managed desktop version and deliver it in a highly usable format for mobile devices.

The Mobify version of the site has been streamlined to provide the most useful information for people on-the-go but still includes a link to the full site for those who want a deeper dive into the information.

So, who’s up for watching the penguin feeding at 3:30?

It is the third site that we have created with AICPA and the Ad Council using the same instance of eZ Publish CMS over the past 18 months (one of the other two is not yet publically launched, and the first was www.360financialliteracy.org in March 2010). Although each has a distinctive look, it is clear that they belong to the same brand family. In addition, being in the same eZ Publish instance, we were able to leverage a number of existing structures, layouts, and features to reduce the time and budget required for each subsequent Website.

We are happy and proud to be working with AICPA and Ad Council on these projects to help promote and support financial literacy!

Top Ten came to us at Beaconfire to help them with some important enhancements to their already designed site in eZ Publish. Among other things, we helped them by implementing the Pricegrabber, EcoRebates and Milo APIs which allows users to find local prices, rebates and availability respectively. We also enhanced the overall look of their product grid views as well as adding more usable navigation to their “How We Evaluate” section. On the backend, we automated the top 10 lists to make their content entry much more efficient as well as setting things up to allow for tied rankings if energy criteria were equal. Another important bit of functionality we implemented on the Top 10 site was the archive page which links from the bottom of the top 10 lists and shows products that were previously listed in the top 10 over the last six months.

We are very excited to be working with Top Ten USA because we believe the work they are doing is very important and has the potential to bring consumer awareness to the next level. If you aren’t already concerned about energy efficiency, you might start by checking out the top 10 reasons why you should be.

Empowerment. Living Beyond Breast Cancer (LBBC) empowers all women affected by breast cancer to live as long as possible with the best quality of life.  Their new website helps support this important mission by providing access to their programs and services, online forums, an extensive library, the latest in breast cancer news, upcoming events and pages which pull together specific materials relevant to the unique needs of certain audiences, like the newly diagnosed.

Beaconfire worked with LBBC to design and develop their redesigned site and launched it on the eZ Publish CMS platform.  http://www.livingbeyondbreastcancer.org.

Deadline. The National Breast Cancer Coalition (NBCC) is “giving up hope”.  They have launched a powerful and moving campaign calling for the end of Breast Cancer by 2020.  Impossible?  Considering the Polio vaccine took 7 years to develop, a deadline may be exactly what’s needed in the fight against breast cancer.  What do you think? Vote “yes” or “no”, share your comments, watch advocate videos and hear from the experts at http://www.breastcancerdeadline2020.org.

Beaconfire worked together with NBBC and Springboard to launch their campaign design and functional concepts in Convio CMS, utilizing some of the tools in Convio COM.

Pfizer had funded an independent research project conducted by Penn State to analyze if health care companies could benefit in the long-run by covering smoking cessation products and the resulting report is 637 pages long: http://www.lungusa.org/stop-smoking/tobacco-control-advocacy/reports-resources/cessation-economic-benefits/reports/SmokingCessationTheEconomicBenefits.pdf. 

From the get go, we know we don’t want to lose the visitor by displaying too much data and make it difficult for them to find key points.  But we also never want to “dumb it down” so as to lose the richness of the story the data can tell. The solution is making the most pertinent data easily accessible and present a clear compelling picture. In this case, the homepage of the report would be the US map (www.lungusa.org/cessationbenefits) which would present key data points when the user moused over a state.

American Lung Association, Pfizer and Penn state identified 3 key points that would plainly state the results:

• Average cost of a pack of cigarettes,
• Cost to state per pack of cigarettes and
• Return for every $1 spent on smoking cessation treatments. 

The user gets these first—and they are pretty shocking. From this high-level, they can click into a state to see more specific data and details like:

• how much smoking costs a state per year in direct health care expenditures,
• workplace productivity losses and premature death
• how a state can save money by providing smoking cessation treatment to curb direct health care expenditures and reduce workplace productivity.

Then if the user wanted to see all of the data concerning that state,  they can download the full state report from the state fact sheet page.

For users who weren’t as comfortable navigating the map, there is also a navigational link to view a list of all of the state and click to the state fact sheet from there. And finally, the user could access the whole report of 637 pages from the Data By State page as well.

Bottom line: offer the user key points to draw them in, then provide a bit more detail and finally allow them to access all the data if they want to dig into it.  Providing more than one entry point into the data is the user-centric way to go.

I won’t even fake naïveté here because I knew deep down it would be harder than expected. I’ve had the front row seat to many a client rebranding train wreck before, but I’ve always played the role of supportive consultant. The “expert” voice. The one saying “Good God, how hard can it be to design a great logo? Tell your agency to get on with it already!”

Yeah. Karma’s a bitch.

For those uninitiated, the process of designing a logo usually includes the creation of a unique “mark” or graphic treatment paired with an appropriate font/type. Together, these should represent, at a single glance, your company’s mission, vision, methodology and style. While settling upon a new font choice was tricky, we managed to relatively quickly agree to one we all loved. However I totally underestimated how complex, terrifying and fraught with peril the search for a revised mark would be. My blood pressure reached new highs when we spent 2 weeks without any clue how to integrate the mark. Visions of blank business cards and logo-less postcards swam in front of my eyes. My job, I was certain, hung in the balance. No doubt about it, I was in full-on panic.

In my defense, since we weren’t totally rebranding but rather hoping to “update” our existing logo (both mark and type), I thought it would somehow be easier. Don’t know what I was smoking. Lesson of the year: Creating something “new” that retains the brand equity of the “old” yet still feels like “us” is not unlike juggling. Blindfolded. On crutches. With flaming chainsaws.

All challenges aside, I can proudly report we will not be going barefoot as originally feared, and that we now have a shiny “new” logo that we are very very proud of.

But just to keep you all guessing, the actual logo is embargoed until the official reveal at our 10th anniversary celebration in March – Patience is a virtue my friends (or at least that’s what I’m told). However, I can share some of logos (out of the nearly 100 versions created) that we didn’t choose just to whet your appetite for the real thing in the spring.

After all of this, I can honestly say that I have a far greater appreciation of what our clients go through during this often painstaking & frustrating process. So next time I don’t offer you a glass of wine or a valium before addressing your branding needs, just smack me. You’re all remarkably brave souls.

Among other goals, AFT engaged Beaconfire to redesign their 5-year old site to balance the needs of multiple audiences with a more modern and inviting look and feel. Our redesign process involved stakeholder interviews, a creative visioning exercise, a review of peer organizations, a card sorting exercise to gather user input and developing personas representing AFT’s target audiences, in addition to our typical discovery process of defining goals, audiences and features. All these steps resulted in a new information architecture and visual design for the site. In addition to the design, Beaconfire re-engineered the AFT Voices feature on the web site that asks their members to share their voice on important questions and issues for their professions and their constituencies. The new design was implemented by OmniUpdate, AFT’s CMS software vendor.

The new Voices tool automates what was a very manual and time consuming process for posting questions to and comments by members on the website. The new tool has an administrative console where AFT editors can create and publish questions, receive email notifications, moderate and publish responses, and view statistics on questions and comments. It allows members to post their comments and a photo real time, and to vote and rate others’ responses; Editor’s picks and highly rated comments sort to the top. Previously, AFT manually inputted questions and comments from their print publications onto the website, which only enabled them to post a fraction of the number of actual comments received.

The new look and feel, and the Voices tool in particular, have helped to achieve two other key goals for the site – to engage and interact with members online, and allow more members to see themselves on the site and to understand they are part of a larger movement. It’s been a pleasure working with the nice folks at the AFT to make their goals come true!