Purpose
The purpose of my website is to provide a central place for students in my top high school choir, Belton Singers, and their parents to go for information on performances, the choir trip, uniforms, fundraisers, and pictures and videos of past performances.
Belton Singers has many performances throughout the year within the community. Many of these are scheduled as the choir is asked to sing at various events. The site would be a place for a member of the choir or their parent to go for up-to-date information on upcoming performances and after school rehearsals.
The choir is traveling to Washington, D.C. this school year and the website would have details on the trip, payment due dates, and upcoming fundraisers. At the beginning of the school year, the choir members purchase tuxedos and dresses. This website would be a place to find information on outfit ordering and payments. The site would also be a place parents, students, and anyone can go to see pictures and videos of past performances and events.
In the past, the content I am placing on the site has been handed out to students on paper and sent to parents through email. These methods of dissemination have not reached everyone or been very effective. This site would allow me to update pages, and then send out a text notification to parents and students to check the website for new information. The site would be an important tool of communication and information for the choir program.
Use Cases
Use Case 1: Choir Member needing information
Actor: Choir Member
Basic Flow: A choir member knows there is a performance tomorrow, but he doesn’t remember the time or what to wear. The choir member goes to the website and clicks on the “Performances” information page. He finds the arrival time and sees he should not wear his tuxedo. The choir member is prepared for the performance the next day.
Use Case 2: Parent checking for conflict with School trip
Actor: : Parent of Choir Member
Basic Flow: The parent of a choir member is scheduling an out-of-town trip, but doesn’t remember the date of the Choir Trip she and her student are going on. The parent checks the website and clicks on the “Choir Trip” tab. The trip details are easily visible and the parent is able to schedule the out-of-town trip without conflicting with the Choir Trip.
Use Case 3: School Administrator wants to see what the choir is up to this year.
Actor: School Administrator
Basic Flow: A school administrator would like to be informed about the activities of the choir this year and see if her schedule allows her to attend a concert. The administrator accesses the choir website “Home” page and sees that the current year’s information is available. She is reminded of the Choir Trip that was approved last year and clicks on the “Choir Trip” page. The trip looks very educational to the administrator and she also decides to support the choir by going to a silent auction that is coming up. She then clicks on the “Performances” page and sees that the choir is singing at the community Tree Lighting next week and that she can attend a school concert next week also. The administrator follows the link to the “Gallery” page and sees that the choir sang at the Renaissance Festival and a Veterans Day breakfast earlier in the year. The students appear very professional and the administrator is pleased with the status of the school choir program.
Design Concept
Audience
The audience for my website is choir members, parents of choir members, school administrators, and other students, family members or alumni who would be interested in hearing the choir perform.
Interviews
I interviewed a male choir member and a female choir member. They are both high school students who have school assigned MacBooks, home and school wifi, and smart phones. I also interviewed the mother of a choir member. She has internet access through home and work, as well as a smart phone. I interviewed the school Activities Director. He has a laptop and smart phone as well as internet access at home and at work. The fifth interview was with a former student who is in college and has the same connectivity as the rest of the interviewees.
The interview consisted of the following questions:
- What information do you need on a Belton Singers Website to make it useful?
- How often would you visit the Belton Singers website and for what purposes?
- What would you like to see included on the Belton Singers website?
The general consensus among all of the interviewees was that a website dedicated solely to Belton Singers would be a good idea and very useful. The choir members and parent all mentioned the need for current information on community performances and the specifics of when to meet, what to wear, and when they will be done. The choir trip was mentioned by everyone except the former student. The administrator specifically mentioned fundraising information and the concert dates. The former choir member was interested in school concert dates and a page with pictures. The parent would like the option to pay for the trip and for the choir outfit online. The choir members would like choir recordings and practice tracks on the site. Everyone acknowledged that they would visit the page if it was updated regularly, although remembering to visit the page would be an issue.
Reference Websites
- http://katyhighschoolchoir.com - Katy High School Choir
- Nice use of color and white space. The page is not too cluttered although the font size is too small in several areas. I would also prefer a darker color of font for readability. The use of color for subheadings and highlighting navigation is simple but effective.
- Clear navigation. It seems the main purpose of the site is to find links to forms and music management system called charms. I can see parents and students would visit it to make payments and find documents for the school year.
- The organization of the documents could be clearer instead of just a list of links.
- I like the use of school emblem or crest.
- https://eriehschoir.weebly.com - Erie High School Choir
- There are 11 navigation menu choices which means a “more” button has to be in place. This is too many and makes it difficult to find things. There should be sub-headings.
- The use of footer is effective, it has well-spaced contact information and location of the school. It stays the same throughout.
- There are large, vibrant pictures for banners, which is distracting to the purpose of the site. These pictures draw attention away from the navigation menus. They would need to be updated so they do not go out of date. No idea who owns the pictures.
- Parents and Students would have to hunt to find things on this site. The students would have to be informed ahead of time of what to find on the site.
- I do like the use of links as the same orange buttons throughout the entire site. Viewers would always know where to click.
- http://tesorochoir.com - Tesoro High School Choir
- This site has a web designer who is identified at the bottom. It has animations that other high school website don’t have.
- This site is very well organized in the navigation. There are many sub-pages that are nested in a sensible fashion under the overarching navigation menu choices. For example, the “about” tab has 11 sub-pages under it.
- This site would be easy to navigate by parents and students because of the organization. Also, the site represents the choir well in its professional presentation.
- I like that the site does not use school colors, but there is a school logo in the corner of each page. There are pictures on each page, but they are not overwhelming to the content.
- The content is mainly centered in a single column with subheadings. This makes it hard to read because of the different line lengths.
- The home page has a three important links with a picture, short explanation, and a “read more” link. It also has a missions statement at the bottom.
- https://www.horizonchoirs.com - Horizon High School Choir
- This is a web site that only has 6 navigation menu choices and then sub-headings. It looks very simple, but there is a lot of information contained in the website. I would think a parent, grandparent, or student could easily find what they are seeking.
- There are lots of links to google docs and forms and they all open in a new window, which is nice . This helpful to prevent a viewer from having to go back if they need to access other information on the website, which is a high probability.
- The home page is brief, but there are links to other places on the website that people would go to often. I would like to see a welcome message or a short description of the school choir the viewer has found, so you know it is the right one.
- https://www.fmhschoir.com - Flower Mound High School Choir
- Great color scheme that makes the navigation menu visible and doesn’t detract or over-power. Easy to find pages for parents and students. There is also a site map always in the footer in case a viewer gets lost. The footer also contains the school address and contact information as well as a music player which only works if clicked.
- The home page has a long introduction to the choir and a rotating picture gallery. The home page could be more useful to a repeated viewer.
- I like the subtle shadow boxing of the text areas and the dividing lines. It is clear to read.
Presentation Synopsis
Content
The pages I will include on the website are a home page, a performance information page, a uniform page, a choir trip page, and a media gallery page. Each of these pages will provide the main information that parents, students, former students, and administrators will seek when wanting information about Belton Singers. All of the pages, except the uniform page, will have content that will change throughout the school year. Each page is detailed below.
Home Page
The Homepage will have some information on who Belton Singers is, an “about the director” portion, and about the school and town. The rest of the homepage will guide viewers to the other pages based on what they are looking for. There will be brief summaries of each of the pages.
Performance Information
This page will not only have concert dates, but information on the many additional community performances the choir sings at. The students can use this to check details about performances such as when to arrive or when they are dismissed from class, what to wear, what we are singing, when will it be done, and what to bring.
Choir Trip
The choir trip will all the information about the trip that is covered at parent meetings. It will have the dates, an itinerary, cost, due date for payments, and a link to make online payments with the travel company. I will also link information about the festival we will be attending and some of the tourists sites we will be visiting. There will also be a fundraising schedule and information section with upcoming fundraisers and due dates.
Uniforms
Choir members purchase tuxedos and dresses each year. This page will have details on the cost, how to make measurements and sizing, fundraising, due date for payment, and hemming. There will be links to the dresses and tuxedo as well as a size chart.
Gallery
The choir has a student historian who takes pictures at choir events and performances. These can be posted on this page. Our school district has an opt out form, so I will have to check to see if any of my students have decided to opt out of having their picture placed on school associated websites.
Wireframe
Follow the link to a mock up.
Organization Rationale
The site organization is based on the belief that viewers will not be spending a lot of time on the site. They will want to visit the site and quickly find the pertinent information. The only exception to this is the gallery where photos will be housed. The links to the pages will be clear and obvious and the pages will have noticeable headings to direct the viewer. The navigation menu will be clearly visible. The main information will be in a column on the left and a smaller column on the left will hold shorter information with links. You will always be able to navigate to any of the pages no matter where you are in the site. The site will not have a lot of media, but it will be obvious what is new information. The faster the site loads the better, since viewers are coming to get information.
Media
I would like the media on all of the pages, except the gallery, not to have pictures of students in the choir. It can have photos of the school, the stage, or the choir room, but the site gets outdated quickly if those images are of specific years and they do not get changed on a regular basis. At this point, all media will be original and property of the choir. A student photographer is taking the pictures for the choir, but I will credit the photographer in them anyways. I also take photos of the choir events that I will use in the gallery.
Color Scheme and Rationale
The site will incorporate school colors of purple and gold, but not in an obnoxious way. Purple will be the main color used and there will be a limited amount of gold. The background will be grey. Black and white will also be used.