This recent Drupal upgrade and redesign was a real pleasure to work on. War Times is a grassroots organization whose media strategy has evolved dramatically over the years. Founded in 2001 as a print publication with a national distribution of around 100,000 copies, they have now embraced digital communication as an effective way to reach a wide audience.
We started with a collaborative design process that identified their goals, audience, and priorities, and then produced a series of iterations of mock-ups that allowed us to visualize ideas put into practice, and make design decisions together.
Time for an upgrade
The old Drupal 6 version of War-Times.org was becoming an impediment to their work:
- Content creators and moderators were becoming frustrated by how difficult the site was to use,
- Social media integration was sorely incomplete and ineffective,
- Visual design was stark and clearly out-dated,
- The site’s non-responsive theme made content prohibitively difficult to view on mobile devices.
As the list of needed changes grew longer, the leadership team decided that the time had come to upgrade to Drupal 7, and decided to work with us on a major redesign.
A Modern, Mobile-ready Design
As a media organization, War Times needs to make it’s content available to all possible users, on any device, and upgrading to Drupal 7 was the perfect opportunity to finally make this possible. We chose the Adaptive Theme HTML5 base theme with SASS integration as a solid starting point.
Ease of use
One of the major problems that writers had with the old site was how difficult it was to accomplish many simple, common tasks such as adding an image with a caption. This barrier meant that very few members of the collective actually logged in and added content to the site, which of course made it difficult to keep the site continually updated and dynamic.
We solved the image problem by taking advantage of usability advances in Drupal 7 and modern responsive design techniques. Images are uploaded using a single, streamlined file uploader, and are automatically positioned on the article full-text page in accordance with the size of the user’s screen. Website visitors with large screens will see images beside the article displayed with a jQuery parallax effect, whereas visitors with smaller desktop screens or mobile devices will see images interspersed within the body content.
Improved Social Media Integration
One of the top priorities that surfaced during our collaborative design process was a strong need to make better use of social media. This is implemented with improved sharing capabilities, facebook and twitter widgets, and a custom hybrid facebook-drupal comment solution.