TEACHING WEB DESIGN THROUGH COMMUNITY SERVICE PROJECTS

							TEACHING WEB DESIGN THROUGH COMMUNITY SERVICE PROJECTS
Jonathan Lazar Towson University

ABSTRACT
As the importance of the World Wide Web grows, universities are developing a number of courses that teach students about the World Wide Web. In traditional information systems courses such as Systems Analysis and Design, there is a base of research on the content ofthe course, as well as the methods and approaches to teaching the material. However, in teaching about the World Wide Web, there are not established standards on how to present the course material, or even on what material (programming, usability, design applications, etc.) to present. This paper describes a web design course in which students learn about programming concepts as well as usability concerns, and design web sites for non-profit organizations in the local community. The advantages and disadvantages of this approach are discussed.

INTRODUCTION
Colleges and universities are increasingly offering courses about World Wide Web as part oftheir curricula. However, there are a number of issues to be decided before teaching a course about the World Wide Web. After all, the World Wide Web is not just "one topic." There are a number of different topics related to the World Wide Web that could be taught to students. At an introductory level, students could learn about the WWW and how to effectively use search tools to find what they are looking for. Web programming, such as HTML, JavaScript, Java, CG!, could be taught to students. Server management for the WWW could teach students how to

approach used for teaching students how to develop web sites through community service projects.

THE WEB DEVELOPMENT COURSE
An existing course at Towson University was modified to offer a unique approach to teaching web design. Students would be required to develop a web site for an actual set of users, either on campus or in the local community. As part of the course requirements, students would get the experience of working with real users in a real-world setting. By the end of the semester, students would have developed a web site that would continue to be used by the community group.

manage web servers. Courses could focus on web
usability, and all of the other human factors that relate to the user experience on the web. Courses related to web marketing and e-commerce could focus on selling products via the web. Ethics and law courses could cover topics such as intellectual property on the web, and cookies.

Another concern is how to present the material to the students. Courses could be taught in a traditional classroom, in a computer lab, or via the web itself. Students could be required to take exams, to write research papers, or to do projects. What techniques do students respond to? What approaches fit well within the overall curriculum? What types of projects will provide useful experiences for students? This paper describes the

Case studies or simulations can not offer students the same experience as working in a real-world setting with real-world users (Lazar & Preece, 1999b). By working with real users, students have the experience of dealing with the political, social, and ethical problems that exist in a workplace (Lazar & Preece, 1999b). Many students do not have any experience working with actual users. In fact, some students may resist working with users. By creating web sites for community groups, students get experience working with actual users.
The experience of working with users will help students to have a better understanding of user issues, which will be important for when the students get permanent jobs (Lazar & Preece, 1999b). Furthermore, by working with real users, students may make contacts that could help
71

Volume 2, Number 2: Curriculum Issues in Web Design and E-Commerce

them get those jobs! (Shneiderman, 1998). At the end of the course, students will have an actual product (the web site) that they have developed, which they can provide as an example during their job interviews. This curriculum approach has been called "ServiceLearning" (Jacoby, 1996; Lazar & Preece, 1999b). In service-learning, students do service projects in the community that relate to their course material (Jacoby, 1996). The idea is that the projects offer an opportunity to immediately apply the material learned in the classroom, therefore strengthening the educational experiencefor the students. To develop web sites for community groups, students needed to learn three separate sets of skills: Web Programming
It is obvious that in order to develop web sites, students

point of view of the user. This aspect of web design is called web usability (Nielsen, 2000; Spool, Scanlon, Schroeder, Snyder & DeAngelo, 1999). Web usability
covers issues such as page layout, navigation between

pages, color issues, and browser compatibility. Another
traditional aspect of human-computer interaction is usability testing (Nielsen, 1994). It is important to test a web site with actual users, to make sure that the web site

can be used easily by the target population of users. Usability testing can also ensure that the web site appears
the same in all possible browsers and versions (Internet

Explorer, Netscape Navigator, etc.). It is therefore important that students learn about usability testing in the
course.

CHOOSING THE COMMUNITY PARTNER One of the most important success factors for this type of
collaboration is an appropriate partnerin the community.

Students must be partnered with a group in which they
have some interest. If a community group is forced upon

would need to learn something about web programming. At a minimum, this would need to include a lot of HTML. It would also be useful to cover topics such as Cascading Style Sheets, JavaScript, form development, and possibly a WYSIWYG web design application, such as FrontPage or Dreamweaver. While it would be nice to cover all of these topics, unfortunately, due to the length
of the academic semester, as well as the need to cover

the students, it will probably not be a successful collaboration. For the web design course, at the
beginning of the semester, it was necessary to contact

other topics, it is usually possible to cover only basic web programming concepts such as HTML, JavaScript, and CSS, while offering a brief introduction to Java and cm Scripts (Niederst, 1999). Analysis and Design To go out and design web sites, students would first need to gather user requirements. That is, students would need to determine the needs of the organization, related to the
web site. Students would need to examine pre-existing documentation, and gather requirements. Traditional

local community groups and find a number of community groups that wanted to work with students. A group of 4-5 students would then meet with each community group throughout the semester, to work on developing a web site. When the semester began, some students already had an idea of what community group they wanted to work with. Experience showed that it was sufficient to choose two or three community groups per semester in advance; that was sufficient for a class of 25 students, as the rest of the student groups already had specific organizations in mind that they wanted to work with. LECTURE MATERIAL One of the first challenges in the web design course is to convey the importance of the design process. Students
sometimes have the misconception that information

approaches for gathering requirements include paper surveys, interviews, andfocus groups. In the networked environment, web-basedsurveysarealso apossibilityfor collecting the user requirements (Lazar & Preece, 1999a; Lazar, Tsao & Preece, 1999). Once the web site is designed, students would need to do testing on the web site. Students would also need to develop a plan for maintenance, because out-of-dateinformation on a web page is essentially worthless information. Hnman-Compnter Interaction Whendesigning web sites, an important consideration is to make sure that the web site is easy to use from the
72

systems are designed by sitting down and writing code. Of course, there is an elaborate analysis and design process that takes place before any actual coding is done.
Therefore, students need to receive instruction on the design process. For instance, students may not be

familiar with the techniques for gathering user
requirements, such as surveys and focus groups. Students

are also required to understand the concept of web usability. Web designers must understand that their users will be viewing the web sites from different browsers,
different connection speeds, and different screen sizes

(Niederst, 1999). Furthermore, a web site must be
Journal oflnfonnatics Education and Research

pleasing to the eye, clearly-worded, and easy to navigate for the user. After spending time on analysis and design issues and web usability/interface design issues, the majority ofthe semester was spent on web programming, discussing HTML, JavaScript, and Cascading Style Sheets. A brief introduction to Java and cm was also included in the lecture material. Towards the end of the semester, students also received instruction on doing usability testing for their web site, and effectively implementing and marketing their web site. DELIVERABLES Throughout the semester, students were required to tum in a number of deliverables based on their work with the community organization. This approach mirrors the deliverables that employees are required to turn in when working in industry. The approach of requiring students to write up "deliverables" has been successfully used in courses such as Systems Analysis and Design. The deliverables are as follows:

Final Web Site Design: At the end of the semester, students have created a web site for an organization. The students present their web site to the class, create documentation for the web site, and turn over the web site files to the community organization. Students must come up with a plan for maintaining the web site. This does not mean that the students are expected to maintain the site, but rather, someone at the community organization must agree to keep the site updated, and the students should give training to this individual and/or provide documentation on how to keep this site updated. Students should also come up with a plan for marketing their web site, to let potential users know.
PROJECTS The following section describes the web sites created by the students in conjunction with their community partners. It is important to note that there is a mix of oncampus organizations as well as organizations in the community. For some students, who do not have offcampus transportation available, an off-campus community group may not be a feasible option as a community partner, so an on-campus organization must be made available. Down Syndrome Online Advocacy Group. This is an online community, offering research and advocacy information on Down Syndrome to parents of children with Down Syndrome. The students worked to help improve an already-existing web site. South Asian Student Association at Towson University. This is a student group at Towson University, offering cultural programs to those who are interested in the cultures of South Asia .. The students developed a new web site to replace a single web page that existed. Student Affiliates of the American Chemical Society at Towson University. This is a student group for Chemistry majors at Towson University, and is an affiliate group of the American Chemical Society. The students created a new web site for this organization. Media Resource Services. This office at Towson University offers audio-visual support for students and faculty at Towson University. The students created a new web site for this office.

Project Proposal: This deliverable is a short proposal, outlining the community organization that the students will be working with, who their contact person at the organization is, and when their first meeting is planned. Plan for Collecting Requirements: This deliverable discusses how the students plan to collect user requirements from their target user population. Requirements Collected: This deliverable reports the outcome of the requirements gathering process, with students discovering what the needs of the organization are. Conceptual Design: This deliverable discusses how many web pages there will be, what color scheme will be used, how navigation will be provided, what content needs to be developed, and other conceptual design issues. Preliminary Site Design/Usability Testing: In this deliverable, students are required to have a large portion of their web site developed, and they are required to perform usability testing on their web site. After receiving feedback from the usability testing, students can make any needed changes on their web site.

Volume 2, Number 2: Curriculum Issues in Web Design and E-Commerce

73

Mid-Atlantic Campus Crusade for Christ. This organization offers administrative support and leadership programs to Campus Crusade For Christ chapters at colleges and universities in the Baltimore area. The students created a new web site for the organization. Best Buddies Maryland. Best Buddies Maryland is an affiliate of Best Buddies International, is dedicated to enhancing the lives of people with mental retardation by providing opportunities for socialization and employment. The students created a new web site for this organization. Students Interested in Free Enterprise (SIFE). SIFE is an organization for business students at Towson University. The students worked to create a new web site for this organization. Institute of Notre Dame High School, The Institute of Notre Dame High School is a Catholic girls high school in Baltimore, MD. The students worked to improve an already-existing web site. Student Leadership Program at Towson University. The Student Leadership Program at Towson University

2.

Presentations are an important part of the learning process. Students were required to present every deliverable to their classmates. It was interesting to watch how carefully students listened to the other presentations. The different groups were looking for new ideas and new approaches that they could implement in their own projects. Also, seeing a number of projects in action allows students to see the similarities in the analysis and design process across different organizations and different applications. This reinforces the material learned in a structured analysis and design course.

3.

offers leadershipcourses, a resource room, and a number
of programs to students at Towson who are interested in leadership. The students created a new web site for this organization. St.John's Lutheran Church of Blenheim. St. John's is a Lutheran church located in Long Green, MD. The students worked to improve an already-existing web site. LESSONS LEARNED 4.

It is impossible to plan for all things that may occur. Although planning is essential, it is impossible to predict everything that will happen. For instance, in one group, their community contact became ill with meningitis during the course of the semester, and therefore was not able to meet with them for a length of time. In another group, the students discovered that there was a great deal of disharmony within their community partner, and the community organization itself was having communication and political problems. Although these unexpected occurrences can sometimes block the progress of the partnership, this is a good lesson for the students because it helps to illustrate that when working in a workplace environment, unexpected things do occur.
It might be nseful to schedule meetings with the community partners far in advance, and on a regular schedule. A number of groups had problems scheduling meetings with their community partners. One approach that worked is for the students to schedule meetings at the same time, on a weekly basis. This way, the students would always know that they would be able to communicate with the community partners. This is also an approach used in many workplace settings.
When teaching the sessions of the course on web programming, those sessions should be taught iu a computer lab. Two semesters of this course were taught a bit differently. In one semester, prograrmning was taught through explaining how sites were designed, and explaining the programming concepts. This took place in a traditional classroom. In the other semester, students received instruction in a computer lab. First, the instructor would explain the prograrmning concepts. Then, students were encouraged to create web pages, in any format, using these programming concepts. The students who received the
Journal of Informatics Education and Research

I.

It is important to have a mix of new sites and redesigns of old sites. Unfortunately, in many classes, students only learn about the process of designing a new computer system or a new software application. In reality, a large portion of time in industry is spent on maintaining already-existing applications (Hoffer, George & Valacich, 1999). A mix of projects, some developing new web sites, some updating existing web sites, allows students to see some of the issues involved in maintaining already-existing applications. Furthermore, students who work to improve currently-existing web sites don't have to necessarily focus on potential users of their web site; they can query existing users of the web site for suggestions on improvement. Furthermore, documentation on the web site, as well as data such as web site logs, might be available to assist in the redesign of the web site.

5.

74

programming instruction in the computer lab really liked the opportunity to immediately use their skills to reinforce the concepts. Also, the stndents who learned in a computer lab had the immediate experience of attempting to correct their code!

SUMMARY
There are a number ofadvantages to teaching web design using community service projects. By working with

community organizations, students get the experienceof working in a real-world setting with actual users. By creating web sites, students immediately get to apply the skills that they have learned in the classroom. Students have commented how much they prefer this approach to instruction. Inone instance, a student commented that the web design course has been his favorite in the entire undergraduate program, because "I get to learn the interface theory, I get to learn how to code it, and I get to immediately use it!"

REFERENCES
Hoffer, J., George, J., & Valacich, J. (1999). Modem Systems Analysis and Design. Reading, MA: Addison-Wesley. Jacoby, B. (1996). Service Learning in Higher Education. San Francisco: Jossey-Bass Publishers. Lazar, J., & Preece, J. (l999a). "Designing and Implementing Web-Based Snrveys." Journal of Computer Information Systems, 39(4), 63-67. Lazar, J., & Preece, J. (1999b). "Implementing Service Learning in an Online Communities Course." Proceedings of the International Academy for Information Management 1999 Conference, 22-27. Lazar, J., Tsao, R., & Preece, 1. (1999). "One Foot in Cyberspace and the Other on the Ground: A Case Study of Analysis and Design Issues in a Hybrid Virtual and Physical Community." WebNet Journal: Internet Internet Technologies, Applications, and Issue., 1(3),49-57. Niederst, J. (1999). Web Design in a Nutshell. Sebastopol, CA: O'Reilly and Associates. Nielsen, J. (1994). Usability Engineering. Boston: Academic Press. Nielsen, J. (2000). Designing Web Usability: The Practice of Simplicity. Indianapolis: New Riders Publishing. Shneiderman, B. (1998). "Relate-Create-Donate: A Teaching/learning Philosophy for the Cybergeneration." Computers & Education, 31,25-39. Spool, J., Scanlon, T., Schroeder, W., Snyder, c., & DeAngelo, T. (1999). Web Site Usability: A Designer's Guide. San Francisco: Morgan Kaufmann Publishers.

Volume 2, Number 2: Curriculum Issues in Web Design and Ei-Conunerce

75

,- - - - - - , - - - - _ . _ - - - - -

._-,._----_.._ --_ .• _---_.

---"---------,,

76

Journal oj Informatics Education and Research