Social Justice Organization

Migrating from Drupal 7 to Drupal 8

At a Glance

As an organization that is known for taking bold actions to drive inclusivity at schools, this Social Justice Organization’s website was not visually interesting nor showcasing the work they do for minority students in a usable way. To resolve that, we created a digital ecosystem that matched their energy, commitment, and value by showcasing best-in-class aesthetics, well- organized and searchable content, and making sure content management was easy and seamless to use on the backend. 

Optimized Content

4.9k

pages of content migrated to Drupal 8.

Improved Experience

40+

new pages based on user experience decisions and feedback.

Increased Donations

2x

the usual donations received on Giving Tuesday.

 

 

Taking a Digital Step Forward

This organization’s brand awareness struggled because many constituents are more familiar with national advocacy, individual events, or singular pieces of research and are not fully aware of the organization that supports them all. Additionally, managing the website had been a significant administrative challenge so motivating and re-training staff and chapter leaders inherently required time and a learning curve. We needed to ensure the website succinctly defines the Social Justice Organization’s purpose, impact, and opportunities for involvement. This included:

  • Taking a step in the right direction to connect constituents at the local level so the organization can continue to grow from the ground up
  • Highlighting events and information at the local level so that site visitors can quickly understand local activity/impact
  • Strengthening the case for involvement — and making it easier to donate, attend an event, join a chapter, and take action
  • Improving the experience for national and chapter site administrators to ensure website content stays fresh, accessible, and action-oriented

We had very complicated content. I really appreciate how much LookThink worked through the workflow process with us to understand what needs to happen, what we want, and how it should work.”

Web & Database Manager

Creating a Site that Shined

We knew that in order for this organization to accomplish their goals, we needed to create a site that would:

  • Increase brand awareness and knowledge of mission
  • Make the site usable, accessible, and intuitive for a diverse audience
  • Foster engagement and action amongst supporters who already engage with the organization
  • Promote topical and localized issues to encourage grassroots participation
  • Improve site administration so all users can easily add and edit content

We knew that in order to best set up this organization for success, we needed to understand their target audience, create mobile-first designs, implement navigation best practices, and strategically prioritize for a successful migration.

 

Understanding Users

At the start, we conducted an in-depth audience analysis of this organization’s target users. We determined what primary and secondary actions each of the 5 audience types should take on the site. This exercise was crucial in building the navigation. We did not want to segment parts of the site just for an individual audience group (i.e., students, educators), but we did want to make it intuitive for site visitors to get to the areas of the site that mattered most to them. Over the course of the project, we had the opportunity to review designs with chapter leaders to ensure that the changes we were making for the chapter sites would continue to suit their needs. Additionally, the stakeholders periodically showed the website designs to student leaders for feedback.

Responsive Design for an Optimized Experience

With over 60% of the organization’s website visitors using mobile devices, opting for a responsive design was key. Responsive Web Design is a way to put together a website so that it scales its content and elements to match the screen size on which it is viewed.  The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. We opted to go with a responsive design approach because it is:

  • Ideal for content-heavy sites
  • Great for more complex calls-to-action
  • Great for SEO
  • Easier maintenance

The Role of Navigation

A reimagined navigation was key to a successful redesign of the website. When we looked into navigation language and formatting, we considered the organization’s content and users and kept in mind the following best practices:

Navigation should

  • Help move you forward
  • Use clear language
  • Show you where you are

Google was the best search mechanism for finding content on the old site. We ensured that filtering and content scoring also be used to help users find the content they need. Too many search results can overwhelm users. Filters allow users to refine results to those that are relevant for their search. We also leveraged Drupal’s ability to score content as it relates to search. This helped us provide more accurate and relevant results.

 

Our search feature on the new site is amazing; you couldn’t find anything on the old site. We tried so many different fixes but now LookThink helped make our search so much more robust. You're more likely to find useful content. People aren’t constantly emailing me to find things on the site for them anymore.”

WEB & DATABASE MANAGER

Setting a Design Direction

We didn’t set out to rebrand but to optimize their current branding for digital means. We explored typography and imagery but kept their current colors and icon set, only adding to it when necessary. We leveraged and expanded upon treatments that were already expressing their brand effectively.

The way the layouts were created are so simplified and so much better than what we had before. That’s been the biggest positive turnaround. I used to have my own codepen account just to handle this before and now I don’t need to hardcode things anymore!”

Web & Database Manager

The Drupal Mi(great)ion

Drupal 8 introduced a powerful configuration management framework that provides tools and a process for safely and effectively capturing and migrating configuration changes between environments. Drupal 8 also has a strong emphasis on editorial UX to allow for intuitive content creation and editing, providing a superior experience over Drupal 7.

 

Our advice was to use a modular approach to page authoring, which ensures the design is dynamic rather than uniform from page to page. This provides a library of designed UI components — such as sliders, media objects, and paragraph text — which can be easily composed by the editor into more complex pages.

 

             

We also recommended thoughtfully configuring the edit page of each content type to maximize intuitiveness and clarity. Techniques such as grouping related fields (both spatially and with widgets such as tabs to avoid long pages), using task-appropriate UI widgets for each field, and providing help through tool tips and tours can go a long way to increasing usability. Additionally, the editor’s dashboard page can be customized with useful features, such as workflow queues, pre-filtered lists of site content, and custom displays (such as events or welcome messages). There’s no more reason to be stuck with the default administrative theme and forms anymore.

Interested in transforming your current software platform? We’re here to help.

Additional Case Studies