Case Study: MS Extension Service website redesign

Ag Communications: Mississippi State University Extension Service

The Mississippi State University Extension Service was struggling with a declining audience and an Internet strategy fragmented across 82 county offices and several research centers. The 100-year-old organization needed to make its content relevant to a contemporary audience.

We decided that a content management system (CMS) would allow for a more direct connection between subject matter specialists and the public they serve. A mobile-first design approach and a create-once-publish-everywhere content strategy would reach a wider audience and provide a better experience on the devices they use most.

My role was to lead a team in the research, design, and development of the new website while maintaining the current site. I would handle the set up, customization, and deployment of Drupal as our CMS platform with support from our IT department. My most important task would be to involve all members of the organization, understand their needs, and seek approval from the bottom up to ensure adoption of the new system.

The Challenge

The mission of the Extension Service is to provide eduction to the people of Mississippi drawing on more than 100 years of university research on subjects including agriculture, wildlife, health, and business. Despite this wealth of available information, website statistics showed a steady decline since 2009, and a 2014 survey of the public revealed a lack of awareness of the Extension Service even among regular users of services.

One reason for this confusion was the MSUCARES.COM domain which stands for Mississippi State University Coordinated Access to the Research and Extension System, a result of the complex partnerships and relationships that make up this organization. Our survey showed that the public was not connecting with the name, so our first recommendation was to follow the lead of many other Extension Services to simply use the home university domain with a prefix informing users where they are and who is providing the service they are accessing: EXTENSION.MSSTATE.EDU.

Before making changes needed to connect with our external audience, we would have to address the needs of our internal users. I conducted interviews with the most active users in offices across the state. Most were very vocal about needing the ability to update and manage their own content. Many were concerned about their lack of computer skills, but my previous work on a CMS for Oktibbeha County in Mississippi (http://www.oktibbehacountyms.org/) helped them to see the path forward.

The Process

The mission of Extension is broad. It can be argued that the audience includes every citizen of the state, but in order to help them find what they need to achieve their goals we defined three audience types.

Presentation slide of audience types accessing services at MS Extension Service website
Examples of audience types accessing services at MS Extension Service website
  1. Training Audience – in search of specific information, seeking information or registration for classes or events
  2. Professional Audience – seeking up-to-date information for planing and maintenance of business
  3. Lifestyle Audience – in search of expert advice to improve quality of life
Example of content type and attributes as building block for the content management system
Example of content type and attributes as building block for the content management system

Next, we needed to define the content types for the new system in order to create the database model. We performed a content inventory of the current site resulting in a list of seven content types and the attributes contained in each: story, publication, newsletter, episode, event, link, and page.

Study of home page layout of npr.org as example of mobile-first design
Study of home page layout of npr.org as example of mobile-first design

Our research into mobile-first design revealed several common features: single column story stream, large photographic images, and limited top-level navigation. We identified several news sites with strong cross platform designs in order to study home page layout and responsive design strategies.

Information Architecture: card sorting

Early notes on topic structure for the content management system navigation
Early notes on topic structure for the content management system navigation

One of the biggest challenges of this project was creating the topic taxonomy. The current list was the result of many years of quick fixes and compromises. It was difficult for a first time users to find their way around, but regular users were afraid to have the rug pulled out from under them after they had worked so hard to find what they were looking for. Any proposed changes would have to be backed up with evidence. Card sorting exercises proved very valuable and resulted in a more streamlined list with easily understood titles.

Presentation slide of site navigation for browsing by topic
Presentation slide of site navigation for browsing by topic

The topic list was vital to the navigation flow of the site. All content types would be connected by topics. A user viewing a story about heirloom tomatoes would see related links for events, articles, publications, and most importantly, contact information for the subject matter specialist.

"Before" overview of publishing workflow on the existing website.
“Before” overview of publishing workflow on the existing website.

Some of the most active users of the site are the news editors. I interviewed them to learn more about their publishing workflow and how I could improve on it. I was stunned to see just how complex the process was including emails, copy, pasting, and several handoffs to different team members.

Updated workflow for publishing on the content management system
Updated workflow for publishing on the content management system

At first they were resistant to change, but when I showed them just how simple the workflow would be with a CMS, they finally understood and got excited.

Wireframe diagram example for page layout and functionality of content element
Wireframe diagram example for page layout and functionality of content element

Wireframes were produced based on the data models for each content type. These diagrams served as our first low fidelity prototype and allowed us to get feedback on layout and functionality.

Presentation and Release of Prototype

Our deadline for the release of a fully functional prototype was October of 2014 during the annual conference. I completed the customization of our Drupal installation and worked with out data base administrator to clone a portion of our current content database. With all of our data mapping in place, content flowed into our prototype and we could finally see our designs come to life.

Presentation screen displaying the home page of the functional prototype ready for release
Presentation screen displaying the home page of the functional prototype ready for release

I presented all of our research and told the story of how our design had developed being sure to let them know that I was listening, heard their concerns, and did my best to address them. I revealed the new prototype to a round of applause. Of course the real test would be how quickly and easily they adopted the new system.

Conclusions

Many of my early interviews with agents ended with, “Well, best of luck to ya!” They had been promised updates in the past and felt their needs were never addressed. I learned that solving the issues of the day would involve undoing the mistakes of the past. We were able to learn the lessons from the past by involving all of the team members at the earliest stages of design. A good mix of voices involved in the creative process is difficult, requires a defense of ideas, evidence to back up decisions, compromises, and usually results in something better that was proposed initially.

Today, all 82 county offices and dozens of research units are now actively managing their own content providing direct communication with the public they serve.  Users are now more aware of the vast array of services provided by Extension.

The importance of a UX approach to design becomes very clear especially in a large organization structured in silos. The path of least resistance is to just keep doing things the way they have always done them. Even with support from leadership, these efforts would be meaningless without adoption throughout the organization.