Case Study

Social Justice Organization: Migrating from Drupal 7 to Drupal 8

GLSEN/Social Justice Organization Featured Image of Man Smiling Next to Rainbow
Design element from the Social Justice Organization brand

About the Client

This Social Justice Organization is a national education organization that aims to end bullying, discrimination, and prejudice based on sexual orientation, gender identity, and gender expression. Through national chapters, they prompt LGBTQ cultural inclusion and awareness in K-12 schools.

Website screenshots

At a Glance

Taking a digital step forward.

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. 

Project Overview

Primary Goal

Designing a platform to promote inclusivity in schools

Audience / Users

K-12 students and chapters

Related Technologies

Drupal

The Challenge

  • Connecting 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

Our Approach

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:

1.
Increase brand awareness and knowledge of mission

3.
Foster engagement and action amongst supporters who already engage with the organization

5.

Improve site administration so all users can easily add and edit content

2.
Make the site usable, accessible, and intuitive for a diverse audience

4.
Promote topical and localized issues to encourage grassroots participation

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.

website screenshots

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.

Website screenshots

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 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.

4.9k

pages of content

optimized and migrated from Drupal 7 to Drupal 8.

40+

new pages

based on user experience decisions and feedback.

2x

the usual donations

received on Giving Tuesday from site visitors.

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

Ready to meet your UX partner?

Let’s Talk About Your Experience

tell us about you