The most visited section of any sports team site is its dance team (cheerleader) section. I was able to design the web site of the Sixers Dance Team, and I would like to walk through the process in which the site was developed.

The design process of the Sixers Dance Team web site can be broken up into several different sections—Research, Proposal, Mock Design, Design, and Updating.

Research

I visited every NBA teams web site to see how their dance team web site looked (I looked at some NFL teams as well) and to see what was standard in a Dance Team web site. Most of them were poorly designed. It appeared as though no NBA team had hired a designer to work on their site. Some sites, however, stood out either because of design, or content. The four sites I admired most were the Nets, Knicks, Celtics, and Bulls.

The Dance Team sites of most NBA teams are changed every season, and this includes the sites of the teams I just mentioned. Therefore, if you go to the sites now, you will not see what I saw before the season started.

One thing I took from my research is that most of them had wallpapers of some sort and photo galleries. Some had videos. A couple of the sites had blogs, but these blogs were only for specific events or trips. By this, I mean I would find “Kate’s Blog in India,” but not “Kate’s Blog,” and “Kate’s Blog in India” would only consist of three or four post. I also noted that one of the site’s I visited had in-depth biographies that seemed personal whereas most Dance Team bios were full of simple information like “what is your favorite color.”

Proposal

Taking everything that I saw in other Dance Team sites, along with my own ideas, I came up with a list of things I wanted to do with the site and made a design document. I definitely wanted to feature a blog, which all of the dancers would share, and I wanted to allow comments to allow fans of the Dance Team to interact with the dancers. Naturally, the blog would also have an RSS feed that would drive traffic to the site periodically. I also wanted wallpapers for every girl, as well as wallpapers that featured the entire team. For bio’s, I wanted to interview each girl individually and ask them questions more interesting than the simple “what is your favorite color” questions. I wanted the navigation to be easy to use, and for it to be possible to get to any dancers page from any page. I also wanted to change the logo, and change the web address from nba.com/sixers/dance to something more like sixersdancers.com.

The document I wrote outlined all of this and more, and explained how I planned on getting it done. The key to getting everything to run perfectly was using a blogging service such as WordPress for the backend, which would require that I not use the NBA’s portal which acts as a content management system for every NBA related page.

I needed to hear from Sixers managment that all I had outlined was fine and that it was okay to move on to designing it. With everyone being busy preparing for the season, this much longer than I expected and therefore much of what I proposed (such as blogging) had to be cut because of lack of time.

Mock Design

I drew four basic designs for a splash page. Two of them involved lots of boxes and two of them involved large text. The one of the two large text ones that I liked most simply said “Dancers,” “Blogs,” “Multimedia,” and “About,” and these words were tilted diagonally. On rollover or on onclick, a sub-navigation would pop up. For example, upon clicking “Dancers,” the names of every dancers would come show up, pushing the other three main links down, and then clicking on a dancer would bring up her page. For this, I planned on using Flash.

The other two designs basically consisted of face shots of each of the girls, which would link to the dancers page. The difference between the two designs was how the photos were laid out. One was configured so that the photos would stay centered in a square, while the other shaped more of a rectangle.

I abandoned these designs, however, and came up with six more designs for a main page that I then quickly mocked up in Photoshop. These designs were made prior to getting feedback on my proposal, so they include room for blog navigation. These designs proved to be useful and provided the basic framework of the final design.

Design

The sixth design that I made in Photoshop was the design that I based the Dance Team web site on—the only difference is the absence of the blog navigation. Luckily, the way I designed it made it easy to take the blogging navigation off.

The dancers had a photo shoot, and we were expecting multiple photos with each dancers in various clothing, but we only got one photo of each girl, and they weren’t even full body. So, I ended up using the same photos of each girl in three different areas. For the dancers navigation, I cropped the photos to show just their face; for the header, I cropped the dancers photos to show just their upper body; and, for each dancers bio, I used the entire photo, only altering the images size.

Since the colors of the Sixers are red, white, and blue, I used these colors throughout the design. Also, the font the Sixers are using in their ads this season is Gill Sans, so I used that.

One idea I was given from the Dance Team’s coach was that the girls appear glamorous. She was thinking big! She wanted curtains opening and a runway the girls would walk down with cameras flashing. Although because of the photos I was given I did not make it as glamorous as she had in mind, I did manage to throw some stars in the design.

I showed my design to the people who needed to see it, and they all felt I strongly needed to change the header to somehow show all of the girls. This is because they felt the dancers would get upset and ask “How come [insert dancer] got to be on the top of every page and I didn’t?” I originally planned on just having one header, which has an asian dancer, a black dancer, and a white dancer. The suggestion given was to have the header rotate every couple of seconds, but I felt it would be better to have the header only change when the page is reloaded. Also, originally the header had a fading effect at the bottom, but I switched to more of a reflection effect, trying to sneak in the whole “glamorous thing” again.

It was at this point that I was given a notice that the site needed to be presentable in a few weeks. So quickly, I coded the site using XHTML and CSS. This presented another problem—I was not sure how I was going to use XHTML and CSS using the NBA’s portal. I wasn’t until I finished coding the site in Dreamweaver that I really gave this any thought. I learned that there was a template named “Team Dummy” that very little formating and allowed me to do as I wished.

Originally, I decided to embed CSS inside each document because I was not sure how to make a CSS document, but I later learned that it was possible to make almost any kind of page I wanted by simply changing the file extension and using a dummy template.

Updating

My goal, once the site was officially online, was to constantly put photos online after games, add wallpapers and videos, and interview every dancer. Originally, I wanted each girls bio to be an interview, but at this point it made more sense to add a link to the each dancers interview instead it being part of the page itself. I did manage to interview one of the dancers—the team captain. If I had more time, I would have interviewed all of the dancers.

Adding photos became my main duty once the site was online. I created a Photoshop action that automatically sized photos for me and renamed them using a naming convention I created.

I put “0708” to signify the season, and then a number to signify the session (more on this later), and then I put “dance” followed by the number of the photo. Session number basically answers the question “how many times have I uploaded photos?” So “0708_3_dance1.jpg” is a file name showing that it is the 07-08 season, that it is the 3rd time I’ve added photos, that it is a Dance Team photo, and that it is the 1st photo of X amount of photos I am adding in this session. The next time I add a group of photos, then, the filename of photos would look like “0708_4_dance1.jpg.”

Some dancers would say that they didn’t like the photos I put of them online from games so I had to take a lot of photos off the site the first time the site went live. This left a lot of the dancers photo-less as they did not like any of their photos. So, now what happens is a manager and the Dance Team coach meet and go through the photos from games and choose which photos they think should be online.

I was only able to make one wallpaper, which is simply a group photo of them. I wanted to add a calender of the Sixers games to the bottom of it, but I never got the chance to.

There is a better group photo of them but it has a dancer who left the team and is hard to remove.

Conclusion

I learned a lot designing the Sixers Dance Team web site. While I didn’t learn a lot in a technical sense, I think I did improve my communication skills. I learned what it is like to design by committee—to have to deal with multiple people on one project. In my other jobs I only talked to one person who represented the client’s views. It would have been better had I only had to talk to my supervisor instead of my supervisor, my supervisor’s supervisor, my supervisor’s supervisor’s manager, and the Dance Team coach. It’s still good experience nevertheless.

Although several of my original goals were never realized, I am still proud to say that I designed the Sixers Dance Team web site.