ux designer & researcher
fletc-block.png

FLETC.gov

The Federal Law Enforcement Training Centers was mandated by the Department of Homeland Security (DHS) to migrate its public-facing web sites to the DHS Web Content Management as a Service (WCMaaS) platform, which uses Drupal as its content management system. Our team had three months to complete the migration and redesign of the FLETC.gov web site. Meeting this hard deadline was critical, as doing so helped FLETC cancel its unwanted web hosting contract and save taxpayers nearly $200,000.

Information Architecture

I spent time at the beginning of this project working to collect and analyze data in order to make the best recommendations for the new site's information architecture and homepage features. We conducted two sets of user surveys with the help of the FLETC Training Research office: one was an online survey aimed at agency training officers, current FLETC staff, and the public, which we linked to from the original FLETC.gov homepage. The second was a paper survey for students attending training at the Glynco campus, which was delivered in person. At the end of each in-person session, we conducted short interviews to gain further perspective from the students. 

After analyzing all the collected data and the old site's Google Analytics metrics, I determined that training was the information most audience members were looking to find on the site. The biggest roadblock to a happy user experience was that training was categorized based on FLETC's organizational structure (which was ever changing) and used internal terminology that was not properly defined for the user. I believed that having all programs listed in a single catalog, regardless of organization or type, was the best way to provide easy and fast access to training information. 

Site Design

The original site was designed using a prescribed web style set forth by DHS. Although mandated to follow the new open source policy, tenants were not given direction on web design standards, other than a few required elements (e.g. the DHS global tag at the top of the site). After consulting the communications office and media services, I discovered that there was a new FLETC logo that had just been released, but there was no new marketing campaign in place or a branding style guide I could use for design guidance. Color palette and style were completely up to me to determine. 

With little to go on, I began with a shot in dark. I found inspiration from those around me - students from varying agencies traversing the campus, wearing different colored uniforms. A commonality amongst the students I noticed was that most of them wore khakis - from navy and brown to light tan and green. I created a Style Tile using these colors and made a brief demonstration to the communications office. They liked the design, but worried that FLETC’s leadership would think it too military-esque. Allowing the customer to see what they did not want allowed them clarity to tell me what they did - a design that shows excellence, yet is approachable.

I created two more Style Tiles at the customer’s request, drawing inspiration from new sources. The first one was inspired by the police badge. Although different agencies are represented at the FLETC and each has a distinct badge, almost every one includes a ribbon element which I incorporated into my design. I also felt that gold signified excellence and, when paired with navy and tan, created an “approachable” atmosphere. The second design is what I call “government blue.” This design has a blue and gray palette that is prevalent in the FLETC’s internal collateral and is used across many government web sites. The customer ultimately chose the first design.