This past weekend, I attended New England GiveCamp. The goal is to spend a weekend helping out a local organization or non-profit somehow with their web presence. This could mean redesigning an outdated website, or helping them build a new site or app.

The camp went from 6pm Friday to 5pm Sunday. Over the weekend, my team and I spent about 24 hours total on our project, Mill Falls Charter School. We were comprised of:

• Meryl Levin, the founding board chair at Mill Falls
• Rachel Morris, our project manager
• Kelly Dwan, our developer
• …and myself!

I ended up on the Mill Falls project by chance — the original project I had been assigned to was unable to make it, so my team got split up and put onto other projects. (This worked out well for the Mill Falls team, whose original designer was also unable to attend.)

Old Mill Falls homepage

Old Mill Falls interior page

Once my group snafu got figured out, Kelly started making updates to the Mill Falls WordPress install (it was running WordPress 3.1 — ouch!), and started removing unused plugins. I huddled up with Meryl and Rachel to go through the project goals, and then on the site’s information architecture. The current site was a little complicated — there were some pages that could be condensed and combined, as well as restructured into more specific top-level categories.

After deciding on an updated site architecture, we discussed what we thought some of the most important elements were, so we could highlight them on her homepage. I finished up the night wireframing out a basic homepage and interior layout at desktop and mobile sizes as the rest of my team got together and talked about some of the more technical bits. We touched on the site aesthetics at the end of the night, and then at around midnight, we wrapped up and Kelly and I headed home.

The second day dawned rainy and cold — the perfect kind of day to spend inside, designing and coding. I jumped straight into designing, mocking up the homepage and interior design in Photoshop. It’s been over a year since the last time I worked on a client site, and it was fun to slip back into familiar patterns.

Meryl was interested in keeping the existing look and feel of their site, but growing upon and modernizing it. Their existing site already looked pretty good, so I had a really solid base to work off of. One of my favorite features were some really charming slides in a carousel on the homepage. However, since you probably shouldn’t use a carousel, I decided to take out all of the slides and highlight them on each primary page. While I originally intended for Meryl to eventually replace them with photography, the slides grew on me more and more throughout the weekend.

Since the site was also pretty navigation-heavy, despite our re-architecting, I decided to give each sections its own on-page submenu, instead of just relying on the menu’s dropdown. This would give site visitors a better sense of where they were. I drew in colors from the slides, which already formed a really lovely color palette.

I finished mocking up my pages in the early afternoon and had a check-in with Meryl via Google Hangout, since she was unable to drive down to Boston that day. She was super enthusiastic, and provided some great feedback as we went through the designs. I ended up with very few elements to change. After making some minor adjustments, I handed off the mockups to Kelly to start implementing.

While Kelly started coding out the designs, I worked on restructuring the current site’s menus and pages to match the IA we had discussed the previous night. The rest of the day was focused on structure and development. Later that evening, when it started to get into crunch time, I helped out Kelly with some minor theming bits like styling forms and the interior sidebar. We wrapped up at 11 with an almost entirely complete theme.

The rest of today was spent wrapping up. We activated the theme on the live site and made some minor adjustments to the content, including setting the featured image and header background color for each page, depending on the image. We walked Meryl through the site and its various features, and had the pleasure of introducing her to the (somewhat new) WordPress media modal, Jetpack galleries, and the new admin color schemes.

We also put together a style guide so she would have quick and easy access the colors we used, and a visual guide to the different text and header stylings, using Mark Jaquith’s WP Help plugin. Kelly wrote up some additional documentation around widgets, menus, installed plugins, and changing the featured images and their background colors.

https://twitter.com/melchoyce/status/452898116233334784

We ended up pushing right up to the presentations at the end of the day. All told, we spent 24 hours over the weekend working on the site. I’m incredibly happy with the site we produced, and it was really great being able to help. Working with Meryl, Rachel, and Kelly was a real pleasure. Their professionalism, enthusiasm, and and knowledge really helped shape this project into something special. I had a really great weekend.

Thanks for the fun, New England GiveCamp!