Sector(s)
Team Members
Project Team
Team Members and Roles on the Project:
- 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
Graywolf Press is a world-renowned independent publisher. Their books and authors have been awarded the Nobel Prize for Literature, the Pulitzer Prize for Poetry, the National Book Critics Circle Award, and the National Book Award.
Graywolf had a Drupal 7 powered website, but the design was dated, not responsive for mobile devices, and poorly reflected the brand. Online content wasn’t reaching their target audience or expressing the sense of community and mission of the organization. On the backend, editors were having a hard time working with limitations of their content tools, and critical data integrations were failing.
About the project
Community Oriented
Instead of focusing solely on authors or best-sellers, Graywolf wanted the website to reflect their core mission–promoting underrepresented communities, daring new artists, and alternate points of view. One the projects primary goals was a website that's more about the mission and the community.
To achieve these goals, the redesign focused on several areas.
- The homepage now leads with a strong mission statement, "Publishing Voices for the Twenty-First Century," and makes the nonprofit as the primary focus.
- Images of the people who make up the community, from author readings to social events, were added and prominently featured.
- Support was greater emphasized. Nonprofits need funding and support by the community. In addition to the donate button, "Support Graywolf" is now a call to action on every page, simplified down to 3 easy-to-read buttons, as well as a new, top-level menu item.
Improved User Experience With Book Titles
While mission and community are critical, the books are still the main content of the site. Rather than follow the existing structure, separating fiction, nonfiction, poetry and best-sellers across many different pages, we constructed a single landing page for all books.
The new Books page uses a series of filters (using Search API) for users to easily search and pare down results to whatever criteria they choose. The goal was to simply the navigational choices for end-users, and present a single portal for exploring the catalog of books.
For the individual book pages (nodes), a clean, well-organized page was essential. Content was prioritized, with generous use of white space and a consistent layout for every book. Users can easily scan through various sections, and discover as much information about the title as they desire.
If the book description gets too long, we've added code to automatically hide the additional text unless the user chooses to reveal it. This keeps the overall page compact, and consistent in length (on page load).
Data Integration
Graywolf's entire book catalog is managed in an industry-leading system called Title Management from Firebrand. The system also manages all of their related data surrounding authors (bios, photos), upcoming author events, print-ready cover images, and a variety of metadata. Our team was charged with finding a way to effectively bring this data into Drupal 8 so that the website would always reflect a real-time version of their catalog, authors, and event schedules.
We settled on a complex recurring migration using the Drupal 8 Migrate API that pulls in this data and maps and it to a series of content types, vocabularies, and Paragraph bundles that are used to effectively display all related book, author, and event data in a variety of custom Views and displays in a variety of contexts.
Each night, the Drupal 8 site queries the Title Management data and pulls in any new items, or updates to existing data. We also built in the ability for Graywolf to add custom fields and data to their content model that do not exist in Title Management, as a way to provide even more advanced Drupal functionality while still allowing the Graywolf staff to manage a complex set of related data from within a single system.
Overall UX and UI Improvements
The previous site was copy-heavy, with numerous colors on every page. For the redesign, we focused on a cleaner, more focused layout and user interface. Pages and content that didn't support the mission were edited or eliminated. The top-level navigation was reduced to four main links, and the books were reduced to a single landing page.
Pages were designed mobile-first, with greater spacing, legible font sizes and clearly-defined sections on the page. Secondary content was sometimes hidden behind 'accordion' blocks that the user could reveal as desired. We chose web fonts that complemented the existing brand, and worked best on the screen.
The number of colors from the previous site was reduced to the 3 core branding colors (red, black, gray). As a show of Graywolf's personality and boldness, a new "electric blue" color was introduced as well to bring energy and surprise to the page.
Finally, large testimonial blocks were added to the design, utilizing the dynamic book cover photos Graywolf already featured on its Instagram page.
Outcomes
Post-launch, we continue to work with the Graywolf team to refine and improve the site. Goals and metrics are being tracked in Google Analytics. Donations have increased. User feedback has been positive. Site editors have much better tools for managing content, and important book data is being regularly imported from Title Management.
The site is now responsive across multiple devices, and accessibility has been greatly improved to WCAG 2.0 standards.
Why Drupal was chosen
Graywolf had grown frustrated with their existing CMS (Drupal 7) and was open to a change. Part of the frustration was easily explained– modern sites need consistent upkeep and care to stay effective, and their Drupal 7 build had fallen behind in updates and care.
Modules would break, and warnings would present themselves to site editors. The editorial experience itself was cumbersome and confusing, and the client wasn't aware of improvements that could be made within Drupal to make it better. Most importantly, the site needed to integrate with a third-party database, and these connections had started to fail over time.
Electric Citizen was able to demonstrate a better editorial experience in Drupal, through our previous work utilizing Paragraphs and Panels. We explained the update and maintenance plans we had available to keep the site running smoothly, post-launch. We talked about the wider Drupal community and how their site would continue to be secure and supported as powerful, open-source software.
For the critical data integrations, Drupal was the easy choice. Drupal 8 was designed with data integrations in mind, and we showed how we could fully integrate with their third-party database and migrate content to the live site on an ongoing basis.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
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 complex, recurring migration used to import a variety of key site data from a third-party title management system. This system manages Graywolf’s entire book catalog, high resolution cover images, author biographies and photo, and a list of author readings and events. Once per night, the website imports and refreshes all of this data to make sure their catalog and events are always up-to-date.
Search API
The site has an extensive catalog of Book titles, categorized by different genres and numerous fields such as ISDN, price, where to buy, author, book cover image, etc. Using SearchAPI with Views, we were able to build a Books landing page with exposed filters for genres (Fiction, Poetry, etc.) and "upcoming titles." For better site search results, we used the Search API to leverage relevance scores and fulltext search power into order to combine numerous types of reference and text fields into a single keyword filter.
Paragraphs
This module allows editors to build and maintain dynamic page layouts, all without requiring technical knowledge. Because various components are defined with needed fields and designed as part of the larger site design, editors can simply fill out fields, arrange these components on the page, and publish.
Media and Entity Embed
We used 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.
