• Read more about User-Centric Design for Federal Websites

For Federal Offices of Communication, the act—and art—of balancing websites that both cater to the public and promote the organizational structure and mission of the organization is always top of mind. Accordingly, those partnering with Federal offices must prioritize meeting both needs when designing and building agency sites. On numerous projects, our team has successfully managed to increase usability and deliver user-centric designs while simultaneously building sites that allow our Federal clients to bolster their brand. A sample of results for some clients:

-a swift 4% increase in first-time visitor overall satisfaction
-76% of all mobile users strongly agreeing that the new site made content easier to find
-88% of frequently visiting teens being satisfied with the new site

Below are some of the tools we’ve implemented to achieve success:

Navigation and Information Architecture

Treejack is a great usability testing tool that development teams can wield to test the information architecture and navigation of the site prior to even beginning a design. It is best used to test the findability of topics in a website using different navigational hierarchies. For one of our projects, both internal and external stakeholders were given 46 tasks to perform using a variety of different navigation hierarchies to find the most optimal site organization for both constituent groups.

Usability Testing

For usability testing, our team leverages both Loop11 and Usertesting.com. Using a live, interactive environment, both of these tools allow development teams to gain deep understanding of user behavior by observing users as they complete a series of tasks and questions on the site and/or mobile app in question. Interactions are captured and then analyzed in comprehensive reports. As an added bonus, Usertesting.com provides video footage of the interaction for review:

http://bit.ly/1rRvEAm

In summary, Federal websites and applications are often designed with too much emphasis on organizational hierarchy and goals, and too little focus on meeting end-users’ needs and expectations. User-Centric Design (UCD) tools can help government agencies buck this trend, however, allowing them to create websites and applications that engage users and maximize their interaction. Ultimately, this results in a sure win-win: Federal agencies’ constituents can experience an efficient, satisfying, and user-friendly design, and—with constituents’ increased engagement—organizations can ensure that their missions and information are communicated effectively. Act balanced.

• Read more about NASA Uses "Headless" Drupal To Reach New Website Heights

In April 2015, NASA unveiled a brand new look and user experience for NASA.gov. This release revealed a site modernized to 1) work across all devices and screen sizes (responsive web design), 2) eliminate visual clutter, and 3) highlight the continuous flow of news updates, images, and videos.

With its latest site version, NASA—already an established leader in the digital space—has reached even higher heights by being one of the first federal sites to use a “headless” Drupal approach. Though this model was used when the site was initially migrated to Drupal in 2013, this most recent deployment rounded out the endeavor by using the Services module to provide a REST interface, and ember.js for the client-side, front-end framework.

Implementing a “headless” Drupal approach prepares NASA for the future of content management systems (CMS) by:

1. Leveraging the strength and flexibility of Drupal’s back-end to easily architect content models and ingest content from other sources. As examples:

• Our team created the concept of an “ubernode”, a content type which homogenizes fields across historically varied content types (e.g., features, images, press releases, etc.). Implementing an “ubernode” enables easy integration of content in web services feeds, allowing developers to seamlessly pull multiple content types into a single, “latest news” feed. This approach also provides a foundation for the agency to truly embrace the “Create Once, Publish Everywhere” philosophy of content development and syndication to multiple channels, including mobile applications, GovDelivery, iTunes, and other third party applications.

• Additionally, the team harnessed Drupal’s power to integrate with other content stores and applications, successfully ingesting content from blogs.nasa.gov, svs.gsfc.nasa.gov, earthobservatory.nasa.gov, www.spc.noaa.gov, etc., and aggregating the sourced content for publication.

2. Optimizing the front-end by building with a client-side, front-end framework, as opposed to a theme. For this task, our team chose ember.js, distinguished by both its maturity as a framework and its emphasis of convention over configuration. Ember embraces model-view-controller (MVC), and also excels at performance by batching updates to the document object model (DOM) and bindings.

In another stride toward maximizing “Headless” Drupal’s massive potential, we configured the site so that JSON feed records are published to an Amazon S3 bucket as an origin for a content delivery network (CDN), ultimately allowing for a high-security, high-performance, and highly available site.

Below is an example of how the technology stack which we implemented works:

Using ember.js, the NASA.gov home page requests a list of nodes of the latest content to display. Drupal provides this list as a JSON feed of nodes:

Ember then retrieves specific content for each node. Again, Drupal provides this content as a JSON response stored on Amazon S3:

Finally, Ember distributes these results into the individual items for the home page:

The result? A NASA.gov architected for the future. It is worth noting that upgrading to Drupal 8 can be done without reconfiguring the ember front-end. Further, migrating to another front-end framework (such as Angular or Backbone) does not require modification of the Drupal CMS.