Democracy International

Following the success of the Afghan 2010 project, Democracy International requested our services in redesigning their main website, which will not launch until April 2011.

Social Contxt redeveloped the Democracy International corporate website to improve design, user experience, and content organization. Our goals were to create more dynamic features and incorporate strong visual and interactive elements to better communicate their message to the broader international development community.

We developed a more dynamic homepage that features a slide show, highlights recent news articles and featured publications, includes a tool to aggregate tweets from DI’s corporate Twitter account and any other project-specific Twitter accounts, and includes a miniature map that displays the continents around the world where DI has had an impact through their work.

Homepage:

[[{"type":"media","view_mode":"media_original","fid":"122","attributes":{"class":"media-image","typeof":"foaf:Image"}}]]

We used grid designs for all of the subpages to give the website a more modern look and feel. We deployed custom iconography throughout the website to give visual clues as to what content was about without users needing to read through long lists of content.

[[{"type":"media","view_mode":"media_original","fid":"123","attributes":{"class":"media-image","typeof":"foaf:Image"}}]]

We developed a custom project directory with a dynamic interface to visually display the impact that Democracy International has had across the globe. A dynamically updating leader board displays the total number of projects DI has completed and the total number of countries they have worked in.

The map displays density points over the countries DI has worked in, increasing proportionate to that total number of projects. Dynamic filters were exposed to allow site visitors to search through the listing of projects DI has completed that appears below the map.

To add an additional interactive element, we placed a flag icon next to each project indicating the country the project took place in, and have collapsed display project descriptions so users only need to expand descriptions as needed.

[[{"type":"media","view_mode":"media_original","fid":"124","attributes":{"class":"media-image","typeof":"foaf:Image"}}]]

Lastly, we developed a custom publication directory for displaying the many white papers, case studies and journals published by the DI team.

[[{"type":"media","view_mode":"media_original","fid":"125","attributes":{"class":"media-image","typeof":"foaf:Image"}}]]

We developed a custom interface using the jQuery Picklist library to allow users to build complex queries for searching through these publications.

[[{"type":"media","view_mode":"media_original","fid":"126","attributes":{"class":"media-image","typeof":"foaf:Image"}}]]