home | about my design | portfolio projects | web resources

Northern Virginia Chorale logo


www.northernvirginiachorale.org

or:
www.northernvirginiachorale.com



~ Homepage example ~

 


About the Chorale:

The Northern Virginia Chorale of Springfield, Virginia has performed both at home in the Washington Metropolitan area, and abroad. Their venues include such prestigious locations as The Kennedy Center, The National Cathedral, The National Shrine of the Immaculate Conception, and the French Embassy. They have also toured several European cities; most recently Italy.

The Chorale sings from a variety of musical genres which include classical composers, contemporary Broadway music, Americana and popular music, as well as “unusual” old (Medieval and Renaissance), and new classical Holiday music for their audiences, under the leadership of their talented director, Robert S. Webb, Jr. The high quality of their musical choices and concerts has pleased audiences for many years. Often they are accompanied by a small orchestra, as well as talented soloists. More can be learned about the history of the Chorale on their website.

I have worked with the Chorale since 2005, to develop the various sections of their website which now include: present and past Performance Schedule pages, an online Box Office page selling concert tickets to their performances, both audio and YouTube examples from their performances, as well as CD offerings. Additonally, we added a an internal, For Singer’s Only section which is password-protected and provides extensive musical resources and mp3 files for voice practice; as well as other pages devoted to information for New Singers, membership options, forms for online donations and advertising purchases, and other types of fundraising done by Chorale members. I have also worked with the Chorale to develop their logo, which has gone through revisions. The logo has been translated into a car decal, used in their concert brochures, as well as in Washington Post ads. More on each of these items and the overall website development, is outlined below.


PROJECT SUMMARY:

I created the first version of the current NVC website in 2005, in response to the Chorale's need for a website, to replace a previous version which had never really been developed and was no longer online. We purchased a new domain name and set up hosting through Network Solutions. Over time, the look and the design of the current website, as well as its content have expanded and changed quite a bit. The current site uses purple, brown, green, and taupe or beige colors within each section, along with a graphical musical note theme, accompanied by a Flash header on the homepage. The NVC’s objective was to create a functional website and logo design to represent their musical performances online, and to also serve them well both internally with their own singers, as well as externally, by attracting new singers as well as audiences, through their various online offerings of concert and musical samples. The site has accomplished these things, and we continue to make updates to it to keep up with both the latest web technologies, as well as with the Chorale's annual activities and events which they advertise, all within the budget of a nonprofit of their size.

Colors and design:

The original site color palette was purple and green, with black and charcoal gray text on white backgrounds. In 2008-’09, after revising the logo design, we updated these colors to include a new palette of dark brown backgrounds with current taupe and beige content area boxess on each page, while still using the purple and green as accent colors in the text and elsewhere. For the text headers on each page, we had previously used a fancy script font called English Vivace, but switched to the less ornate, Signet Roundhand which has a nice, even, and more legible appearance while still providing some formality to the headers. The headers also include a large musical note to designate each of the site’s sections.

Logo Design:

The original logo design included a white G Clef on a simple, wavy music bar, set against the background of a dark green circle. This logo served as the basis for the second, improved logo design which was created in 2007, and includes a modified music bar with an artistic brush stroke applied to it (created with Adobe Illustrator). 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 name is incorporated into the new design, around the perimeter of the green circle as text on a circular path, and the most recent logo also uses their initials. Pictured below are three of the logos with the logo on the right being the most recent version. This logo was further modified in 2010 to include the capitals N, V and C across the front as a means of branding the Chorale’s initials. This logo also uses a slightly altered shade of dark green from the second version. The first version with the simple music bar, used a brighter shade of green initially.

Northern Virginia Chorale


2010 Flash animated header and imagery

As the website expanded we included two Flash slideshow presentations of photo galleries of the Chorale, found under the About Us section. Most recently, we added a Flash homepage header that uses animated for their signature quotation, as well as static images which appear at the end, of the Chorale performing in their home venue of St. Mark's Lutheran Church in Springfield, Virginia against the backdrop of a photo of the Blue Ridge mountains. The image of the Blue Ridge was chosen because it evokes a feeling for the scenery and natural beauty of Virginia, as well as many of the songs and composers that the Chorale performs, which represent American heritage and history, so the photo works well both visually, and symbolically for this reason, by representing the state of Virginia and its place in musical history.

animated header

A screenshot from the animated header

The Chorale’s online needs continued to grow between 2008 and 2010, resulting in the addition of several of the features mentioned above. I spent a lot of time working with their past President to develop these new site features, which are described in more detail below, and which have enhanced their website both with an updated appearance, as well as greater functionality and options for visitors to the site.

Navigation:

The original website navigation I created was CSS-based, and vertically oriented on the homepage left sidebar; and oriented horizontally across the top, 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 additional decoration. Under each main header, sub-pages appeared as individual links, as well. The navigation also carried out the musical note theme within each of the main sections of the site horizontally at the top of each page, but was not the most practical navigational solution as our site expanded in size, because the links eventually became too long for the homepage. The newly added sections and pages called for a rearrangement of much of the website page architecture too, so the need for a horizontal, drop-down type of exandable menu was definitely in order. In 2010, I converted to a horizontal drop-down menu that incorporated all of the site’s sections. We also renamed some of the main navigation tab/section headers, to make them fit better across the horizontal bar placed at the top of each page. I used a similar color scheme to match the site colors, and integrated all of the JavaScript and CSS on each page for the drop-downs. The navigation is both a CSS and JavaScript-based menu that did not require more advanced programming (such as JQuery or other options), but did require a lot of code to be inserted within each page. It works quite well as a more compact version of the original navigation, and gives the site a much cleaner appearance, saving a lot of space on each of the pages as well as providing more uniformity. Additionally it allows for greater ease of use, and is easy to add to, or take links away from the drop-downs, as necessary. So this was another much-needed improvement to the site.



Homepage showing navigation drop-down example

 

Screenshot of Season Performance page

Season Performance page - 2015

 

-------------------------------------------------------------------------------------
The For Singer’s Only Section

Another important addition to the site in 2007, was a password-protected For Singer’s Only section, which consists of six pages providing Chorale members with practice resource links from other musical websites through downloadable mp3s, and/or parts dominant voice, and .midi files; as well as YouTube and ITunes tracks, all recommended by their Director for rehearsal purposes. This section also incorporates reminders, and sometimes extensive rehearsal notes provided by their Director, in addition to the audio tracks and mp3s, a concert schedule and program, and a page of singing tips (also provided by the Director), as well as information on the Kennedy Center Messiah Sing-Along, which the Chorale participates in each year. The section is updated in preparation for each concert, during the season.

To set this up, I worked together with the President and technology director/website coordinator, who records and prepares all of their music .mp3s 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 Singer’s Only section has given the Chorale members an immediate means of communication between themselves and their Director through the site, after weekly practice sessions, and has become a valuable resource enabling members to rehearse their music from home more effectively and keep up with important notices and information. This was a fun project to be involved with, and allowed me to learn more about the various musical recordings, composer background and some of their history, as well as a little bit about using sound editing software, while preparing their music files for the web.

Some screenshots from the For Singers’ Only Section


Fundraising Options

Amazon.Com

One of the primary goals of the site upgrades was to give the Chorale a way to do fundraising online, as well as to make purchases easier for people so they could buy things online, like concert tickets at their convenience. After considering ways in which the Chorale could raise money to support its operational costs, one of our choices was between using Google ads, or creating an Amazon.com shopping page. Amazon.com we decided would be the more useful means of earning extra revenue, while also meeting the Chorale’s own needs for ordering musical products for their rehearsals and practices. The shopping page also allows the Chorale to earn a percentage of revenue from each purchase made through their site, as a partner of Amazon.

We have set up this page with shopping geared towards voice and choral products, using widgets and product bars with links that provide access to online shopping for the general public, as well as for the Chorale’s members, by way of links to classical musical CDs, mp3s, best-selling books, and a number of other merchandise choices available from Amazon.com. A user can go to the site and purchase anything they would like through any of the links, which just serve as an entry point to the Amazon.com website. The Chorale will receive credit for any purchase, so it serves as a useful way to supplement their other fundraising efforts. The shopping page also works together with their For Singers’ Only section, by coordinating the music Chorale members need to buy for practice, through the various 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 it is considered 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 their 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 colors and some design features. We then configured their standard donation form with all of our different options which included:

  • selling tickets online at various price levels for three yearly concerts;
  • accepting general donations at several different price levels;
  • the option to purchase three different sizes/types of advertising;
    and
  • the option to pay for Chorale membership dues online.

The form was an all-in-one type of a solution, which existed as a single form within our web page, but was actually hosted on their site. Initially, it solved the problem of not having a secure form through which the public could purchase tickets as well to as to take advantage of these other offerings. It was relatively easy to modify, and keep track of purchases through a system of receipts and emails within a database on the NFG site. But in the long-run, the Network for Good service did not prove to be cost-effective enough for us costing more to operate than any profits gained; and the one-page form also had become too complicated with all of its different offerings, requiring a lot of instructions for users.

After a year, we decided to look again at other alternative online payment systems, and finally turned back to what had been our second choice originally, which was to use PayPal. The PayPal service has in the end, proven to be both more affordable, and much 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 our site, as separate forms with separate payment buttons for each purchase type we are offering. We have separate explanatory pages with separate buttons devoted to each of our four types of transactions: tickets, donations, advertising, and Chorale memberships. While this required creating four new web pages for the site with the integrated PayPal buttons, separating the offerings has simplified things considerably for our users, as well as for us to maintain, as the forms are quick and easy to update, and values can be changed as needed with the buttons, plus most computer users are already very familiar with how to make online purchases through PayPal. While Network for Good did offer us an all-in-one form that melded nicely in appearance with our site, we had to program too many options into the single form, and the cost of adding additional forms for each of these types of transactions was not within our budget, so the choice became clear. The form also did not allow for automatic calculations, requiring the user instead, to input a final “total” for all of their purchases at the bottom calculated themselves, which was a bit inconvenient, and along with the lengthy instructions, made things more complicated than most users had patience for.

We have found that the purchases are more easily accomplished with PayPal, and cost us nothing additional. Plus, the PayPal functionality will automatically update the user’s shopping cart whenever a new item is added to it, so the total is calculated for the user automatically, making for one less step in the online transaction process. For these reasons, PayPal seems to be a much more user-friendly choice for us. The Chorale has been able to realize profits now, instead of just trying to cover the costs of operating the online payment system and “breaking even.” For those who do not wish to use the online process, we still offer our downloadable, printable Ticket, Donations, and Advertising Form in PDF format, which users can fill out and send back with their checks, by regular mail. The printable form also gives users the ability to submit their advertising copy, if necessary, so serves an additional purpose for the advertisement purchase transactions. It is accessible on our PayPal form pages now, for users who do not wish to be bothered with online payment transactions at all. Previously, the Chorale sold their tickets over the phone or by email, so the online process gives users the option and convenience of purchasing online, bringing their website up-to-date technologically, and the PayPal tickets can also be purchased via mobile devices, as well.

Another option we considered more recently, was to advertise the Chorale's concerts through InstantSeats, as the InstantSeats email reaches a wide audience within the region. However upon further investigation, we decided that this option might not give the Chorale enough of a financial profit to make it worthwhile, given the size of their concert venue, and the number of tickets they sell, so PayPal for now is our preferred option.

Musical features:

Audio Files
The Chorale features an individual song on its homepage which will automatically stream when the page loads, through 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 from their recent concert in this playlist.

Additionally we also set up a page of audio clips from 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, or Windows Media Player, so users can hear some of the Chorale’s concert pieces live on the site.

CDs of Chorale Concerts
Under the Season Schedule navigation tab drop-down, and the Past Performances sections of our site, we dded a page for ordering CDs of past concerts. This page provides a printable order form in PDF format, rather than a PayPal form. Users can first go to the Past Performances page, and browse through the concert descriptions they to decide which concerts they might like to order a CD of; then go back to their form and fill out and mail it in with a check to the man who sells the CDs. This was easier than trying to configure a new online form with all of the Chorale’s many concert CD choices. The CDs are not a profit-maker for the Chorale, but are prepared by a musical technician who records all of the the concerts and then produces them in the CD format, so this is separate from the other fundraising choices on the website. However, the Cds provide a wide variety of musical offerings that showcase the different genres of music the Chorale sings, from popular Americana and Broadway tunes, to classical Baroque, such as Bach and Beethoven, as well as great holiday music, each year, so make a nice gift for someone or a great addition to your own music library.

YouTube Videos
In 2009-2010, the Chorale began to record their concerts in video format as well, and upload those to a YouTube channel they set up. They wanted to have a page on the site which featured their videos so that people could also watch the Chorale singing in their recent holiday concerts. This new page features the YouTube concert videos from their 2009 December Holiday Concert. The YouTube videos are embedded directly on the website, and open with a Lightbox script. They can be played on the site, or clicked hrough and watched at full screen size on the YouTube site, with all other related musical videos in that given genre. The popularity of YouTube of course goes without saying. The Chorale is fortunate now to be able to offer all of these different types of media on their website thanks to their video recorder and producer.

Summary:

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, Ted Cummings, 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 to find ways on how best to implement all of them. Whether it involved making the site a useful resource for their members 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 offset some of their performance costs; it has all been a valuable learning experience for me as a webmaster.

The task for me initially, 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 skillset. From this experience, we have learned how to set up an online payment system; 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 how to provide CD offerings as well as sample mp3s for listening. All of these things have helped to attract new singers to join their group, as well as to define the Chorale’s Internet presence and identity, as well as their disctinctive “sound” online.

Setting up the For Singer’s Only section has given the site a third dimension for the benefit of the Chorale members, while posting mp3s and information on the main site like Concert Notes on the history of their composers, has been both interesting and educational for me, as well as the general public. 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 like the Chorale, which are giving back to their communities in many ways, without generating huge revenues for themselves. Organizations like the Chorale provide valuable and rewarding entertainment experiences for the public. Audiences can enjoy their music both in person, as well as online now, through the website. I have found that the goals of every website are different, depending upon the organization and its needs; so for a webmaster the learning experience also overlaps into other areas beyond just technology and the design. Our site has experienced a few growing pains along the way, but finding new solutions has also helped to solve those in many cases. As with any website, there has been 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 include a sound editing software called WavePad, and ability to embed the YouTube video code using a Lightbox JavaScript, as well as the Flash slideshow templates from Picasa used for their photo galleries, and the mp3 players used on both the homepage and the Audio clips page.

 

back to top




back to Other Projects page >>