Content Design for a Drupal Website

Blue Coda was a Drupal development shop that created websites for its clients. Busy with client work, the company's developers had no time to devote to fixing the Blue Coda website.

We set out to create an updated site that would wow potential customers and help us sell our development services.

The Opportunity

Getting our developers to focus on a website redesign for our own company would take their time away working on client projects or selling new business. Recognizing capacity limitations for our agile team of Drupal developers, the marketing director and I set out to make a suite of redesign materials that could be ready for developers with downtime.

Content Types and Information Architecture

The marketing director and I mapped out the website structure and content types. We didn't have a budget for user research like card sorts or tree tests to help us define the structure or taxonomy. Instead, we dove into comparative reviews of competitor websites and best-practice research for designing pages to convert customers.

We defined page types, including case studies, employee profiles, services, and a blog. I also introduced a glossary listing page type with glossary content types. I championed this page type because Drupal development had a lot of jargon that potential clients either ignored or had to google. I wanted to capitalize on SEO opportunities that I identified through research on Moz, an SEO tool.

Starting on Paper

I built out low-fidelity content wireframes. I pulled out my paper and post-it notes to think through the content hierarchy and noted potential interactions on the stickies.

I used paper and post-its to draw out the content models in their infancy.

Paper wireframes with post-its that describe the interaction.

I got approval on the paper wireframes from the marketing director, and she took them from drafts I made in Microsoft to Balsamiq wireframes. Since this project, I have built out wireframes in Miro, a whiteboard tool, for client projects on my own or collaborated with design to build UX wireframes off of content models I made for developers.

Blue Coda blog landing page content wireframe

Wireframes I made based off paper drafts.

Blue coda blog landing page Balsamiq wireframes

Wireframes the marketing director took to Balsamiq.

Visual Design and Development

The marketing director and I worked with a design contractor to create mockups of page types for the website.

I then collaborated with a lead developer in their non-billable time to determine backend fields for the content types we created in Drupal. As developers completed Drupal page types, the marketing director and I populated them with content. I focused on building out the glossary listing page type and glossary entry content types. I also researched glossary terms that would build SEO for the company and began with those entries.

Structured Content for SEO

We built out structured page types with set headers and subtitles that automatically informed metadata and added an SEO plug-in for Drupal. We also built out a taxonomy of topics to make the blog easily filterable by topic. Likewise, we automatically tied blog posts to employee profile pages using the employee name to create the relationship in the content types.

While we did not explicitly consider accessibility in this redesign, I would now model content to include properly tagged headings and help-text guidance for content editors to implement headers correctly. I would provide these requirements to a developer in excel content models.

Building Out the Content

Once development was complete, the marketing director and I finished building out the content, using a scrum board and methodology to stay on track. We launched the site with copy that the marketing director and I wrote. Within a year, I had built out 45 search engine optimized glossary terms, helped our subject matter experts write numerous blogs, and increased ranked keywords by over 300% in 11 months.