Sometimes, when I hand websites over to large companies and organizations to maintain, I wince.
I wince because, despite training, documentation, and the ability to make a ‘copy’ of a page when creating a new page, websites typically get passed from person to person and everyone somehow makes the pages differently. After a couple of years of everyone doing things their way, the results are a varied experience, depending on which page a website visitor clicks on.
Maine Mathemetics and Science Alliance (MMSA) is a Maine based organization tasked with more than ever before. As more information is created by staff, researchers, partners, and others, MMSA takes its job of getting this information into the hands of parents, teachers, students, and community members very seriously. Besides being a resource for STEM (science, technology, engineering and math) education, they also create events, programs, and curriculum.
MMSA wanted to showcase their work without overwhelming those visiting their website. Also, different kinds of pages (ex: Project pages, Publications pages, etc.) needed different kinds of information on them. The content of the old site was formatted inconsistently because not only had the website maintenance task fallen on different people over the years but it had moved from one kind of website software into WordPress without being cleaned up.
Besides creating a dynamic, responsive website it is these two issues (targeted information and consistent formatting) we kept in mind as we designed MMSA’s website.
Targeted Information For Audiences Served
Early on, we identified the different ‘personas’ visiting the website and created areas specifically curated for those audiences. For example, if I am a teacher, I’d want to see which programs and resources applied to me rather than having to wade through all of them.
Making ‘landing pages’ geared at different audiences (teachers, students, researchers, and community members (including parents)) means that website visitors can get to the information that applies to them more easily. Thinking of MMSA in this way also communicates to the public that this organization actively serves all these groups.
Consistent Formatting With Custom Post Types
To make sure pages were consistently formatted, we decided to use a feature of WordPress called ‘custom post types’. This allowed us not only to ask all the right questions on the page template, depending on the type of content (Ex: project date, funders, etc. appearing on project pages but not, say, blog pages) but also to have them be consistently formatted.
Here’s a sample project in the front end of the website:
So rather than each person who updates the site having to remember the logo size is X pixels wide, that the staff headshots are included below a summary, that if there is a separate website link they need to put that in, etc., we just made a ‘project’ template so all that has to happen is click ‘new’ and filling out the relevant info:
This means regardless of staff changes, the website will look consistent over time. The staff doesn’t have to remember formatting but can simply concentrate on what’s important: getting the right information on the page.
New Branding For A New Era
During the website design process, MMSA also worked with Studio 3 in Ellsworth Maine to create a new logo and brand for the organization. The old lighthouse logo looked dated. No one in the organization hated it… but no one liked it either.
It was decided the MMSA needed a more graphic logo and, inspired by a pine cone and Fibonacci, a graphic was created that not only looks great blown up in large sizes but also works for business cards and small social media profile pictures. Marty Lyons at Studio 3 is a PRO and came up with this masterpiece:
MMSA was excited about their new logo and we were able to include design touches with it including on buttons, in the background of main pages, and in the menu itself.
A Solid Foundation
To create this website, we used the popular Genesis framework with WordPress. This framework is secure, search engine friendly, and mobile optimized. And if you want to geek out this is pretty comprehensive: http://www.studiopress.com/features
MMSA Staff worked hard to go through all content to make sure no extraneous information (or code) was left over from the old site. Getting to start with a clean slate was key.
Built For Search
Besides design, search was also very important to MMSA as they have a variety of resources on their website, from pages to blog posts to PDFs. On the old site, each page simply had a list of links to PDFs, which could feel overwhelming. We used the “Search Everything” plugin to make the default WordPress search more robust, ensuring that PDFs with pertinent information also came up in a site search. We also created a custom search so people could search for projects and other information by grade level, subject and more. This is on the sidebar of all the ‘resource’ pages and we hope it gets put to good use!
Overall, the MMSA website was a test not only in our responsive design skills and ability to use custom post types but in our ability to create a versatile website that will be visited by a lot of different audiences. We hope their new site takes them new and great places!