A political powerhouse on Beacon Hill, the Massachusetts Municipal Association (MMA) unites municipal officials to articulate a clear message, develop and advocate for unified policies, and collaborate to increase the efficiency and effectiveness of municipal service delivery.
MMA leadership needed a new website to further their advocacy goals and to better inform their diverse constituencies and equip them with relevant and actionable resources.
Why Viv
In addition to our technical and design capabilities, our team’s solid understanding of local government from a previous project building a historical election database for Massachusetts set us apart in a competitive RFP process.
A Collaborative Approach
MMA’s senior leadership and marketing team valued our commitment to true collaboration. As the subject-matter experts, they offered invaluable insights to help us build an intuitive navigation and provide value to their members. We looked at a slew of example websites and resource libraries to make sure we understood exactly what type of site we needed to build.
Efficient Workflows
Throughout the design phase, we ensured the time of senior leaders were used efficiently.
While the executives informed the vision, most of the collaboration occured with the internal communications team. Thanks to a thorough research and discovery phase, we asked the right questions, took the time to learn the needs of each audience, and listened closely, reducing the amount of iterations needed.
The Results
CMS Evaluation
We began the project with an evaluation of Drupal vs. WordPress to ensure the MMA team could make an informed decision about which to choose. While the old site lived on Drupal 7, our analysis showed that, opposed to a migration to Drupal 8, a migration to WordPress was more cost-effective and could accommodate all the required functionalities.
User Research
The MMA serves diverse audiences, ranging from mayors to journalists to job seekers. We planned a thorough discovery phase to ensure we understood the needs of each audience and how they were using and wanted to use the site.
For usability research, there is no substitute for talking to real website users. Through 20+ telephone interviews with MMA members, we explored what the unique audiences had in common and how their needs differed. We found that news about municipal matters served visitors across the board, so we made the decision to pursue a redesign reminiscent of a newspaper website. In addition, we learned that the site’s search function mattered a lot to users, which helped us prioritize search functionality in our development stage.
Branding
Thanks to the cost savings created through our CMS evaluation and the decision to migrate to WordPress instead of Drupal 8, we had the opportunity to add branding services, including a new logo and letterhead, to the original scope of the redesign.
As part of this branding effort, we faced a problem the MMA had been encountering for years: its logo did not use the common acronym everybody in state politics knows and recognizes. After all, ask anybody in the state house what the MMA is and they will know you’re not talking about mixed martial arts. We created a new logo that put the acronym front and center, allowing the organization to unify its brand across all collateral – a key best practice in any marketing and branding initiative.
Another key branding issue: due to the MMA’s large mission and multiple objectives, their previous website came across as impersonal. We added touches of human connectedness by incorporating members spotlights with pictures and including a portrait and signature of Executive Director Geoff Beckwith..
Functionality
When planning out the real estate of a new site, it is paramount to use available space strategically and carefully and to anticipate elements that will grab users’ attention or distract them.
For this project, due to the MMA’s diverse audiences, we developed microsites based on member types to facilitate content tailored to each audience’s needs and priorities. When selecting the content most relevant and actionable to them, members can hover over the site’s mega-menu (under the main navigation), which creates an intuitive navigation structure.
The old site lacked hierarchy of content, so we chose to pull out featured stories and present them in a more dramatic fashion. Knowing the importance of municipal news to all the site’s audiences, we also simplified the taxonomy to allow them to find what they are looking for via the use of content categories.
A responsive design
Prior to the redesign, the website was not mobile-friendly and essentially contained a bulleted list of news stories. In the redesign, we presented the news in a way that positions the site as a good source to browse and read news about important municipal matters in a responsive format for both desktop and mobile users.
Resource Library
With over 600+ resources, it was important that the site’s new resource library was filter-able and easy to navigate. Together with the MMA team, we reviewed many examples of resource libraries on the web to align on the desired features.
Thanks to easy categorization and tagging, city officials can now better find the resources they are looking for. The individual resources utilize PDFs for effortless downloading; however, the site also embeds all text content from each resource to facilitate best practices in SEO.
