Sector(s)
Team Members
Project Team
- Dan Moriarty – Creative Lead, Planning and Discovery, UX and UI design
- Tim Broeker – Technical Lead, Backend Development, Content Migration, DevOps
- Adam Fuchs– Site Build Lead, Frontend Development, Theming, Site Building
- Keri Poeppe – Project Management, QA, Training
- Christine Coleman – Frontend Development, Theming, Site Building
- Arnold French – Backend Development
- Peter Sohal – Analytics, SEO
The Wilder Foundation is one of the most prominent charitable foundations in St. Paul (MN), helping people across the metro area through service programs, research, leadership development and community building.
Three major goals were driving the push for a full website redesign. The first was centered around content strategy. Wilder wanted online content that moved from a solely informative approach towards a more persuasive approach, encouraging a deeper involvement and stronger relationship with Wilder from their target audience.
A second goal was to replace their current site platform, SharePoint, with a more flexible, responsive and sustainable content management system (CMS).
The third was the ability to fully integrate with the Wilder Research report library, built and housed with InMagic Presto. Presto is a .NET application hosted on a third-party server.
About the project
Deeper relationship with online audience
Wilder wanted a site which better reflected its core mission and inspired its audience to get involved. To achieve these goals, we focused on several areas.
- Pages lead with images of the people Wilder serves, putting more of a human face to the cause.
- A short and concise mission statement immediately leads to a call to action -- “find help” or discover “our impact” on the community. We wanted to quickly serve those in need, while telling the story of why Wilder mattered. “Why Wilder” is another callout on the page, featuring relevant facts about the organization and leading to a new page about “Community Impact.”
- Featured blocks of related content used throughout the site invite users to explore, and learn more about the ways Wilder impacts the community. Highlighting research papers, blog posts, news and events also demonstrates impact.
- "Courageous Stories" is a new section to highlight success stories from the clients Wilder serves, in a relatable, personable way.
- "How to Help" is a call to action on every page, simplified down to two, easy-to-scan buttons and more imagery of the people Wilder serves.
Improve User Experience in Finding Content
Wilder is involved in so many different areas of the community, but learning more about their capabilities was buried under a confusing array of site navigation and content-heavy pages.
The design and content strategy emphasized shorter sections of content, separated into clearly defined sections across each page. We encouraged Wilder to embrace the mobile experience of scrolling through content, and not separate content across so many different web pages. Related content is more easily found as callouts within a section or page of the site.
Our team spent a lot of time working with Wilder on a new and improved site navigation, looking for areas where language could be simplified for the general audience, and content could be grouped into fewer sections.
“What We Offer” was created to simplify and consolidate Wilder’s services in one area, which previous had been scattered under “Programs and Services” and “Community and Leadership”. Within each service area, content was consolidated into a single, consistent layout, making certain any relevant content could be easily located.
Data Integration
One of Wilder’s core services is conducting research and evaluation studies for nonprofits and communities throughout Minnesota. The Wilder team had many years of archived reports and project data, and it was critical to expose all of this data on the new website in a user-friendly, highly searchable format.
Wilder manages their research findings and data in a third-party system called Presto from InMagic. Data includes the client organization, project type, report data, accompanying documents and a wide-variety of metadata.
Our team developed a complex recurring migration using the Drupal 8 Migrate API to pull in this data from Presto on a daily basis. All the data is mapped to Drupal nodes, file fields, vocabularies, and Paragraph bundles that are used to effectively display all related project and report data in a variety of custom Views.
The beauty of this configuration is that it allows the Wilder team to store and manage their canonical data in one system, exposing data on their Drupal site while it is continually updated in Presto. This flexibility allows us to leverage the power the Drupal Views and Search, and gives the Wilder team the ability to display additional data or create relationships between data (in Drupal) that is not currently available in their Presto software.
Design Improvements
Wilder had recently conducted a rebranding project, but had yet to implement any of the new branding elements in their marketing. The website was the first use of the rebranding.
While the previous site used a variety of colors and fonts, the new site closely adheres to brand standards, in use of color and choice of typefaces. A fun part of the rebrand introduced new textures and secondary colors to Wilder, and our team incorporated these effectively throughout the redesign.
The new design is clean and uncluttered, based around the core colors of white, blue and green. It also introduces splashes of unexpected color, such as a magenta around the “How to Help” section or gold around the “Why Wilder” callout. Strips of colors and textures add life and visual interest to various blocks and callouts throughout the site.
Overall, a larger, more legible font size was used throughout the site, and well-constructed typography made for easier reading. Careful attention was paid to ensuring a proper level of contrast wherever colors were used, making sure the design was accessible to all users.
Outcomes
Post-launch, we continue to work with the Wilder team to refine and improve the site. Goals and metrics are being tracked in Google Analytics. User feedback has been positive, and Wilder has stated how pleased their are with Drupal as their new CMS. Site editors are very happy with the new tools available for managing content, and research data is being regularly imported from Presto.
The site is now responsive across multiple devices, and accessibility has been greatly improved towards WCAG standards.
Why Drupal was chosen
Wilder’s team was frustrated with the limitations of SharePoint, and the technical challenges involved in getting new content published or updated. As part of the proposal process, vendors were required to detail how their chosen CMS could handle a wide range of requirements, from page and menu management to events, media and search.
Electric Citizen carefully talked through each requirement with the client, and demonstrated how Drupal 8 could meet all their needs. Drupal 8 excels at integrating with other systems and APIs and could manage the data integration with Presto. The Media module could handle rich content and manage their library of images and documents. Events and blog posts could be customized however the client needed for display, and related content could be tagged and reused across the site.
Wilder also wanted the new website to feature a “Research Library,” a place to house years of research into topics such as homelessness, immigration, and health. Through Drupal’s core features of Content Types, Views, and Taxonomy, along with the Search API module, we were able to build sortable online library for over 1,000 research reports and share Wilder’s valuable research to the greater public.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
Paragraphs
This module allows editors to build dynamic page layouts without requiring technical knowledge. Because various components are already defined with needed fields and styled as part of the larger site design, editors can simply fill out fields, arrange these components on the page, and publish. With the addition of some custom paragraph structures, editors are also able to choose background colors, decorative patterns and other elements while building the page. This allows them to get a unique look while still adhering to overall site design and branding.
Media and Entity Embed
We use the Media module and a suite of related modules such as Focal Point, Crop API, and Entity Browser to create a powerful set of media management tools. These allow editors to use and re-use media elements throughout their site, and have advanced control over how images are cropped and displayed.
Search API
Using SearchAPI with Views, we were able to build a powerful Research Library. The new library allows keyword searches, combining numerous types of reference and text fields into a single filter, in addition to more traditional reference exposed filters. For better site search results, we used the Search API to leverage relevance scores and search processors.
Migrate API (with Migrate Plus and Migrate Tools)
Our team leveraged the Drupal 8 core Migrate API along with the Migrate Plus and Migrate Tools modules to implement a recurring migration used for imports of a large, complex data set of historical studies and reports (along with new studies that are underway.) Presto (InMagic) is used to house the data for each study and report, and once per night, the website imports and refreshes all of the research data within Drupal, so that we can leverage the power of Views, Search, and other Drupal functionality in presenting it to the greater public.
