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.
Individual Book Titles
For the individual book pages themselves, the focus again was on user experience.
Each book page contains a lot of data, so 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).
UX and UI design
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.