Responsive Design of Site

The U.S. Commission on Security and Cooperation in Europe, also known as the Helsinki Commission, is a U.S. Congressional Commission that promotes human rights, military security, and economic cooperation in 57 countries in Europe, Eurasia, and North America. Nine Commissioners are members of the Senate, nine are members of the House of Representatives, and three are executive branch officials.

Members of the U.S. Congress created the Helsinki Commission in solidarity with activists in the Soviet Union and the countries of Eastern Europe who saw the Helsinki Final Act as a new opportunity to press governments to improve their human rights records and allow, despite Europe’s division, expanded contacts between people.

Why Drupal was chosen: 

Drupal was chosen for its modular architecture and inherent ability to render dynamically multi-relational content for a diversely interested global audience. New Target’s strategists and designers created an experience in Drupal for users to be able to search easily and parse that content depending on their needs — allowing each visitor to access themes or country-specific information that is relevant to them. Drupal gave us content and sub-content types along with a great deal of flexibility and ease in creating multiple complex fields within each content type. We were then able to create dynamic displays of content that can aggregate information in various appealing ways, giving each user a personal choice and experience to interact on their own terms. We used the taxonomy module to create state and topics issues with terms and sub-terms that enable visitors to filter and further drill down to information that is based on relevance and interests. The Commission needed a platform that was more than just sharing information through a newsfeed or blog, and Drupal provided our creative team with a platform that provided a content-rich site where users can explore the site in a way that they choose. Additionally, we were able to extend the Drupal platform with only the modules we needed, so it’s not a heavy performing site. This is beneficial not only in performance but also in the ability to extend the website to make the system even more dynamic and add integrations into other content-rich databases.

Tile/List View Content Toggle

Describe the project (goals, requirements and outcome): 

The Helsinki Commission’s work to establish peace and cooperation in Europe is significant and widely affective across the globe and yet their primary communication platform, their website, did not adequately reflect their mission because the user experience, design, and information design detracted from the critically important content and issues addressed. They needed the content on the site to be more inspirational and clearly convey the work that they are doing globally. From the start, the New Target team knew this was more than a redesign and should approach it with a more strategic perspective. Our team reimagined how the Commission should communicate by helping them formulate a new digital communications strategy, identify content sources to augment their internal content producers, and design and develop a user-centered experience that provided new information layout and visual content to enhance the written word.

Topics Filter Button

Topics Filter Capability

In the quest for a great user experience, our team combined navigation, filters, and search to implement a larger goal. That goal was to keep users on one page and give them access to as much information as possible so that they could curate their own experience. We took a broader view of the content messaging and menu labeling and used international impact as the key navigational inspiration, meaning we allowed the site’s messaging to focus positively on results and not on labeling navigation with outmoded print-centric words like, for example, “publications.” We wanted users to quickly discover content based on a few key points like issue and country. Within the classic horizon menu, users can sort by content type, country (many users want only certain countries), and issue.

In addition to creating stunning imagery, time-lapse video, and an innovative card design, our strategists were not bound by traditional notions of what a government website’s navigation should be. Instead, we provided an advanced filtering system on the homepage to allow visitors to view content that is most relevant to their international topic, country, or region of interest without ever navigating away from the page. With this, we anticipate increased user engagement and extended time on page. In this type of design where typically a PDF would reside, we pulled back the veil on their content and exposed users to statements, video, and relevant and timely news so that they could access the information they needed in the format that is most convenient for them.

Tile/List View Content Toggle

Key usability characteristics:
- For New Target, this project represents the perfect example of creating a strategy and implementing it with Drupal. We went to the client with additional recommendations like setting up an editorial image budget so they can support and enhance their content with appealing images.

- We implemented a strategy for putting filters on all pages including the homepage. The card design works well because users never have to leave a page to get to relevant, substantive content. This keeps content close and mitigates bounce. The long scroll design works well for mobile users and it promotes sharing.

Front-end design:
Though the Drupal theme was not built from scratch, our team took on some technological challenges. We used contributed modules that made it easier for our developers to implement the complex design. For the interactive map that can be accessed on the homepage, we implemented an external JavaScript library which allows users to filter content by category (e.g., article, hearing, news, speech, statement, etc.) issue, and country. TB Mega Menu was used to accommodate the large amount of information, and it gives the client flexibility in choosing the number of columns and content they would like to appear.

World Map Drilldown

Back-end development:
On the homepage, there is a grid system and for this, we used a sorting algorithm to sort the tiles and in PHP we implemented sort and Apache Solr search. Apache Solr allows the client to add weights to different pieces of content, and it shows the most recent results for items like bills or hearings. Facet API was used for filtering search results. We used MixItUp Views for the animated filtering and sSorting, and Masonry to create the grid. The JavaScript library takes parameters of the blocks and views it. The website allows users to locate a country and drill down for information like articles, press releases, and speeches through a world map which was created using amCharts. All of the Helsinki Commission and country-specific information made this is a file-heavy site which called for the File Entity module to be used. Additionally, New Target’s developers extended the core File Entity so that we were able to add custom fields to further manage the content. Workbench was used to control the editorial process and manage back-end workflow. The Commission needed their staff to be able to easily manage the publishing process, so the Panels In-Place editor was used for editing panels through the front-end, and to make it easy for non-technical users to keep pages up to date.

This project was submitted to the U.S. House Information Technology Office for review before being cleared for production deployment. The feedback we received from the security reviewers was telling of our success, “Overall, this is a very solid, beautifully designed website. Kudos to their development and design teams.”

Organizations involved: 
Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

We chose the modules above and others for their ability to adequately relay the impact that the Commission has as a key conduit to Congress. This was done through the use of MixItUp Views that enabled us to create beautiful pieces of information that are pulled from content types in order to form a cohesive story. Since images convey a larger part of the organization’s mission, we enabled inline editing with CKEditor. Apache Solr and Apache Tika enabled expanded search which was necessary given the large amount of information that they wanted to share in HTML, PDF, and other file formats.

Project team: 

Chris Jurchak
Joe Frye
Irve Towers