Giving Tuesday is 2 weeks from today. Beaconfire will be distributing  Donors Choose gift cards to staff and clients. What are you planning to do?

Giving Tuesday is a day for giving back – a day to remind us that the holidays are not just about big meals and bargains but are about sharing and community. Charities, families, businesses and individuals are coming together to transform the giving season and support communities in need all around the world. Giving Tuesday is the Tuesday after Thanksgiving (11/27) and was created by a consortium of 92nd Street Y, United Nations Foundation, Skype, Microsoft, JP Morgan Chase, United Way and several other organizations. You can learn more about the movement at www.givingtuesday.org.

Site launches are a special time at Beaconfire.  We are especially proud this month to announce the launch of a new website and blog for AFL-CIO.

AFL-CIO’s new sites showcase an inclusive movement that puts the voices of working families’ front and center. The new design is more visual than its text-heavy predecessor allowing AFL-CIO’s content and calls to action the opportunity to shine.

The redesign was a result of a year-long collaboration between Beaconfire and AFL-CIO teams.  Beaconfire led the Discovery, IA, and Creative phases and then led Development with AFL-CIO’s tech team taking on about half of the implementation work. The site was deployed on the eZ Publish CMS platform.

Highlights of the new site include:

• Streamlined navigation and improved search functions help visitors find content more efficiently
• A new Action Center offers a one-stop source for supporting workers, finding local events, contacting Congress, signing petitions and mobilizing through social media
• The updated AFL-CIO Now blog allows users to comment and share via Facebook and Twitter, highlights “most popular” features and aggregates user-generated content from across the movement.
• En Español, a robust and important resource for the Spanish-speaking community,  is now more prominent and has expanded content
• New sections that spotlight younger workers and the union movement’s partnerships with low-wage and immigrant communities
• Seamless integration of popular features from the previous site such as CEO PayWatch, coverage of working family issues, and the comprehensive Your Rights at Work (in English and Spanish).

The co-development effort between the Beaconfire & AFL-CIO tech teams worked beautifully with the tech leads on both sides doing a fantastic job with overall management against schedule and budget.

Jared Schwartz, Director, Digital Strategies, AFL-CIO, says, “The organization and labor movement now has a modern, innovative online face that it can be proud of.  Thank you all so much for guiding the AFL-CIO through the redesign and congratulations to all the amazing staff at Beaconfire who helped make this happen.”

Site launches are a special time at Beaconfire, because not only do we fulfill our commitment to our clients, but also we feel a sense of sharing in their cause and their mission.  We definitely feel that way with this one.

Legacy, whose mission is to build a world where young people reject tobacco and anyone can quit, engaged us to redesign My Legacy Story. The original flash-based site allowed people to share stories about how tobacco has impacted their own lives, as well as the lives of loved ones. They wanted to redesign the site in HTML, enhancing the user experience and allowing people to fund-raise in honor of the stories they had shared.

Integrating Friends Asking Friends With A Content Management System

Due to the needs of the project, we determined that the site needed a strong Content Management System (CMS), and chose eZ Publish, alongside Blackbaud’s Sphere for Events and Friends Asking Friends (FAF) for the peer fundraising component.

FAF isn’t typically integrated with other CMSes, which presented some unique challenges. To enhance the user experience as visitors transitioned between the CMS and Sphere pages, we implemented a custom JS script which passed data between the two sites. The script dynamically changed forms with jQuery, auto-filled CMS submitted stories into Sphere’s personal fund-raising forms, and other enhancements.

In order to synchronize people’s fundraising pages in the CMS, after people registered on MLS, and then went into Sphere, we used the custom JS script to pass their unique ID back into eZ, allowing the non-FAF portion of the site to show fund-raising progress (including a custom thermometer that we developed) through the FAF API .

HTML Vs. Flash For Browsing Stories On The Homepage

We wanted to create a unique way for people to browse other’s stories, and came up with an interesting twist on the standard slideshow navigation.

While it may have been easier to develop in Flash, we decided to develop it entirely in HTML and JavaScript in order to ensure that it would be viewable on mobile devices.

Maximizing Conversions by Understanding Visitor Behavior From Start to Finish 

We designed the site to identify factors that could help to maximize story submissions and donations to achieve the goal of getting people to share their stories, and raise funds in support of those stories.  Several events were set up in Google Analytics to track which stories on the homepage of the site were most compelling (based on which received the most clickthroughs), and which categories people were most interested in (also based on clicks). The CMS-based portion of the site was on one domain (www.mylegacystory.org) while the FAF and donation handling occurred on another domain (www.kintera.org). We set up cross-domain tracking so visitor data was tracked as people switched from one domain to another. This allowed Google Analytics to keep track of which websites had referred donors, which stories led to completed donations, and other critical information needed for site optimization.

Campaign Tracking / Sourcing Between Sphere, Google Analytics And The CMS

Understanding how the website impacts visitor behavior is only part of the information needed in the process of maximizing conversions. We must also be able to track the ROI that each marketing campaign has on activities defined as site goals. Using Google Analytics campaign codes allows you to track how people found out about the site, and see which campaigns provide the highest ROI.

In addition to having that information in GA, we also wanted to have that information available in Sphere reporting. To do this, campaign codes are saved into a cookie, and when people create stories or make donations, we pass the campaign code into Sphere as a source code (msource). This allows for Sphere’s reporting functionality to indicate the source of donations and new story submissions, and it’s also possible to segment post-campaign emails to individuals who arrived via specific campaigns. Additionally, we set up CSV exports for all stories on the site, and each story is tagged with the campaign it arrived through.

Share Your Story Today!

Now that the site is launched, we’re looking forward to seeing the stories people share. Share your story about how tobacco had an impact on your life (or that of a loved one), and then let us know in the comments if you have any ideas for further improvements to the site.

For any organization, redesigning your website can be a little like giving birth. It’s messy, it can be scary at times, there’s a pretty solid deadline and by the end of the process you have magically created something special. Color me dramatic, but today I have the great honor to welcome the newly re-imagined adcouncil.org into the world both as it’s biggest fan (Smokey, call me!) and as one of its midwives.

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.

We’ve been doing a lot of mobile sites for our clients recently, such as the new Bronx Zoo mobile site. As our clients review their standard desktop websites, wondering if they should create a mobile version, they’ve asked us how they can see what their sites look like on mobile devices. Here’s what you can do to check.

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.

Out and about in the Big Apple armed with only a mobile phone and a free afternoon?  Look no further than the new mobile Bronx Zoo site to make the most of your day.

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?

On December 15, 2010, we launched a brand new Website for the American Institute of Certified Public Accountants (AICPA) called 360 Degrees of Taxes (www.360taxes.org). 360 Degrees of Taxes is intended for a consumer audience, specifically people interested in or having questions relating to their taxes and tax planning. It provides an Ask a CPA feature, myriad tools and calculators, answers to common questions, year round planning advice, a glossary, and much more.

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!

On Tuesday October 26th, Top Ten USA launched their site to the public. Top Ten’s main goals for the site are to move people to actively seek out the most energy efficient products and to eventually get their mark on products that rank in their top 10 list of energy efficient products. Products making it on the list join a pretty exclusive club because Top Ten’s ranking criteria is much more stringent than criteria for other energy seals of approval. The types of products that they rank range from refrigerators, freezers and dishwashers to televisions, computers and monitors.

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.

For two of our clients whose work focuses on this type of cancer, it also signifies the relaunch of their websites.  Beaconfire was thrilled to work with Living Beyond Breast Cancer and the National Breast Cancer Coalition to redesign and launch their important new sites in time for Breast Cancer Awareness Month.

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.

How do you present 637 pages of PDF report data in a meaningful, engaging Web format? That is just what Pfizer turned to the American Lung Association … who then turned to us … to figure out.

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.