Here's the thing - Bolt | Peters was acquired by Facebook. This site will live on.

Designing the Google Sites H1N1 / Emergency Templates

Posted on Nov 23rd, 2009 by Nate Bolt
591 comments

Google Sites Public Health Template

Bolt | Peters recently collaborated with Stanford University’s Bill Behrman on designing the Google Sites template for local governments to use as a backup to deliver information on the H1N1 outbreak, and also disasters in general. Here’s the story!

The Quick Fix

With the recent outbreak of H1N1, Santa Clara County’s official public flu information site was taken down by the surge in web traffic. To help relieve the demand, the Stanford Social Innovation and Entrepreneurship Program stepped in literally within hours of the interruption to create an ad hoc backup site using Google sites, just so people could still access the critical info. This is what they originally posted:

The original Stanford / CDC stopgap design

Stanford's original stopgap design (click to view site)

After the site went up, Stanford trained the Santa Clara County staff, who maintained it and added their own information. Santa Clara County had to get the site up in a hurry, and they were just happy to have a site that could handle the traffic and get the information out—which is to say, there wasn’t a whole lot of time to think about design.

This experience made it clear that it would be valuable to create a well-designed, easy-to-edit template for local governments to distribute information in case of emergencies—not just H1N1, but any public hazard, including floods, earthquakes, wildfires, and so on. That’s where we came in.

Bill contacted us in late October with the original draft of the website. Since it was important to make the site available as soon as possible to deal with the ongoing H1N1 outbreak, so the timeline we had for design recommendations was really brief—just a few days. With that in mind, we got to work.

Spotting the Problems

Because of the layout restrictions, our design evaluation focused primarily on information design. We had two main issues with the early design, along with a handful of usability tweaks here and there.

Picture 11

1. It lacked a clear visual hierarchy.

With two columns of equal width and mostly indistinguishable boxes filled with text, it was hard to tell at a glance what information was urgent, time-sensitive, or recently added.

2. Big chunks of info, no organization.

The info wasn’t grouped into meaningful categories—there wasn’t much visual or spatial distinction between contact info, prevention info, calls to action, and so on, making it difficult to zero in on information even if you know what you were looking for. Also, the info came in big blocks of unscannable prose, and deep reading is the last thing you want to do when you’re trying to learn about the tsunami headed your way.

3. It didn’t anticipate the distinct needs of the most critical user segments.

There was plenty of good info on the site, but it was never clear who a given piece of info was for—you couldn’t scan the page headers and think, “Yeah, there’s what I’m looking for”. Instead it had a “general audience” feel to it; the info didn’t take into account that different groups might have different needs and different levels of urgency.

4. Buried info.

Vital info on vaccines, symptoms, and SMS / Twitter updates was absent from the front page entirely, lurking deep in the navigation.

Our Top Recommendations

To keep editing simple for the the local government end-users who would be using the template, we had to stick to using the WYSIWYG Google Sites editor, which meant no custom CSS and very little control over layout. We also had literally a single day to make our recommendations and synthesize them into a first-draft mockup—the result wasn’t pretty, but got our main info design recommendations across loud and clear.

Our first stab at redesigning the H1N1 template

Our first stab at redesigning the H1N1 template

Redesign Goal #1: Prioritize information according to the urgency of visitor need.

Our design takes into account that there are different “general public” user segments with different goals, and that there are tiers of urgency and priority. From most-to-least urgent, we identified these segments:

  • People infected with the flu: Seeking immediate help
  • People worried that they might have the flu: Self-diagnosis
  • People concerned about catching and/or spreading the flu: Preventative measures and vaccine info)
  • People just curious, staying informed: Information about travel restrictions, public response, news updates, deep flu info.

The structure of the site was altered to serve each of these segments:

1. We added a page-width alert box that would be displayed to convey urgent, time-sensitive info—this is a common feature on many of Google’s sites, as well as CNN.com.

2. A yellow-shaded box to give the highest priority group, currently affected individuals, clear instructions on what to do.

3. The left-column contains info on self-diagnostic and preventative measures for at-risk or concerned individuals.

4. The top-right contains info on vaccines; below is links to deep info, research, and update notifications. Though the Google Sites template didn’t allow us to resize the right column, we noted that it should be made smaller than the left column.

5. The left sidebar navigation was reserved for redundant quick links to most important info, as well as links to pages for specially affected individuals and organizations.

Redesign Goal #2: Reduce block text down to easy-to-scan lists and chunks. Cut the bureaucratic BS.

We broke down the block text to keep from overwhelming users with too much difficult-to-scan information upfront. Lists were kept to under 8 items long, unless they broken down into categorized sub-lists; text was kept under five lines. All information that couldn’t be condensed in this way was moved to lower-level pages, and linked from higher-level pages.

Users don’t need to know what the mission statement and goals of the organization are; they just want to know if and how they are personally affected, and what they can do in case they are affected.

Redesign Goal #3: Use informative headers that directly address user goals, and which give all users clear next steps.

All types of visitor (e.g. directly affected, at risk, concerned, just curious, administrative, medical, etc.) should be able to tell by the header if that information is “for them”. We tweaked the headers to make it clear what kind of info you could find in each section. We also made it clear what, if anything, each user segment needed to do:

  • Immediately affected individuals are given step-by-step instructions on how to deal with their emergency situation(s).
  • At-risk individuals are given step-by-step information on preventative, precautionary, and self-diagnostic measures.
  • Individuals seeking non-urgent information can be given supplementary external information resources (by phone, online, and downloadable / printable) and means to stay updated (by email, text, RSS, Twitter).
  • Urgent contact info is immediately visible in the right sidebar.

The First Revision

After we sent over our recommendations and mockup, Bill sent us a nice note a day or two later:

You’ve convinced us that we have to completely rethink and redesign the site from scratch, so your style guidelines come at a very good time. I can’t thank you enough for opening our eyes to how we can do this in a much better way. I think we can create a site that works much better than the original site.

…and then a few days after that, Stanford sent a revised version over to Google, who worked with the design firm OTT Enterprises to create two new designs with some added visual design flourishes.

Unfortunately we don’t have permission to show you this revision yet (working on it), but it wasn’t bad—it was certainly cleaner and better organized, easier to scan, less dense. There was, however, a large distracting green gradient background, some empty space in the sidebar columns, a few stock photos, and a muddled color palette (green, blue, yellow, and gray).

Our second batch of suggestions focused mostly on visual design and layout. Just a few of them:

Visual Design

  • Get rid of the gradient background; it’s distracting and confuses the emphasis on different parts of the site, since it runs behind multiple different elements.
  • Get rid of the green coloring, which is tertiary to the blue and yellow. Instead, use several shades of blue as the primary color and a little light beige or light grey as a secondary trim. Blue signifies authority, calmness, trustworthiness, etc., which are of course appropriate here. Notice how almost every major government agency’s website (including the CDC) uses dark blue and gray as the main colors.
  • Remove the stock images, including the CDC and Flu.gov widget images, which look like ads. The phone and email icons are fine, however.
  • Rather than images, make the content headers stand out with size and strong typography—”make the content the focus” is an old web design adage, and the content, in this case, is the flu information. Here are a bunch of sites that use typography, font size, whitespace, and bold layout to create emphasis, using few images [list of a bunch of websites].

Layout

  • Header and upper-page content takes up way too much space—note that the important info (“If you or your child…”) doesn’t begin until more than halfway down the screen. Compress.
  • I like how Design #2 places the alert and contact info in the sidebar; in Design #1 the sidebar is wasted space. This frees up space to move important info (Vaccine and How to Care for Someone With The Flu) up to the right side.
  • This design consists mostly of links to deeper pages, but there’s definitely room to put more specific, useful info right on the homepage: symptoms, preventative measures, vaccine info (see our original design)
  • Get rid of the Contents box.

The Results

Stanford started over once again, aided by our style guide and input from OTT Enterprises. After further iterations in Google Sites, they handed it over to the Google visual designers, and here’s the before-and-after:

The original Stanford / CDC stopgap design

Google Sites template, super rush draft

Google Sites Public Health Template

Google Sites Public Health Template 1.0

Want to give your feedback?

As with all things on the web, the template is a design-in-progress, and will be improved as time goes on. Here’s where you can send feedback for the Public Health template and the All Hazards template. Since these Google Sites templates are available to everyone, you can even make your own design edits and mock up improvements.

Or if you just think it’s great and you just want to use it yourself, here’s the complete list of links:

Google’s blog post

Public health sites:
Template
Example site
User guide

All hazards sites:
Template
Example
User guide

Stanford site (we’re credited here!)

>> Follow Bolt | Peters on Twitter

Tags: , , , , , , , , , ,

591 Responses to “Designing the Google Sites H1N1 / Emergency Templates”

  1. Hello, I think your blog might be having browser compatibility issues. When I look at your blog in Firefox, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, fantastic blog!


  2. Hello! I know this is kinda off topic but I was wondering which blog platform are you using for this site? I’m getting tired of WordPress because I’ve had problems with hackers and I’m looking at options for another platform. I would be fantastic if you could point me in the direction of a good platform.


  3. sos alabama gov
    Dec 19, 2016

    Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.


  4. DelphaGClery
    Dec 19, 2016

    As the admin of this web page is working, no uncertainty very quickly it will be well-known,
    due to its feature contents.


  5. AldenUMoskau
    Dec 19, 2016

    I am really loving the theme/form of your weblog. Have you ever encounter
    any internet browser compatibility problems? A amount of my blog audience have complained about my
    site not working correctly in Explorer but looks great in Firefox.
    Are you experiencing any suggestions to help
    you fix this problem?


  6. Jen Gullick
    Dec 19, 2016

    In the event you happen to excited about eco items, sometimes be tough shock to anyone them recognise that to assist make unique baskets just for this quite liquids carry basic steps liters associated ceiling fan oil producing. dc free of charge mommy weblog giveaways family trip home gardening home power wash baby laundry detergent


  7. Outlaws-Nf.Com
    Dec 19, 2016

    There is certainly a great deal to learn about this topic.
    I love all the points you’ve made.


  8. buy cbd online
    Dec 20, 2016

    Hmm is anyone else encountering problems with the pictures on this blog loading? I’m trying to find out if its a problem on my end or if it’s the blog. Any feedback would be greatly appreciated.


  9. forex analysis
    Dec 20, 2016

    I know this if off topic but I’m looking into starting my own blog and was curious what all is required to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very internet smart so I’m not 100% certain. Any tips or advice would be greatly appreciated. Cheers


  10. The other day, while I was at work, my cousin stole my apple ipad and tested to see if it can survive a 30 foot drop, just so she can be a youtube sensation. My apple ipad is now destroyed and she has 83 views. I know this is entirely off topic but I had to share it with someone!


  11. finger vibrator
    Dec 20, 2016

    please visit the internet sites we stick to, such as this a single, because it represents our picks through the web


  12. I know this if off topic but I’m looking into starting my own weblog and was wondering what all is required to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very internet savvy so I’m not 100% certain. Any suggestions or advice would be greatly appreciated. Kudos


  13. tummy
    Dec 20, 2016

    Hi! Do you use Twitter? I’d like to follow you if that would be okay. I’m definitely enjoying your blog and look forward to new posts.


  14. remove pimple scars
    Dec 20, 2016

    Heya! I’m at work browsing your blog from my new apple iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Keep up the outstanding work!


  15. talen crispr
    Dec 20, 2016

    Terrific post however , I was wanting to know if you could write a litte more on this topic? I’d be very thankful if you could elaborate a little bit further. Cheers!


  16. I am really enjoying the theme/design of your site. Do you ever run into any web browser compatibility issues? A handful of my blog audience have complained about my site not working correctly in Explorer but looks great in Safari. Do you have any advice to help fix this issue?


  17. anxiety disorder
    Dec 20, 2016

    I’m curious to find out what blog system you’re using? I’m having some minor security problems with my latest blog and I would like to find something more safe. Do you have any solutions?


  18. Yesterday, while I was at work, my cousin stole my apple ipad and tested to see if it can survive a 30 foot drop, just so she can be a youtube sensation. My iPad is now destroyed and she has 83 views. I know this is completely off topic but I had to share it with someone!


  19. scar treatment
    Dec 20, 2016

    I’m curious to find out what blog platform you are utilizing? I’m having some minor security problems with my latest blog and I’d like to find something more risk-free. Do you have any recommendations?


  20. check my source
    Dec 20, 2016

    I just want to say I’m beginner to blogging and site-building and really savored your web site. Almost certainly I’m planning to bookmark your blog post . You absolutely come with incredible articles and reviews. Thanks a bunch for revealing your website page.


  21. itb student email
    Dec 20, 2016

    Hi there I am so happy I found your blog, I really found you by error, while I was looking on Digg for something else, Nonetheless I am here now and would just like to say many thanks for a fantastic post and a all round exciting blog (I also love the theme/design), I don’t have time to read it all at the minute but I have bookmarked it and also added in your RSS feeds, so when I have time I will be back to read more, Please do keep up the great job.


  22. Tongue Vibrator Toy
    Dec 20, 2016

    Wonderful story, reckoned we could combine some unrelated data, nonetheless really worth taking a search, whoa did 1 discover about Mid East has got much more problerms as well


  23. Does your blog have a contact page? I’m having trouble locating it but, I’d like to send you an email. I’ve got some recommendations for your blog you might be interested in hearing. Either way, great blog and I look forward to seeing it develop over time.


  24. bounding bunny,
    Dec 20, 2016

    Every once in a whilst we choose blogs that we study. Listed beneath are the most up-to-date sites that we select


  25. how to build a pier
    Dec 20, 2016

    Hi just wanted to give you a brief heads up and let you know a few of the pictures aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different browsers and both show the same outcome.


  26. itb travel
    Dec 20, 2016

    Hello I am so glad I found your blog, I really found you by accident, while I was searching on Digg for something else, Nonetheless I am here now and would just like to say thanks a lot for a marvelous post and a all round interesting blog (I also love the theme/design), I don’t have time to read it all at the minute but I have book-marked it and also added in your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the superb job.


  27. Right now it sounds like WordPress is the top blogging platform available right now. (from what I’ve read) Is that what you are using on your blog?


  28. visit site
    Dec 20, 2016

    I just want to say I am new to weblog and really savored you’re website. More than likely I’m going to bookmark your site . You actually have outstanding well written articles. Thanks for sharing with us your web page.


  29. Fetish Fantasy
    Dec 21, 2016

    check below, are some absolutely unrelated sites to ours, even so, they are most trustworthy sources that we use


  30. I just want to tell you that I am beginner to weblog and actually loved your website. Most likely I’m likely to bookmark your website . You definitely come with exceptional article content. Bless you for sharing with us your web site.


  31. I just want to say I’m newbie to weblog and absolutely liked your blog. Probably I’m going to bookmark your site . You definitely come with fabulous articles and reviews. Many thanks for revealing your website page.


  32. melbourne decking
    Dec 21, 2016

    Howdy! Do you know if they make any plugins to safeguard against hackers? I’m kinda paranoid about losing everything I’ve worked hard on. Any recommendations?


  33. Please let me know if you’re looking for a writer for your blog. You have some really good articles and I feel I would be a good asset. If you ever want to take some of the load off, I’d really like to write some articles for your blog in exchange for a link back to mine. Please blast me an email if interested. Thank you!


  34. nec lcd projector
    Dec 21, 2016

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You definitely know what youre talking about, why throw away your intelligence on just posting videos to your weblog when you could be giving us something informative to read?


  35. Greetings! This is my 1st comment here so I just wanted to give a quick shout out and tell you I really enjoy reading through your articles. Can you suggest any other blogs/websites/forums that go over the same subjects? Thank you so much!


  36. hawaii
    Dec 21, 2016

    Hi there this is somewhat of off topic but I was wanting to know if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding experience so I wanted to get advice from someone with experience. Any help would be enormously appreciated!


  37. towing company
    Dec 21, 2016

    just beneath, are a lot of totally not connected internet sites to ours, having said that, they’re certainly worth going over


  38. skin rashes
    Dec 21, 2016

    Hey fantastic website! Does running a blog similar to this take a lot of work? I have absolutely no knowledge of coding but I was hoping to start my own blog soon. Anyway, should you have any ideas or techniques for new blog owners please share. I know this is off subject however I simply needed to ask. Cheers!


  39. In fact no matter if someone doesn’t be aware of then its up to other users that
    they will help, so here it happens.


  40. find more info
    Dec 21, 2016

    Just bought a new laptop, not sure whether there is a way to take firefox bookmarks from old laptop to new laptop.. . Thanks..


  41. Buy the most awarded Gourmet Kona Brands! Direct from Kona buys on strong farm fresh ground Gourmet Coffee or Gourmet Kona Coffee Beans.