Case Study

Chris Calcutti

Project: AAU Website Re-Design

Description of AAU

The Amateur Athletic Union was founded in 1888 in order to establish unity among amateur sports. It is one of the largest non-profit volunteer sport organizations in the United States. It is multi-sport organization, which is dedicated to the development of the amateur sports and programs that they run. They work with Olympic movement in order to prepare these athletes for the Olympic games. After the creation of the Amateur Sports Act (1978), they had focused all efforts to provide programs to all ages. The philosophy “Sports for All, Forever” is shared here and today they have 650,000 participants.

Original Design:

This is AAU’s design of their website:

Screen Shot 2014-05-12 at 5.34.31 PM

Upon first encounter with AAU’s website a couple things jumped to my attention:

  • The first thing that came to mind was how professional there website appeared. The website for the most part had an ingenious design. The issue however I noticed was that it seemed too busy and there was some meaningless graphics within the homepage. For example, in the middle of the page, the links are not relevant at this position. There should be pictures or a videos spot displaying the athletes. I personally feel that the target market of kids my age would not be reached because of the complexity of having to search for certain items.
  • The next thing that I noticed was the poor design of their navigation. The navigation to me seems inefficient; it is poorly designed with too much information. For example, under certain sections within the Nav-List there are 30+ different links to click on which takes up much space.
  • The last issue I noticed was the footer they had. The footer had text that overlapped other information.
text overlap
text overlap

Research and Objectives

The first thing I decided to do before designing the website was look at other athletic websites. I found several things that I incorporated into my website. The first thing I wanted was to have a better header that is more visually appealing. So I went to my favorite website, When looking at the header it gave me ideas: should I input a Headlines section, or photo gallery, etc. But the one tab within the header grabbed my attention, which specifically showed “Videos”. On my homepage, I needed a videos section. So I wanted to input a video from YouTube on the page but also wanted the option of not having to leave the page and be able to listen to it and scroll through the rest of the page. I managed to find this code which was extremely beneficial to my website:

Another great website in which I used a lot of coding was:

Strategy, Changes, and Challenges

My main interest for this website overall was to simplify it. This website desperately needed to have a new Nav-Bar, and grab the attention of the people. It needed to have the concise information and be right in front of the users eyes without having to navigate as much.

On my first page, index.html, I put changed there layout completely having all things I feel are important when going through a sports page. I made the homepage more appealing by adding the photo gallery and having videos; as well as having important events as well as headlines. When people go to these types of websites they want to see pictures, numbers, and players. So overall, I tried to exploit these opportunities on my homepage. The pictures on my page, I had linked to the photo page (on there site), as well as linking some other items. On this page, I faced the challenge of the slideshow. The slideshow turned out to be a very difficult challenge because of the coding that overlapped. Meaning I would have 2 H3’s which was used in the Style Sheet of the Slideshow but also in my own coding. I was able to get past this problem but it did push me back in creating my other sites.

The second page I did, index_service.html, was another page that is necessary for AAU. I wanted the user of this page to be able to have contact information more in depth outside of the footer. This page serves as a membership page as well with having a sign up box in the middle as well as in the header, which makes it valuable to the user having something in 2 places. I understand that parents would be on this page and keeping this as basic as possible is a must.

The third page, index_about.html, was an interesting page to create. I wanted this page to contain things people should know about AAU. However, besides just who they are, I need to incorporate other information people would like to see. This is where I decided that all my pages need the same type of layout.  I have on this page About AAU, Programs, Contact, Headlines, and the Videos sections. I debated about inputting a blog but in the end decided not too.

The last page I created was, index_event.html. This was actually the only page I wanted to keep just about the same from the original website. The only things I wanted to change was having a category section which I inputted on the right hand side.


I feel that I was effective mainly in just making it have a nicer appearance in certain areas. The website to begin with was already in good shape, but I think I found their biggest flaws and was able to fix them.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: