A blog by the Brick Factory The Brick Factory

Conversation Through a Browser: Tips for Humanizing Websites

Imagine a conversation with an old friend over a cup of coffee. You lean back in an over-stuffed leather chair as you casually discuss politics, the news and recount all the exciting things you’ve done since you were last able to talk. Its natural, your conversation isn’t forced and you even though its been months since you last talked your conversation just flows. Your friend understands the subtleties in your tone and picks up on your humor, anger and joy as your conversations jumps among different topics. It feels great catching up and you wonder why you don’t meet up more often.

Now imagine you’re in the same old coffee shop in the same comfortable chair. This time your friend has been replaced with an odd-looking stranger. Being the nice, outgoing person you are you attempt to start a conversation. “Hello, how are you?” you ask. No response. They must not have heard you so you reach down into your wealth of conversation topics and pull out old reliable – the weather. “Great weather we’re having, isn’t it?” The stranger blinks a few times but says nothing. Your normally charming demeanor is slowly turning into annoyance. Why won’t this jerk respond? In one last futile attempt you dig up your most charming smile and say: “I just love the coffee here, don’t you?”. The stranger yawns. Feeling oddly uncomfortable, you pack up your things and walk out of the coffee shop annoyed, but mostly confused.

At first glance, these situations seem very, very different but lets take a closer look. You’re in the same coffee shop drinking the same coffee. You’re sitting comfortably on the same broken-in leather. Same amount of people. Same charming you, trying to have a pleasant conversation. In actuality the only real difference is the response from your friend compared to the lack of response from the stranger.

At this point you’re probably thinking that this has nothing to do with websites but in a way it does. My argument is that a website should be like a great conversation. As we make decisions about information structure, design, and content we should think of it in the context of the give and take of talking to an old friend. Every website has elements that a visitor is required to interact with. Whether it be the site navigation, a contact page with a form to submit inquiries, or even something a simple as a link. All these elements make up the conversation a site has with its visitors.

So lets analyze a few real world examples, shall we? Let’s start with some examples that would constitute bad web conversation etiquette. Note that for sake of avoiding insult we’ll talk in generalities about common mistakes:

The Bad: Errors when submitting forms, difficult signup processes and making it difficult to get in touch

When someone gets to the point that they are going to reach out to you via a contact form, sign up for your email list, or create an account you typically want to capitalize. These are the engaged, interested visitors you want on your site. If your account creation form spits out an error when trying to sign up, your email list is hard to join, and your contact form is nonexistent you can expect to lose these folks right off the bat. Avoid common pitfalls like asking for extraneous information about a user on signup, making it difficult to get it touch and ask questions, and nondescript form errors. Consider how your visitors would like to interact and cater the experience to them – don’t make them cater to you.

The Bad: No custom 404 error page, broken links and blatant errors

These are some of the more frustrating errors on the web. Sending a visitor to your site to the default ‘This page cannot be found’ 404 error is about as worthless as you can get. Granted, 404 errors are bound to happen but its worth the time to implement a custom 404 page that at least shows in the context of your site. For a good example check out our client Panthera’s 404 page.

The Bad: Poorly organized navigation, buried information and a weak SEO strategy

Many an organization is victim to this. Too many nav points, information burried ten clicks into the site, and unclear wording are all common contributors to a bad experience. My best advice here (for most organizations) is to approach your site structure from the perspective of a visitor with no previous knowledge of your organization. Think of the types of information that would be relevant and what types of actions they would want to take. Trust me, it will go a long way.

Now for a few examples of sites that get it right. We’ll use some real examples here as everyone deserves a pat on the back now and then:

The Good: Formly’s Form Building Process

Formly is a tool to build mobile friendly forms and collect information. I stumbled across this application a few weeks ago and I have to say, I am very impressed with the simplicity and their approach. Take for example their form builder. The introductory copy is great and their step by step walkthrough upon adding your first form field is fantastic. This is one of the better examples I’ve found of an easy-to-use, human focused product.

The Good: GoSquared’s Login Screen

Here at the Brick Factory we love the little details that go into sites and GoSquared obviously does too. Their login page is a masterpiece and shows amazing attention to detail. Things like bringing in a personal image and suggesting fixes for mistyped emails go a long ways in making an experience great. Check out their blog post for some additional details.

The Good: MailChimp’s Chimp

MailChimp has accomplished what Clippy the paper clip could only dream of. The MailChimp mascot is not only fun and lighthearted but also provides useful tips and information regarding your account and emails. This is one of the best examples of giving your site personality and a voice around. As you use their tool, its enjoyable and easy which is reflected perfectly in their visuals and tone.

Have any additional good or bad examples? Let us know in the comments!

Splashify Update

At the end of January we launched Splashify, a module for Drupal 7 that allows developers to display a splash page on their website. Since the initial release I’ve had a lot of back and forth with the Drupal community, who identified some important improvements to the module that needed to be made. I’m proud to announce that a few days ago we released a new version of Splashify that addresses the major issues identified by the Drupal community.

Here is a breakdown of what is new with Splashify:

1. Page Caching

In the early stages of the project I was handling the page redirect and display through JavaScript. However, as our Brick Factory team used the module we quickly determined things broke when turning on the “Cache pages for anonymous users” option in Drupal 7.

This was annoying because enabling anonymous page caching greatly increases the performance of pages that anonymous users would go to (such as the homepage). It was also frustrating because Drupal 7 would not run hook_init() when anonymous page caching was turned on, which broke the functionality of the module.

The solution I came up with was to re-work the module by putting the programming logic that was in the PHP code into the JavaScript instead. This allowed the module to know when and where to display the splash page even when anonymous caching was turned on.

2.Page Redirect

One option for displaying a splash page is to have the visitor redirected to the splash page before viewing the page they originally intended to visit (usually the homepage). Since we do this through JavaScript, one downside in using this option was for a brief second or two visitors would see the homepage show up before you were redirected to the splash page. This was annoying, and I knew this was unacceptable.

The problem was that there were things the JavaScript needed to process before it could do the page redirect. The solution that was implemented was to hide the whole page before the redirect happens, which prevents the homepage from being displayed before redirecting to the splash page.

I realize this is not a perfect solution, and it is not as smooth as redirecting the page through PHP. However, compared to how it looked before, this is a huge improvement and I think it is a good compromise in having all the benefits that come with this approach (search engine optimization, page caching, etc…), and still allowing for the page redirect option.

On top of allowing the splash page to show up by redirecting the visitor, Splashify also includes the option of displaying the splash page in a lightbox.

There were people who attempted to use the module in the early stages and were frustrated by these two major issues. Since making these improvements I’ve seen an increase in people using the module, with less problems.

At this point the module has about 350 drupal sites that report to using the module and about 875 downloads. This confirms there are people out there who need a module like this, and we expect with these major issues resolved the growth rate will increase rapidly.

There have been a few other smaller features added since the initial launch of the project, but the above list covers the main things that allowed us to put out this first release candidate. Our goal is release a stable version within the next few months.

It feels great to provide a module to the community that people find useful. If you have used this module, let us know what you think about it!

Get Splashify

10 Examples of Nonprofits Utilizing Mobile Applications Successfully

According to Nielson, as of March 2012 smart-phones are now in use by 50.4% of American consumers. When this statistic came out, Android dominated the market at 48.5% of all smart-phone purchases while the iPhone was in a close second at 32%. With these statistics in place, Nonprofits (NPO’s) have taken notice and have begun increasing their mobile presence through creative and unique applications. Interestingly enough, even with the aforementioned statistics, the majority of these applications have been designed for the Apple iPhone OS platform before being released for the Android OS platform, if released for the Android OS platform at all. Below is a list of 10 of the top 30 NPO’s as ranked by The Non Profit Times that have taken the plunge into mobile:

1. YMCA — YMCA Finder

The Y was ranked by The Non Profit Times as the #1 non-profit organization of 2012 with close to 20 million members and $6 billion yearly revenue. They are known for promoting through their 550,000 volunteers a healthier lifestyle choice. In order to assist their members in their path towards a healthier live, they have developed a mobile application focused upon their core competencies. Users can find where their local YMCA is, add locations as contacts, and get directions and details on the location a visitor is interested in. The Y is planning developing future versions to provide exercise tips, dietary instructions, and even job listings.

2. United Way (of Central Iowa): Volunteer Mobile App

United Way, ranked 4th by The Non Profit Times, is a support organization that is concentrated on assisting the common good and well being of all through education, financial stability, and healthy lifestyle administration and support systems.  With their focus applying to all those in need of help, United Way of Central Iowa decided to develop a mobile application that brings their target audience and volunteers together. The application allows volunteers to view new potential opportunities to help out and give immediate feedback about any inquires they may have. In addition, you can share the posts with your social network to spread the word to all other volunteers in the area. Lastly, the application allows you to view the opportunities by title and to save your favorites so you can keep track of when events are coming up.

3. American Red Cross: Disaster Response Apps

Started here in Washington, D.C. by Clara Barton on May 21st, 1881 the American Red Cross has been a leading humanitarian organization that now provides over 40% of blood and blood related products across the nation.  Ranked at #5 by The Non Profit Times, the American Red Cross specializes in disaster recovery, support for families of the armed forces, blood collection, distribution, and processing, health and safety training, and education, and lastly international relief and development. Being specialized in all of these different areas has led this non profit to provide a number of different mobile applications for their users to become more aware and better prepared for all of their safety needs.  Recently, as a result of Hurricane Sandy, Irene, and Katrina, the Red Cross has released a hurricane application with a number of different options to help individuals and families to weather the storm.

Features

  • One touch “I’m safe” messaging allows users to broadcast reassurance to family and friends via social media
  • Location-based NOAA weather alerts users can share on social networks
  • Personalized weather alerts where family and friends reside
  • Locations of American Red Cross shelters
  • Create a family emergency plan
  • Instant access to critical action steps even without mobile connectivity
  • Toolkit with flashlight, strobe light and audible alarm
  • Gamification makes the app interactive through quizzes and badges they can share on social networks

4. Salvation Army: Bellringer

The extensive history of The Salvation army still lives on through this age old organization that can be most noticeably recognized around the holiday season. Bellringers on street corners now have a new tool besides a red kettle pot and a bell to gain the attention of donors. Recently, The Salvation Army released a “Bellringer application” that allows users to ring a bell in support of the bellringers cause around the holiday season. In addition, Sprint has donated a number of Android telephones and mobile credit card readers so that individuals passing by can donate even when they don’t have a dollar to toss in the red kettle. This fun and noisy little application turns anyone into an instant volunteer and is an attempt to gain the attention of the younger generation that may not be as educated to the cause of the Salvation Army to begin with.

5. Habitat for Humanity

Habitat for Humanity was founded in 1976 as a nonprofit, nondenominational Christian housing ministry that focuses on building and repair homes for those without adequate shelter. Since their founding they have worked on over 500,000 homes and have impacted the lives of over 2 million people globally. In order to continue impacting the lives of the many, Habitat for Humanity has developed HabitAPP in attempt to promote more awareness. Users will have the ability to know more about the situations and projects that are going on in the area, sign up as a volunteer, and donate.

At the bottom of the application, users can choose to see news from the Habit for Humanity headquarters, upcoming events, exact event locations with directions, what is going on in social media, photos and videos from events, download donation or volunteer sign up forms, contact the HFHWC directly, or share their thoughts through a number of social media channels.

6. Smithsonian Institute: Mobile App

The Smithsonian Institute, named after James Smithson, was established on Aug. 10, 1846 as an establishment for the enlargement and distribution of knowledge for mankind. Since the Smithsonian’s establishment, they have continued to compile a vast amount of information and artifacts that they share with their audience through both a magazine and a number of different museums, each with its own unique focus and exhibits.

7. World Vision: Mobile App

World Vision, a Christian humanitarian organization, works primarily with families, children and people within their communities globally to fight poverty and inequality. To accomplish their goals, World Vision relies upon expert journalism and work from their staff and dedicated volunteers to share stories to open others eyes alongside beautiful photos and inspirational videos.

Through the World Vision Now iPhone app, users can:

  • Follow news and stories written by World Vision journalists
  • Receive alerts and updates on the latest and ongoing crises.
  • Read thought-provoking features by international relief, development, and advocacy experts
  • Hear from World Vision U.S. President and best-selling author, Rich Stearns
  • Follow commentary on current events
  • Identify where giving will impact the most
  • Discover advocacy opportunities
  • Subscribe to receive time-critical notifications.
  • View region-related stories through an interactive world map
  • Search stories
  • Share links, stories, and videos on Facebook and Twitter

 

8. The Nature Conservancy: Nature Near You

Founded in 1951, The Nature Conservancy has strived to conserve the earth and waters as the world’s leader conservation organization. Through the combined efforts of over 550 scientists and many partners, they have found innovative ways to ensure our environment receives what it needs to remain healthy, and diverse. In order to keep individuals more educated and interested in the well being of the planet, The Nature Conservancy recently released Nature Near You, a mobile app incorporating photographs, social media, and interactive maps of the natural world surrounding the user. Nature Near You encourages users to take their own photos of the natural world and share their perspective with an online community, in addition to a number of other applications. Below are a number this free application allows users to do in order to communicate the visual stimulating natural elements around them to other users:

  • Built in camera that allows users to directly capture their own nature photography within the app
  • Social sharing feature with ability to upload to Twitter, Facebook, email or The Nature Conservancy’s Flickr page.
  •  Nature Photo of the Day
  •  Recent photos taken by others using the Nature Near You app
  •  Map view of photos taken using the Nature Near You app with ability to zoom in by location or region
  •  Nature preserve map to find preserves by location or region
  •  Donation page for online and text donations
  •  Mobile wallpaper download section
  •  Nature News section

9. American Cancer Society: More Birthdays App

The American Cancer Society (ACS) is a voluntary community-based, nationwide health organization with a focus on eradicating cancer. For nearly over the past 100 years, ACS has gathered millions of supporters in more than 5,100 communities, 12 charted divisions, and over 900 local offices. With a strong force of dedicated individuals fighting to finding a cure, assisting those in need, and educating the masses more people are celebrating more birthdays.

Now the ACS has released the More Birthdays App to not only help you remember someone close to you on their special day, but to celebrate it with them. The application links your contacts from your Facebook account, and like a calendar the More Birthday’s App sets up alerts so that you always have a leg up on your friends and family and their upcoming birthdays.  From the application you can send customized birthday greetings, and can even create your own special birthday cake (which you can blow out the candles on top by blowing into the microphone!).

This application also gives you access to the ACS mobile site so that users can also learn and help everyone celebrate more birthdays with their loved ones.

10. The Boy Scouts of America: Boy Scout Handbook/Merit Badge app

As a very well known youth development organization, The Boy Scouts of America have built a foundation of leadership, citizenship, education, and physical fitness that has shaped young individual’s characters for nearly a century. By providing young people with the values and skills they would not otherwise gain through fun and thought provoking experiences, they have developed a basis for a full and responsible lifestyle.

The Boy Scout Handbook provides any Boy Scout with countless tips and advice on types of foliage to eat to how to set splints for broken bones, even where to look for clean drinking water. For the Boy Scout on the go, now there is a mobile application that is accessible even when the furthest cell tower is miles away. Through this application any Boy Scout will have the ability to locate the information they need to resolve any issue they encounter.

In addition to the Boy Scout Handbook going mobile, scouts will also be able to track their progress towards new merit badges through another mobile application. Through the home screen of the merit badge application a boy Scout will be able to see what badges they have collected and the requirements for their next one. The new badges can be shared via social media, and Scouting news is also uploaded to the user’s phone.

With this mobile combination, every scout has what they need to be all they can be and more.

 

Five More Nifty Drupal Modules

Back in February I wrote about Five nifty Drupal modules we use, and I thought it was time to add to the list of the ones we have found very useful.  Please note that the availability of these modules may vary across the different versions of Drupal (5, 6, and 7), and in some cases module features and functionality differ some as well based upon Drupal version.

1. Boost

We have found that Drupal’s out of the box caching functionality is very helpful in improving the performance of our sites.  However, there are very few ways to configure the caching.  That’s why we like Boost; it allows us to configure caching more.  For instance, the module allows us to disable caching on specific pages while leaving it enabled on the rest of the site.  In regards to Drupal 6, it also has a much more efficient cache due to the fact that it is a file-based cache instead of the database based cache built in to Drupal.

2. ThemeKey

A theme is a basic design template for a Drupal site.  Drupal sites can have multiple themes.  In some cases we use one theme for the main version of a site while we use another theme for the mobile site.  However, there are times when a section of a site needs a different theme – regardless if it is viewed using a mobile device or not.  We recently implemented a blog section of a client’s site, and we used ThemeKey for that purpose.  There are many rules you can set up to govern which pages use which theme, and in this case we based upon the node’s alias.

3. Colorbox

On many of our sites we use pop-ups for splash pages, social share options, image and video embeds, and other similar content.  The Colorbox module provides such functionality and is very helpful when setting up pop-ups.  While this is not a surprise, it is nice that one can use css to modify an pop-up’s appearance.

4. Features

We are constantly tweaking and adding functionality to many of our Drupal sites.  Before we implement major changes, we’ll get them set up and approved by our clients first on our development sites before pushing them into our production environments.  Pushing new and reconfigured content types, modules, blocks, and similar features from a development to production environment is tricky at times since the environments are rarely truly synced.  Further, in some cases this requires that one remembers a multitude of changes to settings. The Features module provides mechanisms that aid in this process by allowing users to export new features from a development site as a module for installation in another environment.

5. Google Analytics

I’m not a big fan using modules for simple things like adding Google Analytics tracking script to sites.  That’s simple enough to do.  However, sometimes once you look closer, modules like this have a lot more to them.  For instance, this module allows you to control when the tracking script appears on the site.  One common thing to do is to not display the script for admin users.  Why would you want to track what you or your staff is doing on the site when what’s important are the actual site visitors?  This module allows you to control that.  Another cool feature is it allows one to add custom variables for custom reporting purposes using a very easy interface.  Thus, one doesn’t need to understand how to modify the script properly execute these changes.

The Advantage of Time

As someone who has spent some time consulting for political campaigns,  I always find the post mortems that pop up fast and furious after election day predictable and simplistic.  The winner is a genius.  The loser is a moron.  Nuance is generally sacrificed at the alter of the greater narrative. 

Having been in a few fox holes, I can tell you that things are never as black and white as they are made to appear.  The winners aren’t as smart as they look and the losers aren’t as dumb.  So I take all these articles that are popping up about the Obama and Romney digital campaigns with a healthy grain of salt. 

Having read a bunch of post mortems, I think the one thing that is being actually being understated is the huge head start the Obama campaign had from a technology and data perspective.  The Romney campaign was playing catch up, with no real chance of ever evening the race on this front.  Let me dive in.

Project Orca

For Romney, the big post-election narrative revolves around the failure Project Orca.  Project Orca was the Romney campaigns ambitious effort to get detailed analytics on activity at each polling place in the country.  If implemented correctly, this system would have allowed the campaign to make strategic decisions on election day about where to focus precious last minute GOTV resources.

I won’t go into detail here, but it didn’t work.  At all.  Ars Technica has a good summary of the project’s failures.

The Romney campaign is taking a beating over the failure of the system.  From the stories I’ve read, most seem to attribute the failure to poor planning, disorganization and incompetence.  All I know is what I’ve read, but I tend to be a bit more forgiving of the Romney campaign then the press. 

For obvious reasons, the Romney campaign didn’t start building Project Orca until the end of the GOP primaries.  Project Orca was built in a compressed timeframe (six months) during the heat of the campaign.  From experience, I can tell you the last days of a campaign are a terrible environment for software development.  People are tired, overworked and frazzled.  Most campaign staff have no background or understanding of the software development process.

Building custom software is hard work in ideal conditions.  Deadlines are often missed and unanticipated issues inevitably pop up.  Building something as ambitious and important as Project Orca in six months in the hot house of a political campaign is a recipe for disaster. 

I credit Romney campaign for their effort, but given the environment in which it was built Project Orca was always more likely to fail than to succeed.  For Project Orca to work, it needed to be planned years in advance and likely spearheaded by the Republican Party itself,  since there was no anointed candidate to drive development. 

Obama Advantage

For Obama, the narrative is about the team’s use of data gleaned from six years of near constant campaigning to optimize everything about its effort.  Here are a few of the tidbits that have come out:

  • In 2008, the Obama campaign didn’t really have a central database containing all of its data about voters.  Immediately after winning the Presidency, the Obama campaign started building a central database containing all data.  The effort was code named Project Narwhal.  Source
  • The campaign launched a Quick Donate tool that allowed donors who signed up to give with a single click.  The campaign estimates that the tool “netted the campaign about $60 million more than it would have raised with email blasts alone.”  Source
  • The Obama campaign conducted extensive A+B testing on all aspects of the program.  The campaign estimates that the move to a four step donation process resulted in a 15% increase in conversions on the page.  That is huge.  Source
  • In 2008, the campaign’s volunteer organizing tool, My.BarackObama.com, was hailed as one keys to their success.  In 2012 the Obama campaign launched a new version of the tool, labeled Dashboard, that the campaign claims was even more effective.  Source

Bottom Line

You get the picture.  The Romney campaign was still putting together the building blocks of its digital infrastructure up until the last day of the campaign.  Since the Obama campaign already had the building blocks in place, it’s focus was on analyzing six years worth of data to optimize efforts that were already working pretty well.  I suspect the Romney campaign was well aware of their disadvantage, as they frequently would mimic tactics deployed by the Obama campaign (Quick Donate, contests, etc.).

No matter how smart and talented the Romney campaign was, from a technology infrastructure and data perspective, they were at a huge disadvantage.

While probably an overstatement, the analogy that comes to mind to me is a well funded search start up trying to take on Google in the search space.  Google has spent fourteen years tweaking and refining its algorithm.  No matter how well funded or brilliant a new challenger might be, it is going to be nearly impossible to build something more advanced. 

From a technology and data perspective, the playing field simply wasn’t even in 2012.