Mid-Michigan Program for Greater Sustainability Launch

MMPGS logo

Working for Michigan Energy Options through the Mid-Michigan Program for Greater Sustainability, a HUD/DOE/EPA federally funded grant, we launched the portal site hosting the information regarding the nine projects in the MMPGS. MEO runs the lead on two projects, one being an energy audit of buildings in the Michigan Avenue/Grand River Avenue corridor, and the other to create an online portal to engage Mid-Michigan citizens. After competitive bids to build the site my supervisors chose Gravity Works Design and Development and we worked with them over the past 6 months to create the portal site. In combination with the web service MindMixer were we launched the community forum last year we are proud that on May 1st 2013 we launched the MMPGS site. Below are some of the finer points from the project along with photos from the respective pages.

Note the photos are a gallery and you may peruse through all of them, links to the respective pages are provided in the descriptions

MMPGS HomepageThe process working with Gravity Works, my supervisors, and the partners within the MMPGS critically taught me how to manage many opinions with the technologies and time available. I worked closely with the Gravity Works team through the information architecture phase by mapping the site and its purposes. I insisted upon creating a fully responsive site to allow for numerous access points for the Mid-Michigan residents and if you visit the site on any browser and any device you will see it properly works with some small adjustments to allow for load times and size of display.

I worked together with the graphic designer to create the official logo set and worked with the wire framing of the site with the lead designer to make sure Gravity Works understood the feel, flow, and depth of what we hoped to get from the site. Over three months time they built out the back-end and they utilize the DotNetNuke content management system. During that three month window I learned the behaviors and best practices for DNN, thankfully after my work with WordPress and Joomla the learning curve wasn’t too bad.

MMPGS-mapMy main work after the back-end was built before launch was to create and manage the appropriate content for every page on the site. I was tasked with finding and mapping all points on the Interactive Map. We created sorting features and I chose the logos, color schemes, and then hand imported geo-tagged locations with the pop-out information and the proper links to all the places mapped. We also included and events category that automatically fills in as the community calendar is filled.

MMPGS NewsAdditionally the site needed a catalog of content that users can explore when they visit the site. Namely I post related news articles on the News page and worked with Gravity Works to create categories for users to filter the news. Once the site went live I have focused on creating traffic to these news articles via our social media strategy utilizing Facebook and Twitter for the most part. It has been incredibly rewarding to see the growth of our social media and web traffic since we launched just over a month ago.

MMPGS Timeline

One of my favorite projects was creating the Timeline content for the interactive timeline. Using the Timeline JS open source scripting I was able to easily import new content and create interactive content for users to learn where the program came from and where we’re going. The timeline is another great example of how we wanted users to be able to interact with the site and also allowed us to be able to continuously import new content and create a more dynamic experience for the users once they’re into the site.

MMPGS Partners

Our Partners page was highly important to make sure we properly highlighted the MMPGS partner organizations, supporters, and of course recognize the work of the entire program. After working with Gravity Works to create custom responsive columns I was able to fit in all the logos that reworked the secondary level partners into equal sized logos, the Tri-County Regional Planning Commission as the main fiduciary partner at the top, and then the supporters of the project along the bottom. It is always a tough call to create some sort of space for the partners to be highlighted and as you’ll notice on the homepage and in certain sidebars we have a great rotating image gallery showing each logo briefly so that users know who is involved with the project, even if they never visit the Partners specific page.

This project was so large in scale it really taught me how my studies prepared me for large scale projects. Setting out with a clear vision, working though wire frames, user experience testing throughout the process, and making creating all the original content has me appreciate full on launches so much more. With the State News redesign we were fortunate that the content was consistently being created and we just had to lay over the new design, with this project I can now say I’ve worked through a launch from start to finish and for that I am very grateful.

Posted in Non-Profit Communications, Professional Portfolio, Web Development, Web Development and Design Tagged with: , , , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>