Blog (view all)

The Indy Givecamp was an awesome opportunity for us to put to work some of our in-house processes and see how efficient they really are. I thought it was an interesting opportunity to post about some of the processes that we go through here at Web Easy Media, only at a faster pace.

Before the event, each of the charities were interviewed. This allowed for the organizers to get a general sense of which group should go where. Our group happened to request an open source CMS for managing their site and preferred that it would not be a .NET application. This is why they were assigned to a 'Drupal Guy'.

The Client

Background: Our charity was the Autism Advocates of Indiana. Their existing site consisted on a fair number of static content pages and sidebars full of links accumulated over a number of years. Some of these links were actually download links to download Word Documents with information in them. They were not comfortable updating this site and wanted a CMS to make it easier for them to update and create fresh content as a team rather than as a single tech. Patty was the president of the charity and provided us with the vision of the company and it's goals. Justin was the single person managing their site, but would like to allow other members of their organization to create periodic updates to the site.

We began our sprint by introducing ourselves and expressing our strengths as individuals. I thought that this was very similar to the selling conversations where you are expressing your strengths to the client, and allowed the client to better understand what the team is capable of.

We started off with some high-level questions like "What is the main goal of your website", "What don't you like about your current website?", and "What would you like to see in your new website?" One would assume that these questions are very basic, but you may be surprised how many times these questions actually aren't asked in the initial phases of some shops. These questions can also be built upon in a number of ways to better understand the company and their needs.

We also asked for the persona of visitors that they expect to reach or would expect to be searching for their information. For example, our client, Autism Advocates of Indiana, expected parents of children with autism to be their primary target. These parents would be searching for information about autism, resources for information and help, and activities within a nurturing environment. The second target would be corporations or individuals who want to donate to a worthy cause. They would be looking for a professional presence to give them confidence in where their donations are going, explanations about what the money is used for, evidence of events and activity, and an easy way to complete the donation process when they are ready.

The Structure

With the goals, likes, and dislikes in mind, we began to dissect their existing site. We started off by drawing out their existing site map on and defining what each section is for. After a general understanding, we began to re-organize the content.

We simplified the primary navigation by assessing the content of each link. Some links seemed redundant and made sense to combine them into a single page. Some items were grouped under a single heading that would become the high-level navigation link.

We then prioritized our new navigation based on

1. The prominent messages the client wanted to convey
2. Areas of greater perceived value to the main persona of visitors
3. Specific/targeted information for more specific potential searches

As we documented this information and prioritized, we began to unravel our new sitemap.

The Plan

Our plan was to identify a feature list and assign tasks. We had a team of 6. As the project manager, I brought my knowledge of Drupal and theming skills. We had another themer, a designer, and 2 .NET developers with no experience in PHP or Drupal development.

The team with the charity representatives at the end of the event. One team member had to leave early and is not pictured here.

The main tasks were site building, design, and content transferring. Since we were heavy in the design talent and weak in the custom development, we wanted to maintain as many out-of-the-box features as possible.

I decided to give the sitemap to 2 design guys for wireframes. Then we would re-group, review the wireframes, and with luck get started on the design. For the rest of the team, I wanted to give them a crash-course in Drupal Basics and a little guidance to where to find most module settings. With the basics understood and a willingness to bump around a little bit in some module configuration settings, we could confidently complete the website probably by day 2 and spend the reset of the time transferring content, refining the design and implementing it, and adding extra features to the site.

The Execution

The designers were given our new sitemap assigned to make the wireframes while the rest were given some Drupal Basics. The team was eager to learn Drupal, so they wanted to walk through the site from start to finish, including the installation, module choice, and configurations. The first night was spent explaining Drupal, creating content types, and copying content from the existing site into Drupal. The designers worked out our wireframes and began working on some designs. We had a list of site features, like the home slideshow, that we browsed through other sites to find examples of ones that we liked. Then we compiled our findings and decided on an approach. By the end of the first night, we only had a basic installation of Drupal with some content, but we had our site plan, wireframes, and the start of a mockup. We also had about half of our content copied over into the new website.

The initial mockup sent to AAI on Saturday for approvial. Later the light blue was removed, a gradient was added to the block headers, and a puzzle piece texture was added to the background.

The second day began with finalizing a design from the wireframes. We wanted to get this approved by the clients so we could move forward with the rest of the site. Once the design was approved, we created a Fusion subtheme with a number of block styles for the different colors of headers. The content copying was focused on during the morning and through the afternoon we created views and blocks from a list we compiled based on the wireframes. We met with the client in the afternoon and did a short training session on how to edit the content of their new website. We also showed them where they could find some basic features and gave Justin access to more administration areas.

By evening on the second day we had a fully functional website with a new theme. We were able to begin some testing and de-bugging as we added some bonus features, like a PDF reader for their monthly newsletters, Facebook share links, WYSIWYG style edits, and event photo galleries. Then we did some browser testing before preparing to transfer the site to the live server.

The morning of the third and final day was spent trouble-shooting a problem between the donated server and the building's wifi. The only way we could successfully log in by FTP was to teather a phone or go somewhere else to upload our files. Our development took place on a Web Easy Media linux server, so when we did get our files uploaded and the database transfered to the donated Windows server, we wanted to test as much as possible to ensure that everything was working the same. In the end, this was a temporary location because the client decided to upgrade their existing hosting and later transfered their website to their upgraded hosting package.

By 12 PM, we were satisfied with our testing and were ready to present our website to the client and the rest of the group. The presentations started at 2 so we spent the remaining time refining the usability for administrators by installing the Admin module and creating custom menus for each role. We also spent a lot of time documenting what the different fields, functions, and menu items were for, so the client could read the information as they navigated through the site.

We lead the presentations which began at 2 and demonstrated the extra features that we had included for our clients. They were very happy with their new website and ready to take it over and begin managing their site themselves.

Click the image below to see the live site that was a result of the Indy Givecamp Weekend