Mid-Michigan Program for Greater Sustainability Launch

MMPGS logo

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.

StateNews.com Website Redesign

I have been extremely fortunate to have worked for The State News web team, SN Works, for the past year.  From the earlier post on The Cavalier Daily redesign I have worked on two major site redesigns, the main and most impressive being this past summer when we redesigned The State News.  The site gets about 200,000 views a month and is one of the top rated collegiate websites and newspapers in the nation.  When we began the site was a well designed site from 2008 that had gotten a few updates and been fairly well maintained, but when you redesign a site of such stature, it has to be on a huge scale.  The main challenge was getting a responsive design that would work all the way from wide computer screens down to smart phone browsing windows.  I was made project manager at the beginning of the summer and between myself, Matt Bush, Rod Dennis, and our manager Mike Joseph we entirely rebuilt the site from the ground up using Bootstrap as our responsive framework.

We worked together as a team but the pieces that I worked specifically on were the navigation, footer, sidebar, and multimedia.  The “C” of the navigation, sidebar, and footer needed to be fully responsive and at the same time able to let the main content of the specific page take precedence over the pieces that are in the “C.”  This was a momentous task for me because it involved working with Twig PHP languages as well as the Bootstrap responsive pieces.  I feel very proud though every time I visit the site and know that the first things people see and how they navigate through the site depended on the consistent pieces I created.  Secondly, and as you can see in the gallery below, the multimedia page took a full revamp.  We went with a darkened background to enhance the media that State News is known for and made it easier to navigate through more pieces.  Lastly, on the homepage we utilized another open source program, Isotope, which allowed us to make a very dynamic photo area that was still responsive.  Between myself and Mike Joseph coding away we were able to make a very cool piece that our editor in chief gushes about at trade shows right on the homepage.  This was by  far the largest and most impressive web design project I’ve undertaken and has had such a rewarding feeling once it was all finished that I will continuously work on web design from here on out.

I’ve included below a full gallery of the process from beginning to end, how the site used to look followed by the wireframes and design documents and finally the finished product which is still live.

TSN-Homepage

TSN-SportsFrontTSN-ArticleDetailHome Page Final Wireframe Multimedia Browse WireframeThe State News :: MultimediaMultimedia Page Redesign


Article Browse Wire Fram

The State News Homepage

 

Cavalier Daily

As an employee of State News Works, the web development firm related to The State News, I have had the pleasure of working through two very major redesigns for major websites.  My first major project was the Cavalier Daily, the online newspaper for the University of Virginia.

We first took consideration of the site as it was initially. Here you can see that the site was based solely in Web 1.0 standards of link behaviors, 960 grid system, and stuck very closely with a blog look and made little effort to have new content prominent in the site, a large University we set out to create a design that brought The Cavalier Daily roaring into 2012.  We therefore decided on creating a responsive design webpage, one that would resize and work across the multitude of platforms now hooked into the web – from desktops, to tablets of all sizes, down to web browsers on smart phones.

The current Cavalier Daily homepage is leaps and bounds ahead of the old version.  Trading out the gaudy background color and implementing a responsive design using Twitter Bootstrap it was our first successful run at creating a fully responsive news site that contained a great deal of content along with traffic, ads, and multimedia.  Please see the below images and feel free to visit their site to see it live in action.