Archive for Design

Moving forward with Drupal

drupal icon

We have made the decision to proceed with Drupal to build Catlin Gabel’s next public-facing web site! That means that you get to stop hearing me refer to it as our “potential” next web site platform. In the end, the decision came about through several factors:

Any open source system will allow us to shape the site to suit our needs better than a closed system. I demonstrated, through a test site, that a relatively simple Drupal install could meet the most critical needs that we identified for the web site. There’s nothing like a hands-on test to convince a critical friend.

Taking other stakeholders on a tour of the Drupal site was helpful. People may have an impression that open-source software is less professional or reliable than commercial software. A quick tour of the Drupal forums, modules lists, and handbooks conveys the incredible scope and activity of the Drupal community.

Prior experience with Drupal played an important role. You could successfully argue that we created a self-fulfilling prophecy by using Drupal for so many other purposes and tests. Each experiment has increased our Drupal expertise, to the point that the considerable knowledge we have built played a role in the platform decision.

Prior PHP/mySQL development also contributed to the choice. Before we tried Drupal, even before I joined the school, we had developed a number of useful PHP scripts that expose data from our student information system for teachers, students, and parents to use. It will be easier to convert these scripts into Drupal modules than into, say, Python.

Next steps: hire a graphic designed and a Drupal consultant. I will post more details about these opportunities soon, but feel free to drop me a line earlier if you are very keen on them.

Onward we fly!

Wikify Our Web Site?

What if we applied wiki concepts to our public-facing web site? Could we harness power of the commons to build a better present ourselves to our core audiences? Considering that most of these audiences are people already in our school community, this idea could have potential.

There exist many intermediate steps between controlling all of the content ourselves and opening it up completely to the entire world.

  • Encourage faculty and staff members to manage site content (as we currently do).
  • Include parent and student contributions (as we currently do on our internal web site).

  • Allow any community member to edit a site page, but review the submission before publishing it.
  • Allow any community member to edit a site page and immediately publish it.
  • Allow any member of the public to edit site content.

Could we take a step or two toward a community-generated school web site?

Update 1/9/2008: Dearborn Public Schools (Michigan) has done it.

A Whole New Mind

I recently read A Whole New Mind (Pink), which explains the importance of right-brained thinking to success in the new economy. Two of the principles Pink explores rang particularly true for me: Design and Creativity.


Pink helped me understand the rising importance of good design in the marketplace. In a world of plenty, consumers are increasingly choosing products with better design, and mainstream stores offer well-designed products at affordable prices.

This change in the marketplace may help explain some changes at our school. Over the past few years, our students have expressed a clear preference for Apple laptops over Lenovo. We used to purchase twice as many ThinkPads s iBooks. Now, the ratio is 5:1 in favor of Apple. Could a preference for good design in part explain this shift?

Students are rapidly adopting smart phones, starting with the iPhone but also including Blackberry, Sidekick and other popular devices. In part, the falling cost of the devices combined with the need of kids to stay in touch with each other may explain the trend. However, good design is critical to the students’ mobile experience, since they use the devices so intensively. The ability to merge entertainment and communication into one device is also a strong draw. We see almost no Windows Mobile-based phones, especially when compared with a corporate environment.

Students and teachers have expressed pretty high standards for the immediate usability of our IT services. “Intuitive” is a popular expectation. If a tool we roll out is not very usable, such as Outlook Web Access or our parent email lists, people tend to seek an alternative, such as GMail or Yahoo! Groups. Our IT staff has to devote more time to planning and design of the community’s tech resources. When we have the time, higher expectations compel us to produce better services. When our plates are already full, it causes workload anxiety.


Pink builds a case that creativity will be essential to success in the modern economy. Catlin Gabel prides itself on teaching creativity and has launched initiatives to improve our work in this area. The school launched a capital campaign to raise funds for three initiatives, including the construction of a new creative arts center.

We have seen rapid change in the arts curriculum in recent years. Digital photography, film, and animation classes take full advantage of the ability of students to rapidly create, review, and experiment with their work in digital form. Film students self-publish on YouTube, and independent study kids are preparing submit Flickr slideshows of portfolio work as part of their college applications. Even extremely physical classes such as ceramics and woodshop capture digital images of work for recordkeeping and communication.

We recently held an event to celebrate the school’s rich history of excellent science instruction. Three guests delivered speeches via prerecorded online video. All underscored the importance of asking good questions and creative thinking to their professional successes.


To what extent have these concepts of design and creativity penetrated the minds of the teachers and parents in our community, critical stakeholders whose support is essential to effect change? I feel lucky to work at an institution with a critical mass of tech-aware professionals, yet every institution I know is partway along the process of transformation.

I repeatedly face the same challenge: how to act as an effective change agent so that teachers and parents in particular will come to understand new media: its importance, how it works, and what it means to schools. I make progress but also seek better ways to communicate the message, structure learning experiences for others, and increase reach.

Web Site Design Portfolio

This portfolio shows major sites I have designed and built for organizations.

Catlin Gabel School (2009-present)
The school’s main, public-facing website provides a complete content management system, multimedia publishing tools, user accounts for students, staff, parents, and alumni, and ties into the school’s student information system. A layer of the site is login-protected, so that community members may publish articles, photos, and videos to the school community.

Catlin Gabel website

Tools: Drupal and Blackbaud, including custom PHP development.

insideCatlin (2006-present)
This intranet web portal provides operational tools for the members of Catlin Gabel School. Teachers provide students with course materials and interactive discussion areas, departments publish commonly-used forms, and individuals schoolwide exchange information such as community service hours and textbook orders. The portal is organized by commonly-desired content and transactions, rather than by tool.


Tools used: Moodle, Drupal, Blackbaud database access, and custom Perl and PHP scripts.

Shasta Mountain Guides (2005 – present)
The guiding company uses this site to publish trip information, collect reservations, solicit customer questions, and sell merchandise. Customers may browse through trip descriptions, photos, and testimonials and then book a reservation online, including payment. The co-owners maintain the Backcountry Blog and photo galleries on the site. A live weather feed and equipment lists help hikers plan their trips.

Shasta Mountain Guides

Tools: Drupal, osCommerce, custom Perl scripts, custom graphic design

San Diego Hat Co (2001 – present)
This web site allows the company to quickly publish an online catalog of hundreds of items to wholesale customers twice each year. Within the login-protected site, customers browse or search for hat styles, zoom in to view close-up detail, and see available colors for each style. The site also includes static pages for company information and an online store for retail customers.

San Diego Hat Co

Tools: Web Site Baker, osCommerce, custom Perl scripts.

Maru-a-Pula School (2006 – present)
The school upgraded its web presence with a content management system and custom graphic design (Elavacion, Inc.). I moved the hosting service to the U.S., to improve upon the reliability of Botswana-based hosting services.

Tools used: Drupal

San Francisco University High School (2002 – 2006)
This site provided for all of the public-facing web site needs of this school community: a description of the school program, faculty and staff contact directory, admission inquiry toolkit, alumni profile and notes tools, and Arts department mini-site.

San Francisco University High School

Tools: Dreamweaver, custom Perl scripts.

insideUHS (2002-2006)
This intranet school portal provided the community with communication and information tools: course web sites, athletics schedules, community service project database, independent study project database, community announcements, schoolwide events calendar, student photo directories, online file access, and student discussion forums.

Tools: Moodle, YaBB, phpBB, FileMan, Blackbaud database access, custom Perl scripts.


site snapshot at The Internet Archive (original site no longer available)

Gateway High School (1999-2002)
The graphic design of this site communicates the school’s unique position as a public charter school in San Francisco. Learning Center and People receive high visibility, and student work is featured on the home page.

Gateway High School

Tools: Dreamweaver at the Internet Archive

Audience-centric web site design

Our web site team is attempting to keep our audiences’ needs and perspectives at the forefront throughout our web site redesign process. It’s not easy! We naturally think about the school in terms of our relationship to it, and we have the inside perspective. This often results in ideas for organizing the web experience that mirror too closely the organization’s internal structure.

Although our audience list includes internal constituents, we must remember to pay special attention to the external ones. We started the process by building lists of audiences that we need to reach via the web site. Prospective and current families, students, alumni, and employees topped the list. Next, we used a protocol developed at OneNorthwest to identify the values and needs of this audience as well as what the school wants them to learn/do from their web site experience.

Next, we developed specific “user stories.” We each made up two mythical users and described what they wanted from the site, how they used it, what else we wanted them to learn, and whether they had a successful experience. This exercise was terrific, as it harnessed the creativity of all of the members of our group (techies and non-techies alike) to come up with possible perspectives on using the web site that we had not previously recorded.

Staying focused on audience was pretty easy until we actually got specific with content. Two weeks ago, we started to translate our audience work into actual web site information architecture. How should we organize the content and services on the site to meet the audience needs we identified? Our work immediately returned to a more traditional form, as we started pumping out content outlines that mirrored our organizational structure or replicated existing aspects of the site.

Do you design web sites? How do you retain your focus on the target audiences when you begin to organize content and design user interactions?

Web Site Design and Management


Jeff Huggin, Snoqualmie District: Dreamweaver, ASP, Access, IIS

Mike Stewart, Mt. Angel School District: Win 2k3, Dreamweaver

Austin James, Redmond District (OR): hosted solution (SchoolWires)

Jeff Dobbs, Beaverton: wrote a custom content management system (Oracle)

Mike Finstrom, Highline District (WA): custom CMS the supports Dreamweaver and Contribute

How did you go about determining what systems you would use?

Found experienced developer at the ESD.

Developed culture of people who embraced content management system. Now looking at Sharepoint for next iteration. Allows for both novice and advanced users.

Mandate from superintendent that every teacher would have a web page, and look and feel would be consistent. Moved to a hosted solution. Teachers focus on posting content rather than what color it would be. Hosted solution was equal in cost to licenses for Frontpage.

Ease of use a huge barrier to buy-in: from Frontpage to MS Word to emailing items to tech department. Currently a voluntary system who send content to tech director via email.

Cost considerations, Puget Sound ESD developers built different modules for administrative functions.

How many staff members in your department are dedicated to web?

Communications person is the key, tech staff devote small fractions to site. ESD helps with back-end tweaks.

One small fraction.

Office staff already typing this content for newsletters. Just have to copy and paste into web interface. Does switching and routing for district, does not devote much time to web site. Does CSS, HTML, graphic development (1-2 days per month).

Web content staff member. Who owns the web site? IT department or others? Distribute stake in the web site. They are going to have to enforce policy, IT trains and supports.

3 of 5 district communications staff devoted to web site. Each district has a web manager. HR posts jobs, contract changes. One SQL developer. Goal of 1000 contributors. Moodle didn’t extend. Randy Orwin has hacked it to extent.

How many teachers are maintaining sites?

Web-publishing through FirstClass — a lot of teachers were initially turned off by it. A number of teachers have gone out on their own. Working with ESDs to facilitate blogs, wikis, and web pages. Union prevents requiring teachers to create web pages. Receives blog requests daily. Biggest issue is support. Planning to use Drupal for teachers. (Beaverton)

Will have 100% by next year, per superintendent. Top goal is communication/contact information.

25% on teacher web sites daily. One teacher records lessons every day and posts them on web site.

Made it fun and easy, focused on content.

Biggest challenges

Support and training is very taxing on district resources. Space is a huge consideration, as all content teachers use now go into the database.


Administration wants more professional-looking web site with zero budget.

Other issues

Posting links to off-site content (okay with panelists)

Pictures of students online: centralized permissions to one form, to allow blanket ability to show many pictures on web site. Want to centralize permission for student academic work next.

Take your public-facing school web site to 2.0 with Drupal

Today, we discussed the potential for Drupal to serve as the back-end of a public-facing school web site. Only a few examples exist out there, yet Drupal continues to gain acceptance as an extremely capable system that is ready for prime-time. Twelve of us shared frustrations with commercial school web site companies who were difficult to work with or insufficiently responsive with new features. To my pleasure, I found that many of my colleagues at this meeting were thinking along the same lines. We know how to evaluate and adopt commercial software. How does one evaluate and adopt open-source software?

We have created a series of tests to determine the potential of Drupal to serve as the platform for the next version of Catlin Gabel’s public-facing web site. Drupal continues to pass each one. This month, I had two successful meetings with Kitty, our web site content editor, and James, the creator of the current web site and thoughtful strategist on school web site design and implementation. I have found to my pleasure that this group working together is far wiser than I could ever be on my own. Now, we are working together to move this project forward.

We held two meetings in the last month to consider next steps for the public-facing web site and think about the strengths and weaknesses of Drupal to meet these needs. We need to move to a new web site platform in order to meet demand for features such as electronic newsletters and podcasts and to better manage the burgeoning volume of content that we would like to display on the site. The Drupal founders, from the early on, appear to have understood the exponentially increasing nature of information. All content units (nodes) are functionally equivalent, flowing through the site like water as the site administrator sets up guides to expose them in particular ways. You classify — not compartmentalize — content, which enables people to find items much more easily.

I am also trying out a conceptual model to seek buy-in from critical stakeholders for this project. One may summarize the model as follows.

Tinker: Over the past year, I have built five CMS sites for different purposes, giving me a taste of content management platforms and eventually Drupal in particular. 1 | 2 | 3 | 4 | 5

Research: I have gone looking through Drupal modules and documentation looking for solutions to functionality I will need to replicate on the new site.

Solicit Expert: We plan to invite a Drupal consultant to give us feedback on the proposed plan and potentially serve as an “on-call” expert when we need help with the tricker components. We trust in our ability to find a Drupal consultant willing to do this, considering that we contract for time & materials for other pieces of our infrastructure, and open-source consultants may be friendlier than most to being collaborators on a site rather than building the whole thing.

Buy-In: I have built a Drupal clone of some parts of our current web site. Many people judge a web site first by its looks, and this helps take the graphic design out of the consideration of the back-end platform. It helps gain valuable feedback on the viability of the new platform. It also includes the most frequent contributors in the process at an early point.

two web sites
Which one is the Drupal site?

Design: Assuming that the site passes the other tests, we will then undertake the design in earnest. We will need to spend much time thinking about how best to replicate current site functionality in Drupal. Trying to keep project scope within manageable limits, we will defer considerations of changing the site architecture or graphic design to next year. This will require a much broader consultation within the school community.

Develop: actual configuration of Drupal and additional programming if needed.

Train: Properly prepare site editors for the new editing interface and assist regular users with any aspects that may work differently than before.

Launch: Off with the old, on with the new! I’m unsure whether this will require much external publicity, since we are not changing the look and feel at this time. Internally, we will want to make the transition to the new editing platform as easy as possible especially for those users who only post occasionally.

Your thoughts on this plan?