Inspiring advocates to save the world’s largest source of freshwater.

Alliance for the Great Lakes

The team at Mightybytes was focused on understanding our organization’s goals and capacity. As a result, we not only have a great new website but are well positioned with the skills to maximize the new site’s potential to involve even more people in our mission of protecting the Great Lakes.

Jennifer Caddick Engagement Director Alliance for the Great Lakes

Alliance for the Great Lakes was using several clunky systems to manage their online communications and website. Outdated design, stale content, confusing navigation, and a disorganized information hierarchy didn’t allow website visitors to find the information they needed. This resulted in lost opportunities for donations, advocacy, and volunteering. Plus, without easy to use content management tools, the organization struggled internally to devise an effective strategy for communicating opportunities to supporters. Alliance for the Great Lakes turned to Mightybytes for help solving these problems.

Goal Mapping

We started off, as we do with every new client relationship, by workshopping their organizational goals through a series of collaborative exercises, such as ecosystem mapping, user persona creation, and website forensics. We then mapped those goals to key actions users could take on their website. This helped the Alliance team better understand what drives website conversions. It also helped all stakeholders, including those from our team at Mightybytes, more clearly understand site user needs, team responsibilities, resource allocation, and so on. These workshops set the tone for the relationship moving forward.

Content Audit and Information Architecture

We performed a content audit to determine how existing site assets served these goals and what content might migrate to the new site. Having data about all their content collected in one place helped us facilitate discussions around governance: what content can be combined, condensed, and reordered to to better serve users. Results of the content audit also helped the Alliance team more clearly understand the workload involved in scrapping a large chunk of their content and starting over in several places.

mb-agl-5

Content audits help stakeholders ensure that what goes into a website works for users.

The information learned from the audit and goal mapping exercises drove content and design decisions throughout the project. The audit also helped us vastly simplify their information architecture to make content much easier to find. By dumping confusing navigation options and merging content categories we narrowed the site’s focus, making it more intuitive for users and focused on their business goals.

Content Production and Migration

Content can be one of the most challenging aspects of a website redesign. Without clear expectations and the proper amount of allocated resources on both the agency and client sides, the creation and migration process can delay a site launch by weeks, or sometimes months.

To simplify content migration and creation for the Alliance, we:

  1. Ran two content workshops so client stakeholders clearly understood the process of managing content moving forward.
  2. Employed a tool called GatherContent to streamline the creation and migration process even before their website was built.

Content Workshops

We ran two content workshops during the first phase of the project. The first workshop outlined in detail the steps production teams typically use to create and manage web content. This workshop helped the Alliance team better allocate resources for creating content and devise an internal process for managing approvals and general web publishing tasks.

mb-agl-7

Content production workshops help clients better understand what it takes to efficiently create and manage content.

Once the Alliance team was ready to begin producing content, we facilitated a workshop on writing for the web. To this end, consider that:

  • 79% of web users scan a page.
  • Only 16% read it word by word (This is an in-depth case study, so we hope you’re part of that 16% and made it this far).
  • The average amount of text read on a page is only 20%.

Our second workshop covered the basics of creating easily digestible and scannable content with meaningful subheadings, bulleted lists, and clear benefit statements. In general, content creators should shoot for a goal of creating the smallest amount of content to get the job done unless there are notable reasons to break from this practice, such as in-depth articles or case studies. This workshop helped the Alliance team better understand that.

GatherContent

GatherContent helps teams take control of their content production process. It allowed us to begin the process of planning, organizing, and creating content for the new site long before the Alliance’s new WordPress system for managing content was ready to accept it. This greatly streamlined our workflow and helped the Alliance team manage time and content production resources effectively.

mb-agl-4

GatherContent can really simplify the process of, well, gathering content.

To ease the transition to WordPress, we created fields inside GatherContent that directly mapped to the same fields inside the new site. GatherContent also allows users to restrict word counts on fields and upload files or images, so authors understood content management constraints early on. Its workflow tools help users make comments and easily manage approvals as well. Not only did using GatherContent help with the creation process, it also helped the Alliance content team manage expectations, resources, and approvals.

When it came time to migrate all of the Alliance’s content to their new CMS, GatherContent also features a handy plugin that eases the migration process by exporting directly to WordPress.

Content and Display Patterns

Once we had a clear vision of site content and information architecture, we began fleshing out content patterns for common content types. Since content types are often displayed differently depending upon the page in which they exist, it is important to define the specifics of those display patterns: does the call-to-action button sit to the right of the image on an about page, for instance, or below it? We defined specifics for dozens of patterns, including newsletter sign-ups, site search bars, breadcrumb navigation, social media links, donation boxes, team bios, events, and so on. This process greatly helps inform the design of individual components, which can be mixed and matched from screen to screen.

Design and Prototyping

To prepare for display patterns and component design, our design team created two style tiles to define elements that would drive the site’s visual design, including typography, colors, button treatments and so on.

mb-agl-3

Two sample style tiles.

To help the Alliance crew clearly and quickly understand how their new user interface would be experienced across devices and platforms, we built interactive visual design concepts directly in the browser—bypassing the more commonly used static design comps. These were created in HTML and CSS by combining design elements from approved style tiles with content patterns that appeared on high-priority pages. These prototypes allowed us to quickly iterate designs based on client feedback while still ensuring responsiveness for multiple devices. Anytime the client wanted to change a color or typographical element, for instance, the change could be made quickly and reflected across all previous and future prototypes.

Compared to making the same changes through static design comps, this process saved us huge amounts of production time, which helped manage and prioritize the Alliance’s budget. Also, once the CMS was ready, the prototypes could then quickly be pulled into a staging site, getting the Alliance team into their new system faster, which in turn helped streamline the training process.

mb-agl-2

Components displayed across multiple pages.

Training

It can be daunting to get a team up-to-speed on a new content management system, even one that is customized to your specific needs. While WordPress is generally intuitive and easy-to-use, the number of customizations added to Alliance for the Great Lakes’ installation required specific training on features built just for them. We started by first running a virtual training session with their team where we shared screens and walked them through custom features and general interface elements that directly mapped. Because the team had already worked in GatherContent, many of the fields were already familiar to them, except that now they were in WordPress.

Tool Tips

We also created contextual directive text in the WordPress admin. These “tool tips” help users by providing instructional direction next to custom fields and features like image uploads in the WordPress admin. Helpful hints on image sizing, character count, and so on help users better understand the constraints of a specific page component.

Style and Components Guides

Comprehensive style and components guides are handy reference tools that live on the Alliance’s website and can be referred to by team members when creating and managing content. This helps ensure written and visual consistency across posts and pages.

The style guide includes both design and writing guidelines for optimal brand consistency. On the design side, hex values for site colors, font sizes for consistent typographical elements like headers, and guidelines for image formats and button sizes help content managers maintain visual integrity from entry-to-entry. Writing, grammar, and punctuation tips that are specific to the Alliance’s brand also help content creators make informed decisions on voice, tone, sentence structure, and so on. Results of an early card sorting exercise that helped the Alliance achieve clarification on what their brand stands for are included as well, as are SEO guidelines.

The components guide shows how components—collections of content and display patterns—can be mixed and matched on site pages to create unique layouts. The specific elements of each component, including word counts, image sizes, and so on, are included with each component. These tips help streamline the content creation process.

Goal Tracker

Finally, to help the Alliance team better understand how all our work directly maps to their organizational goals, we created a WordPress dashboard tool that shows them how those goals are being met.

While Google Analytics is an extremely powerful tool, many of our clients find its deep set of features intimidating. We wanted to make sure the Alliance team had a simple way to easily understand goal performance without leaving their CMS. The Mightybytes Goal Tracker pulls customized goal data from Google Analytics into WordPress and attractively displays that data in the user’s dashboard. Month-to-month comparisons help users quickly understand where they need to improve performance.

mb-agl-6

The Mightybytes Goal Tracker in WordPress

To pull in the specific goals the Alliance required, such as donations and newsletter subscriptions, we customized Google Analytics to retrieve data from Blackbaud’s NetCommunity and LuminateOnline platforms. With the Goal Tracker, the Alliance for the Great Lakes team can quickly see and compare monthly data on their most important goals whenever they log into WordPress. A Phase two version of our dashboard will provide monthly recommendations for improving goal performance.

Like our website? You can have one too!

Project Planner