The Northern Virginia Chorale
of Springfield, Virginia

www.northernvirginiachorale.org
or:
www.northernvirginiachorale.com

---

PROJECT SUMMARY

on additional design and features added to site between
September 2007 — April 2009; and an updated navigation
and page design this July, 2010

PROJECT OUTLINE:

In 2005, The Springfield Chorale asked me to design a new website for them. Their original site was no longer functional or even online, so creating a whole new website was the objective. I developed a new look for them, basing the navigation and site structure on what they had left of their previous written content sections. We chose site colors in two shades of lavender/purple, with a dark and light green as accent colors, and black and charcoal gray for the headers and text. I used musical note images on each of the headers, and smaller notes next to the navigation links. The Chorale also had some photos of their performances which we used on the homepage and the About page.

They were also in need of a new logo. The first logo I created for them was not a very successful design, but served as the basis for an improved second logo design, which was created in 2007. For both designs, I started with the idea of using a G Clef on a music bar. As mentioned, the first rendition of this idea was not very sophisticated looking as a logo design, so it was back to the drawing board a couple of years later. In 2007, I created two new versions of the G clef on a wavy music bar, set against a dark green background with their name in circular type around the perimeter. (In the process of changing the logo, the Chorale also changed its name from “The Springfield Chorale,” to “The Northern Virginia Chorale” officially, in 2007.) The first version of the logo used a music bar behind the G clef which had thin wavy white lines, while the second version had a more elaborate music bar with an artbrush stroke applied to it, making for a more exaggerated wavy music bar. We used the one with the thin wavy lines up until last year, then decided to go ahead and switch to using the alternative logo design, which is featured at the top of this page now.

Other than the logo and a few photographs, the site did not have much else on it in the way of images initially. Over the past few years however, as they have done concerts in other cities and have accumulated more photos, they are now included on their site in the Flash slideshow presentations under the About Us section, as well as in the homepage header image.

The Chorale’s online needs continued to grow from 2007, resulting in the addition of several new features for their site between 2008-'09. I have spent a lot of time working with them to develop these new site features, which have enhanced their website in both appearance and functionality. The new features have provided the Chorale with the means for online fundraising alternatives, as well as other things mentioned in more detail below; as well as an updated look and design, too.

Colors and design:

The original color palette was purple, green, with black and charcoal gray text. In 2008-’09, we updated these colors to a different palette that now includes a dark brown background with different shades of beige for the content areas on each page, while still using the purple and green as accent colors. The black and charcoal gray text have been eliminated altogether. For the title headers on each page, we had previously used a fancy script font called English Vivace. This time we selected a new font for the headers — the less ornate Signet Roundhand, which has a nice, even and legible appearance while still providing some formality to the headers. As mentioned above, the headers also include a large musical note to designate each of the site sections, which were repeated in a smaller size, next to the navigational links. The navigation notes complemented the logo too, but most recently the navigation has also been updated, so the musical notes are no longer included there now.

Imagery:

In 2008, we also decided on a new header collage for their homepage which used three recent photos of the Chorale singing in different concert venues and locations. It incorporates a background image that shows the Blue Ridge mountains above the three photos of the Chorale singing, framed by a curved edge that mimics the curve of the mountain range. The photo of the Blue Ridge mountains is one that I took on a trip to Asheville, North Carolina, and it just happened to work perfectly as a backdrop for the Chorale, as it evokes a feeling of the scenery and natural beauty of Virginia, since the state also borders the Blue Ridge; as well as many of the songs the Chorale sings which have to do with American heritage and history.

As mentioned above, thre are now also two new photo galleries on the site — one from the Chorale’s 2008 December Holiday Concert, and a more recent one from their 2008 Summer trip to Italy — both of which can be accessed under the “About Us” navigation section.

Navigation:

The original website navigation I created was CSS-based, vertically oriented on the homepage, and horizontally on the interior pages. It used the purple and green colors in hover and visited links, and the small musical notes next to each section link for decoration. Under each header, the sub-pages were each individual links as well. The navigation carried out the musical note theme within each main section of the site, but it did not prove to be the most practical navigational solution as our site expanded in size, because the links eventually became too long for the page as the site grew.

Since 2007, we had added new sections and pages to the site and rearranged some of the page architecture as well, so the need for a horizontal, drop-down type of menu was definitely in order. Finally, this month (July 2010), I was able to code a horizontal drop-down menu that incorporated all of the site pages. We renamed some of the main section headers to make them fit better on the horizontal bar across the top of each page. I used a similar color scheme that would go with the site, but also incorporated the beige background color, then integrated all of the JavaScript and CSS on each page for the drop-down. The JavaScript drop-down did not require Ajax or some other advanced coding language, but was a basic CSS and JavaScript menu that was easy to implement, although required a lot of code to be inserted on each page. The new navigation has helped to condense what was becoming an unwieldy navigation for the size of the site, however. The drop-down gives the site a cleaner and more compact appearance, and takes up less space as well. It is also easy to add to, or take away links as necessray. While I gave up on using the musical note images in the navigation itself, I have found other ways to incorporate those on each page as graphics, and have used some background textures to update the look and formatting of the pages, along with the navigation bar.

Fundraising solutions:

Amazon.Com
One of the primary goals of the site upgrades was to give the Chorale a way to raise funds online, as well as to make online purchases easy for people so they could buy things online like concert tickets. After considering ways in which the Chorale could raise money to support its operational costs, one of our choices was to use Google ads, or to create an Amazon.com shopping page. Amazon.com proved to be a more useful means of earning revenue, and also met the Chorale’s own needs for ordering musical products for their rehearsals and practices. On the site we set up a page specifically for Amazon.com shopping, geared towards voice and choral products, which uses various Amazon widgets and bars with different kinds of product links. This has proven to be quite useful for the Chorale members, but also provides online shopping for the general public as well by way of links to classical musical CDs, mp3s, best-selling books, and myriad other merchandise that is available from Amazon.com, which someone might wish to buy. The shopping links allow the Chorale to earn a percentage of revenue from each purchase made through their site, from Amazon. Additionally, the shopping page also works with their For Singers’ Only section, by coordinating the music they need to buy for practices, through the Amazon widgets. The shopping page has helped the Chorale to raise incidental money to support its operational costs, while also serving as free advertising for Amazon, so has been a win-win situation for everyone.

Network for Good vs. PayPal
In March of 2009, we tried out a secure contribution and donations form through a company called Network for Good. The Chorale researched various means of collecting online donations, and discovered this company as a viable (and reasonably affordable) option for nonprofits. They decided to partner with Network for Good for one year, to set up a donation form that could be modified to suit our individual needs, and accept secure financial transactions of four different types. We created a page on our site that actually resided on Network for Good's server, but used our own site design; then configured their standard donation form with our different options which included selling tickets online at various price levels for their three yearly concerts; accepting general donations at several different price levels; the option to purchase three different types of advertising; and the option to pay for Chorale membership dues, as well.

The form was an all-in-one type of solution and existed on a single webpage. While initially it solved the problem of not having a secure form through which the public could purchase tickets and these other offerings, in the long-run the costs of using The Network for Good service did not prove to be cost-effective enough for us, so this past year (2010), we were once again looking for an alternative online payment system. We finally turned to what had been our second choice originally, which was to use PayPal. This has proven to be more affordable and in some ways, more efficient, as well. The difference in the setup with the payment forms on our site is that the PayPal forms are now used in four different sections of the site, to cover the different kinds of purchases we are offering, with a page devoted to each of the four types of transactions: tickets, donations, advertising, and chorale memberships. This required the addition of new web pages to the site with integrated PayPal buttons, (which we utlimately program ourselves). The PayPal option seems to have simplified things considerably for our users, as well as for us to set up and maintain, as the forms are quick and easy, and most computer users are already familiar with how to make online purchases through PayPal.

The Network for Good form, while being an all-in-one solution required quite a bit of maintenance and explanation/instruction for the user as to how to fill in each part of the form, in order to make the individual selections user-friendly. It also could not perform automatic calculations, requiring the user to input a final “total” for all of their purchases at the bottom, which was a bit inconvenient. In some cases, it also would not allow the user to do more than one of each kind of purchase transaction, at a time. The Network for Good form was really not meant to handle as many different types of transactions as we had tried to program it for, so the only real solution was to break down the different transaction types into separate forms (and pages). This was more easily accomplished with PayPal and cost us nothing additional. Plus, the PayPal functionality will automatically update the shopping cart whenever a new item is added to it, so the total is calculated for the user, making for one less step in the online transaction process. For these reasons PayPal seems to be a much more user-friendly as well as a more cost-effective a solution, for our organization. This way, the Chorale can realize some profits instead of just trying to cover the costs of operating the online payment system and “breaking even.”

Previously, the Chorale sold their tickets over the phone or by email, so we feel that this online process gives users the option and convenience of 21st century technology, and brings their website up to date. For those who do not wish to use the online process, we still offer a downloadable, printable Ticket, Donations, and Advertising form in PDF format, that they can fill out and send a check by regular mail. The printable form also works for users to submit their advertising copy, so serves an additional purpose. It is accessible on all of the PayPal form pages now too, for those users who do not wish to be bothered with online payment transactions.

Musical features:

Audio Files
The Chorale generally features an individual song on its homepage that will automatically stream when the page loads, using a cross-browser compatible Flash-based mp3 player that can be turned on or off at the bottom of the page. We have placed one song selection on their site after each concert, but recently have not been able to get the mp3s updated as frequently, so this option requires some additional maintenance from time to time.

As additional listening features, we set up a page of audio clips from their previous concerts, which is updated from time to time with new music. The page has an mp3 player on it with a playlist, but songs can also be downloaded and played individually with QuickTime, so users can hear some of the Chorale's concert pieces live on the site.

CDs of Chorale Concerts
Within the Performances section of the site, we have also added a page for ordering CDs of the Chorale’s past concerts whichare produced by a technician who records all of their concerts. This page has a specific CD ordering form in PDF format, rather than a PayPal form. Users can first go to the Past Performances page, and choose the concert(s) they would like to order a CD of, then fill out and mail in the form with their check. This was easier than trying to configure a new online form with all of their many concert CD choices. The CDs are not a profit-maker for the Chorale, but they still wanted to offer their music in the form of CDs for purchase.

YouTube Videos
Finally, this past year (2009-2010), the Chorale began to record their concerts in video format and upload those to YouTube. They wanted to have a page on the site which featured the videos so that people could watch the Chorale sing as well as listen to their mp3s. The new page features the YouTube concert videos from their 2009 Holiday Concert. The YouTube videos are embedded directly on the website, and can be played on the site, but also offer the option to click through and watch them at full screen size on the YouTube site, with all other related musical videos in the given genre. The popularity of YouTube of course goes without saying, and the Chorale is fortunate now to be able to offer all of these different types of media on their own website thanks to YouTube, as well as their own video producer.

The For Singer’s Only Section
Another important addition to the site in 2007 was a password-protected For Singers’ Only section, which consists of six pages providing the Chorale members with downloadable current practice mp3s, and other musical voice resources such as YouTube and ITunes tracks recommended by their Director. This section consists of reminders, rehearsal notes, audio tracks and mp3s for home practice, as well as parts dominant midi files for voice practice; a concert schedule and program, and a page of singing tips also provided by the Director. The section is updated weekly in preparation for each concert, during the season. To set this up, I worked together with the Chorale’s technology and website coordinator who records and prepares all of their music for their practice sessions. He provided me with the content and an outline which I then translated into the six-page, internal website with its own navigation, divided into the sections listed above. The For Singers’ Only section has given the Chorale members an immediate means of communication between them and their Director through the practice notes, after weekly practice sessions, and has become a valuable resource enabling members to rehearse their music from home more effectively. This was a fun project to be involved with, and allowed me to learn things about musical recordings as well as some musical history. I have also learned a little bit about using sound editing software, while preparing their music files for the web.

Click here to view some screenshots from the For Singers’ Only Section

 

About the Chorale:

The Northern Virginia Chorale has performed both at home in the Washington Metropolitan area, as well as in several very impressive European venues, singing a variety of music for different audiences under the leadership of their talented director, Robert S. Webb, Jr. More can be learned about the history of the Chorale and their Director, on the About Us page of the website. The Chorale has been pleased with their new website look, their For Singers’ Only section, and their online, payment processes. The logo has also been translated into a car decal, used for newspaper ads, as well as in their concert brochures. It is a logo that works well at both a large and a small size, and provides the Chorale with a distinctive identity along with the other photographic images on their site.

In Summary, What I Have Learned as a Webmaster:
One of the most important things I learned about working with a small nonprofit organization such as the Northern Virginia Chorale, was not only what it took to help them create a visual identity online, but what was required to help facilitate their online fundraising — which for a small organization such as theirs was a vital necessity. Learning more about the operational costs of a community nonprofit, and how the website could become a useful tool to help raise money to meet those costs, was one of the goals of the technology coordinator, and current President, with whom I have worked over the past few years. He had a great vision as to what he wanted to accomplish for the Chorale, and we worked together finding ways on how best to do that. Whether it involved making the site a useful resource for the Chorale with online rehearsal notes, mp3s and other downloadables for practice; or making it into a profit-generating tool that could help them gain financial funds to help pay for some of their performance costs — it has all been a valuable learning experience for me.

The task for me as a webmaster was how to help their organization find and implement these online solutions using effective technology, as well as how to present them visually. Working on these things has certainly helped me to grow my skills too. From this experience, we have learned how to set up an online payment system and what works and what doesn’t from a user’s perspective, as well as from a financial perspective. We have also learned how to find ways to show what the Chorale does as a group through photo galleries and video presentations of the them singing, and this has also helped to attract new singers to join their group. Setting up their For Singer’s Only section has also given the site a third dimension, and posting things like their Concert notes on the history of their composers has been educational as well. This site, more than many of the others that I have managed has been the most rewarding for these reasons. It is interesting that some of the organizations that provide the most learning opportunities — in this case to learn about both music as well as online fundraising — are small nonprofits that are giving back to their communities in many ways, without generating huge revenues for themselves. Organizations like the Chorale provide rewarding, educational and valuable entertainment experiences for the public, and people can now enjoy their music both in person as well as online through their website. I have found that the goals of every website are different, depending upon the organization and its needs, so as a webmaster the learning experience overlaps into many areas besides just the technology and the design. The site has experienced some growing pains, but finding new solutions has also helped to solve those in many cases. As with any website, there is always room for improvement as web technologies change and develop too, but so far we seem to be keeping up with a lot of it.

Technologies used:

The website was created and is managed with Dreamweaver CS4; the graphics for the site with Adobe Photoshop and Illustrator. The logo was created with Adobe Illustrator (including hand-tracing the G Clef to make it a scalable, vector graphic.) InDesign was used to format the Donation letters and the Ticket and CD order forms which were all made into printable/downloadable PDF files for the website.

Other technologies of course include the sound editing software WavePad, and ability to embed the YouTube video code using a Lightbox JavaScript, as well as the Flash slideshow templates from Picasa for their Photo Galleries, and the mp3 players on the homepage and the Audio clips page.