I volunteered to GiveCamp Hackathon, a 48-hour event for local nonprofits held at Microsoft NERD Center. My team of 2 developers and 1 designer (me) was assigned to The Esplanade Association (TEA), an organization that maintains and runs events at a local public park. Their website was a poorly-organized jumble of image banner links that opened up PDFs instead of web pages. None of the staff knew how to update it. It needed some help.

 

As soon as the organizers said, "Good luck!", the TEA staff and I quickly discussed their existing brand image (colors, fonts, design motifs) and what they envisioned the site to look like. The entire design process took about 3 hours, then we had the final design below (shown with 960 grid overlay).

I gave font styles and box dimensions to the devs, and they did the rest of the work in Wordpress. I went through TEA's photo collection and made all the header images and created assets. Then I set about teaching the organization's staff how to add events and update pages in Wordpress.

 

By the end of the weekend, we had a fully-functioning site, and the TEA staff were filling in all the information on Wordpress themselves.