Charity Hackathon

We had the great pleasure of attending The Nerdery's Overnight Website Challenge under the team name "Discretionary Hyphens". The Overnight Website Challenge is a 24 hour hackathon event where volunteers create teams of eight to ten web professionals and get paired with a nonprofit in need of a website. The Nerdery has been hosting this wonderful event since 2008 that now takes place in three cities: Minneapolis, Chicago and Kansas City. The event had 31 web teams volunteer for this great cause this year, ourselves included!

Our Team

The Fonts.com dev team operates out of Monotype's Chicago office, not far from where the Chicago Overnight Challenge took place. We are few in numbers, but boast a wide range of skills. We also had the added bonus of having a few members on our team be repeat attendees of the hackathon event. Though not all of our roles were a part of our day to day duties at Fonts.com, we were excited to be able to stretch ourselves, so to say.

Derek Winfield:Dev Team Manager working as Project Manager

Reed Rizzo:Principal Front End Developer working as Team Captain/Wordpress Developer/JavaScript Jedi

Brandon Nicoll:Senior Software Developer working as Back-End Dev/Network Admin

Piper Lawson:UX/UI Designer working as Lead Front-End Developer/Designer

We had a lot of roles covered, but reached out to some of our friends from Monotype and other companies to round out the team. In the end, we put together a strong team and great group of people to share the fun experience with.

Evan Scronce:UX/UI Designer for Monotype working as Lead Designer

Bill Davis:Global Fonts Product Manager for Monotype working as Strategist/Copywriter/QA

Venkat Yetrintala:Solutions Architect for Monotype working as R&D Developer

Ashley Sullivan:Front-End Developer for Crate & Barrel working as Front-End Developer

Brent Seehafer:Front-End Developer working as Designer/Front-End Developer

Andrew Conlisk:Senior Consultant for Polaris Solutions working as Back-End Developer/QA

We were very lucky to have been able to gather so much talent in our team. The Fonts.com family wants to extend a large thanks to everyone that helped our team out, including the handful of folks that were unable to attend the event.

Our Charity

When teams arrive for the event, they have no idea who they will be paired with. At 9:00 a.m., the hosts revealed the pairings. We were paired with the nonprofit, Heart of a Thousand Hills.

First trip to Rwanda to purchase and deliver supplies and uniforms to school children.

Heart of a Thousand Hills is a charitable organization that provides support, supplies, hopes and dreams for the children of Rwanda. This is done through fundraising events and collecting donations. They also send out ambassadors locally and globally to raise awareness by providing detailed information about the cause. Founded in 2013, Heart of a Thousand Hills is still a young organization, but full of life, passion and focused on empowering the children of Rwanda.

We were able to help this great cause by providing Heart of a Thousand Hills (HOTH) with a website, an outlet in which they can share their great cause. There are many ways in which you can help their cause as well. If you are in the Chicago-land area, you can attend one of their fundraising events. You are also able to donate your time or a monetary amount. Anything you can contribute will be greatly appreciated to the children of Rwanda.

Design, Content & Inspiration

Working with our client proved to be very rewarding. Because of HOTH's passion about their mission, it was easy to gather inspiration. Our client was looking for some simple elements: a one page design, board member section, events, image gallery, donation and blog. We quickly realized that in order to best convey the message to the audience, we would need tell a story about HOTH's cause or as Evan Scronce said "serendipitously creating emotional connections with the children".

Now that the design team had requirements and inspiration, it was time to get to work. Evan quickly started creating an overall feel for the site, as Brent worked on refining the logo. Rwanda's colors of green, yellow and blue held inspiration in both of these tasks. The site started to take on a yellow/green and dark theme. To get the emotional connection that the team so greatly desired for the site, Evan started going through pictures and videos and decided to work in a video background to the hero section of the site. Our client and Evan decided to go with a lovely video of a few school children and the charity's board skipping and high fiving on the way to school. With no time to waste, the video was then passed on to Ashley Sullivan for editing. As the site started to come along, Evan landed on the Malabar and Quire Sans typefaces for the design. He then started getting into greater detail, like the events section and a parallax scroll to emerge the user into each event. The image gallery, footer, about section and blog design came after.

Evan and Brent split time between the site and a refined logo that would make HOTH proud. This took a number of attempts, but they were finally able to land on a lovely logo that showed off the hills of Rwanda's countryside.

Malabar

Quire Sans

Development

The key to success at an event such as the Overnight Website Challenge is to come prepared. We had set up once a week meetings for 8 weeks before the event. These allowed us to select technologies and set up an environment– things you don't want to be working on the night of. Before we had even walked into the hackathon, we were set up with a Foundation/Sass framework, WordPress back-end and Github source control. All of our frontend and backend devs prepared themselves in their assigned areas before the actual event.

When requirements started coming in, the backend team was able to get started. Venkat started working on implementing a Paypal donation WordPress plugin and setting up social media for the site. Once this was done, he had the challenge of building a custom plugin for flickr so HOTH could bring in their images using their flickr account.

Quieter team, messier desks. Around 2am, the team is still hard at work.

As soon as the design started to come together, I was able to start shaping the Foundation framework to work with the new site. I set up a Fonts.com Web Font Project for the sites typographic needs and also started working on bringing the video background to life.

As the night wore on, the site began to come together. Brandon started work on the integration of Ashley's HTML for events into WordPress, while Andy added the logic for the section and Reed designed the parallax scrolling. We began with a parallax library, but realized a few hours in that it was more trouble than it was worth and ended up building the parallax component from the ground up.

"Before we had even walked into the hackathon, we were set up with a Foundation/Sass framework, WordPress back-end and Github source control."

The teamwork was apparent and necessary throughout the challenge. The HTML/CSS was created and handed off to integrate with the logic while others worked on the JavaScript to bring a polish.

End of the Event

Near the end of the night, we were polishing the design and finalizing the details of the layout. Gathering final approval from a client at 6 a.m. is an exhausting task, but knowing it was for a great cause was a wonderful motivator.

As development wrapped up, QA tasks were assigned and we worked through the backlog to figure out what remained. At the end of the event, the about section, events, donate and footer were complete, but there was still quite a bit of work to do on the image gallery and blog.

In the end, we were tired, but also felt accomplished. We had a plan to complete and launch the site and were ready to get some sleep.

The Fonts.com development team sporting their matching hackathon shirts at the event.

The Future

Launching the site proved to be extremely gratifying. We are very excited to share with you what we have accomplished alongside Heart of a Thousand Hills. Please take a moment to view the site and let us know what you think. We were very honored to have received the "Biggest Impact" award. We hope that it means that we really have made a difference in the efforts of this charity and the children they support. We wish HOTH and the rest of the charities involved the best of luck in the future and we look forward to next year's event.