DC.Gov

The goals
The portal aims to reflect a strong commitment to transparency, open government, the integration of social media, accessibility and the thoughtful application of new web technology to serve the local residents of the District, such as the use of an open source CMS, responsive design and the increasing use of mobile apps.

The requirements
The main requirement was to repurpose content already being published by the almost 100 agencies already migrated to the Drupal CMS. The theme involved identifying already developed templates and views and establishing a homepage design which identifies and highlights certain content from these agency sites.
The new design was also required to address many (not best practice) issues from the old portal, including:

1. Information Architecture (IA) – site structure: content driven, citizen-centric, improved search
2. Responsive Design: resize according to the device being used
3. Improved Look and Feel: clean design, no large photos/imagery (not graphics heavy), not about federal presence (no monuments to be showed) and removal of heavy dark background.

The challenges and outcomes
There were three main challenges: time constraint, infrastructure, and limited resources.

1. Time Constraint
Due to ongoing delays to the agencies being migrated to Drupal the final project step (redesign of the DC.Gov portal itself) was also delayed substantially. As the main goal was to implement the DC.Gov as the first responsive design other design enhancements were scrutinized and priority of work was assessed to ensure completion in a limited timeframe. The priority work focused on implementing base generic styles and reusable functionality.

2. Infrastructure
Drupal was implemented at a crucial part of the project (as the issues with the initial CMS were discovered) and the infrastructure and architecture assessments, that are so important at the planning stage, were rushed but would require review and flexible adaption as more sites were added to Drupal.

3. Limited Resources
The final main challenge was the small number of resources assigned to the project. The team involved in the final DC.Gov redesign itself included a Business Analyst, a Designer, two Drupal Developers and during certain key tasks, the OCTO web team were involved in testing and requirements gathering.

Annotated Homepage (below):

1. Responsive Design
Visitor statistics to DC.Gov are showing an increased level in mobile access (from 1% of the visitors in 2009 to currently 33% and rising) so it was important to ensure all content could be easily read and accessible for mobile devices, including all homepage elements which were designed to allow for 50px in height for every link. Responsive design was implemented using four default breakpoints from the Omega theme to allow for a variety of device sizes.

2. Bringing Important Services to the Top
During analysis of visitor traffic we were able to identify the top services accessed and as they were published as a Service Content Type, this content could be tagged to displayed on the DC.Gov’s homepage under the Service section. The implementation involved the Drupal Panels module allowing the changes to be made by editors as required and as the trend in service access changed. The fundamental IA consideration is that visitors come to a government website to either find information and/or services as quickly and easily as possible. Although Services were seen as the most important content the design still required some imagery and the compromise was to display the Featured Content Carousel at the top at the desktop and tablet breakpoints but for the mobile breakpoint move the slider further down and bring services to the top of the screen.

3. Tabbed News, Events and Alerts
DC.Gov is a content heavy site, the design required components that better display bulk content at once. The use of the Tabbed block brings together two different views (News and Events) and an RSS feed (Alerts).

4. Optimization for Touch Screens
With limited resources it became important to identify base styles that could be reused at all breakpoints. This initial limitation became a benefit as the styles for link sections on the homepage were then already sized for mobile and the same styles could also be used for computer touch screens.

5. Accessibility
All elements of the new DC.Gov design were checked for accessibility compliance and the use of the Readspeaker Drupal module also provides the ability to read the page on computers or mobile devices.

6. Improved Information Architecture (IA) and use of a Sticky Menu
DC.Gov has the same challenge as other government websites as it is a content heavy site. Establishing an IA that allowed for improved content structure required a rethinking of what menu items should be top level. Fortunately, the implementation of Drupal ensured a clear and useful taxonomy that could be used to establish an improved menu structure, which was then implemented using a sticky menu (allowing the visitor to access the menu as they scrolled down the page).

7. Clean Look and Feel
Not overcrowding the page with too much content and making it easier for visitors to navigate the page with the expectation of a contemporary web experience.