Best Practices for Government Web Design

WASHINGTON, DC – On November 15th, 2010, inQbation LLC delivered ACUS.GOV to the Administrative Conference of the United States.  The success story is that we completely redesigned, developed, migrated content, complied with Section 508, and delivered a new website to the Federal Government in less than 7 weeks and under $30,000 USD.

Before Redesign

ACUS.GOV before website redesign by inQbation

After Redesign

ACUS.GOV after redesign by inQbation

How to build a website quickly and efficiently

First of all, I can’t say enough great things about the client.  Kathy Kyle, the Communications Director for ACUS.GOV had a rock solid deadline based on a very important meeting, which was basically the debut of ACUS.GOV after a several year hiatus.  Kathy was full committed to launching this website on time.  That sense of urgency and commitment from the client was crucial to our ability to get this thing launched quickly.

Indeed, 9 times out of 10, if our project is delayed, it is usually because we cannot get content or decisions from our client.  Without content or decisions, the web design project cannot progress.

Agile Web Design and Development

What really kept us on tract was our Agile Development methodology based on the Scrum model and our four distinct phases of the web design life cycle.  The first thing we did was break up the project into four distinct sprints:

  1. Discovery
  2. Design
  3. Development
  4. Deployment

Each sprint was about 2 weeks.  In the beginning of each sprint, we assigned a team and their tasks.  They all knew the deadline and exactly what needed to be done and how many hours they were allowed to burn.  At the end of each day, everybody reported their hours and status of their task.  We kept in constant contact with the client and gave her daily status reports and weekly roll-ups.  We also let her know exactly how well we were, or were not, staying on track.

Discovery

In the Discovery phase of the project, we took an Outside-In Approach to web design and usability.  We wanted to know exactly Who would have the urge to visit this website?  What kind of information would they seek?  What kinds of things or activities would they like to do on the site?  Then, we flipped the coin.

Based on these well defined targeted visitor segments, What is the organization’s goals and objectives for each target audience?  What do we want them to come away with?  What do we want them to know?  What do we want them to do?

Based on all this information, we developed use cases and this was the basis for our User Acceptance Testing (UAT), that we would perform at the end of the project to make sure we fulfilled the goals and objectives of the site.

We also did a content inventory and decided which content should be permanently archived or retired, which content needed to be refreshed, and which content needed to be developed or acquired.  From there, we created an information architecture (IA) and a site map.  We were also able to define various page types that would need to be defined in order for the database-driven content management system (CMS) to render pages consistently.

After all this was done, we created a series of wire frames as a communications tool with the client to:

  1. Determine page layout without getting bogged down in colors and font styles
  2. Identify all of the data elements that needed to be modeled
  3. Focus on web usability and apply best practices and conventions

Below is a sample of a wire frames we developed for the home page:

Design

Once we settled on the wire frame layouts of the home page and all the unique inside page types, we set our sights on designing the look and feel of the site.  We assigned three designers to each take the Discovery documents into their own separate studio and come back with a unique mock-up.  The following mock-ups were a result of this process:

Alpha

Bravo

Charlie

Development

Once we settled on all of the designs, we cut the images into HTML/CSS and then converted them into templates.  The two content management systems (CMS) that we were considering were Drupal and WordPress.  Both are open source software products that typically run best in a LAMP environment.  In the end, we chose WordPress because of its ease of use (usability) on the back end for web content management.  Had this been a more enterprise level Department of large Agency within a Department, we probably would have chosen Drupal.  But, for this small Agency, WordPress was a perfect fit.

After we create the themes and implemented the WordPress content management system in our development environment.  We migrated the content over to the development server, performed Section 508 Compliance and search engine optimization (SEO) best practices.  We also branded the social media sites and integrated the social media icons (Chicklets) and content syndication.

Deployment

Deployment was basically working with ACUS.GOV to find a secure, FISMA compliant web hosting company, promoting the staging site to the live site, collaborating with DotGov.gov to repoint the DNS and then perform quality assurance on every single page and link of the website.

Once we were satisfied that there were no broken links, invalid HTML or CSS, or Section 508 deficiencies, we performed User Acceptance Testing (UAT), and turned over the keys to the agency.  After about 2-3 hours of hands-on training, ACUS.GOV took control of their site and launched it just in time for their plenary session.  The timing was perfect and everybody was thrilled with the results.

Lessons Learned

So, that’s how you deliver a website quickly, efficiently, and cost-effectively for the Federal Governments.  There is no need for $40,000 toilets or $2,000,000 website maintenance staffs.  An agile development team, effective content management system, cloud hosting, and a great client with a sense of urgency is all you need to deliver a great product and great value to the Federal Government and U.S. tax payers.