Site Specification Project

This project is to define the steps from inital site request description to final specification document for building a site.

This is inspired by the IBM Developer works series. While this will not be from an IA professional, this project will use some of the techniques to define a site design before it is built.

Background: My wife is a part time school teacher for a local middle school. She has been wanting to start a website for a number of years to improve the communications with her students and parents. Previous failed starts required a high level of sophistication and technical expertise, including experience coding HTML, or using FrontPage and FTP clients. By taking advantage of the Drupal engine for content management, my wife simply needs to enter her information and attach any handouts. I still get involved in some of the more complicated programming, but no longer need to create and edit content for her.

Also make sure to check out my completed document. I used the design of the website for a final paper in a class. The document is available here.

WoodfordScience.com.

Initial Design

The Initial Description of the project was for an online website for a Middle School teacher. She intended the site to be used to provide a communications medium to parents, a "Homework Hotline". By providing parents with regular updates, the educator hopes that it will decrease the number of regular phone calls asking for homework updates. In addition, the site would provide sick and/or vacationing students a regular site to check for assignments.

The site must:

  • Be easy to create new content. - As an educator, she has little time to learn a new language, working with HTML would be out of the question. The site needs to be easy to update, easy to add new agenda items, and virtually self maintaining.
  • Be easy to attach pictures and handouts. Possibly photo galleries showing students performing labs. Also would help eliminate requests from students who lose key handouts. They could simply print them out at home, the library or parents work.
  • Be easy to expand. A fellow teacher may want to utilize the site to add her content to the site.

In addition, the site could:

  • Provide sample tests for students
  • Provide extra credit activities, via links, or polls on the site
  • Provide forms for downloads. (student contract, classroom policies, etc.)
  • Provide resource materials for large class projects.
  • Provide forum for student discussion.

Analysis
From the intial descriptions this seemed a posible job for page or book module and Event module. Upload, image and image_gallery modules as well.

Elements of Design

When initial design of the site, I created a base site that I thought my client would like. Links to information, I thought she would use, created sample posts to populate the site and demonstrated the site to her. She hated it. Colors all wrong, layout didn't make sense and the website simply wouldn't work.

I started over with a different approach. I asked her to search for websites that contained content similar to what she wanted to post. Based on her results, we took each site she liked, and picked apart the different elements that she liked and what she did not like.

  1. Bright colors, simple layout.
  2. Animated graphics, portraying subject matter related items (beating heart, jumping frog, etc.)
  3. Graphical buttons
  4. Menu items along side (as compared to across top, or in grid along middle of site.)

Based on her client base (parents and students in low-middle income households), I made a few suggestions.

  • We chose a basic 2-column layout. Looking at various Drupal Themes, I could quickly apply a theme to the basic site, which helped find a number of pre-done themes she liked. Nifty Corners screenshot had many of the elements she was looking for. Simple design, bright colors and even a large header area.
  • No large or animated graphics. Considering most parents are likely still on dial-up Internet access, we don't want to add any extra bandwidth. We compromised with a larger graphic header (based on the Nifty Corners theme). We pulled colors from the graphic, to use for the various elements on the site (headers, links, mission statement, etc.).
  • Graphical buttons, translated to links without the link-line. We considered removing the line, but wanted the interface to be intuitive, and left the line in place.

Once we had the look and feel of the site closer to what the client expected, we could work on how she would use the site.

Complete Write-up

As part of my Master's program, I completed a detailed analysis of the site. This document includes design considerations for the site, customizations done to the site, and even basic build instructions. This should be helpful for an IT individual with experience installing Windows to build a similar site.

I am happy to say that I received an 'A' in the class and on this assignment!

AttachmentSize
Eric Woodford TS5004 Final Paper.pdf461.92 KB