Tag Archive for webdesign

Website Design Process

A colleague recently asked me to document the process we undertook to redesign the Catlin Gabel website. Here is a summary.

Accept need to redesign

In our case, the school wanted to add features to a website that a parent volunteer had very capably created and managed for a number of years. The technology director and communications director acknowledged that the school’s needs had exceeded its website model at the time.

Identify project leader

I proposed leading the project myself, because I had both school leadership and website development experience. It helps to have a single leader to bear responsibility for keeping the project moving, and to serve as a single point of contact for external vendors.

Convene task force

Including a team that is committed to working together for the benefit of the whole is more important than representing all possible stakeholders. Ours included representatives from admission, communications, alumni, academics, technology, and parents, though not always the directors of these departments. Many people held two of these roles, some three. We held three intensive meetings, and then I kept the group apprised of progress and consulted with them to make additional decisions as needed.

Identify priority audiences

Many schools try to have its website serve all potential visitors. We were lucky to have a parent volunteer with media experience who advised us to carefully narrow our priority audiences to three or fewer. We selected families, employees, and alumni, though we did cheat a little: families included both current and prospective, as did employees. We left out students, the press, and the general public. If we did a good job with the priority audiences, then these secondary audiences would still have a good experience on the site.

Work from audiences -> values -> roles -> needs -> features

Some schools move to site features too quickly. The website committee completed “audience and roles” worksheets in small groups to better understand community needs that might indicate specific website features.

What values do these priority audiences hold most dearly (both about Catlin Gabel and about education in general)? What roles do our priority audiences play within the school? What needs do they have that the website might fulfill? Finally, what site features are necessary in order to meet these needs?

Rigorously following these steps kept the site design process focused on humans’ needs and ultimately more satisfying for the user.

We also consulted the school’s admin team to find out which features of the current site worked well and which did not. This helped us identify site features that we should definitely retain, and others that we should definitely discard. For example, the home page slideshow was identified as a much-liked feature because it included recent snapshots from the life of the school, instead of highly posed photos that many school websites feature.

Preview the changes for the school community

We made presentations to faculty, the board, parents, and students to build excitement, relieve concerns, and invite contributions into the process.

Hire a great graphic designer

The site look and feel is one of the three pillars of any website (the other two being site architecture and development platform). We solicited proposals from a number of designers. The committee was most attuned to the examples of other websites that designers had created. We were again fortunate that our parent volunteer referred us to his favorite designer.

The result was an extension of our human-centered design approach to the graphic design, as well as a unique design that does not look like any other website and truly embodies important values of Catlin Gabel. The design represented both progress and tradition, interrelatedness and independence, and the woodsy aesthetic of the Pacific Northwest.

Finalize the design plan

This included one section for each of the three pillars of website design: wireframe sketches for the look and feel, a visual map of primary and secondary sections for the site architecture, and lists of pros and cons for different website development platforms. Discussion and revision of the design document allowed the team to refine, change direction, and iterate through design document revisions while the site was still pliable.

The group accepted my recommendation of using Drupal for the development platform. It took a long time to build the support necessary for this choice, which seemed new and ambitious to people who had not worked with open-source software before. Several factors contributed to the ultimate decision to support Drupal.

  • We interviewed school website development companies, but their presentations left committee members feeling underwhelmed.
  • I built a clone of the current website in Drupal to demonstrate that a Drupal site would be sufficiently capable and could look like anything (the graphic design layer is mostly independent). I ran some auxiliary website functions, such as a podcast platform, on the clone site for a few months one year.
  • The parent volunteer on the website committee felt that nonprofit organizations should consider open-source their first option. “Why wouldn’t a school use open-source software?” Even though Plone was his favorite platform, he supported the choice of Drupal.

Develop the site

In our case, I became the lead developer. Other schools might hire an external lead developer or contract with a school website company to deploy a website based on the company’s platform. Making this my special project for the year in addition to my regular job, I built the site part-time over a period of about six months, from January – June. The needs assessment and design phases had taken place in the fall of that year.

Working with open-source software, I had the ability to experiment with pieces of functionality and make decisions about what modules to use for what purposes. I also built a few site prototypes, the last of which proved strong enough to continue to develop into the production version of the site.

At the same time, graphic design work proceeded through selection of favorite elements from the prototype designs, development of a first draft final design, and then refinement and revisions.

Drupal has many community-contributed modules that overlap in functionality, and the Drupal community has posted articles comparing different approaches to calendaring, signup, and image galleries, among others. I also hired a local Drupal consultant to recommend ways to provide common types of functionality in the site. It was easy for him to say “SimpleNews” when I said “newsletter.”

I hired a summer worker to help migrate some of larger bodies of content (e.g., dozens of photo galleries) from the old site to the new. In some cases, he wrote small Drupal modules to load and reform the old content into new, and at other times, he migrated content manually.

The new site was built on a new server with a unique website address, so that I could invite many people to look at the site in process and send comments. The site launched in July, by simply repointing DNS for the main website address to the new site. The old site lived on using a new website address, so that we could search for content missing from the new site if needed. We eventually took down the old site but kept the database running longer for the purpose of content recovery.

Celebrate

We held a small party to recognize the milestone and express appreciation for the contributions of the members of the website committee and the designers and developers involved.

Introduce the site to the community

Similar to the presentations of the previous spring, I made many presentations and held workshops to orient people to the new website and train those who would maintain its content.

Continue developing

The open-source model that we adopted facilitates continued development especially well. We considered the launched website just the beginning of an ongoing development process, not a final product. The school’s needs don’t stay fixed over time, and neither should the website’s feature set. The first fall with the new site involved a fair bit of additional development work to fine-tune certain features of the site in response to user feedback, fix bugs, and add functionality not completed in time for the initial launch. By winter, nearly everything in the final design document was built. I carefully managed an extensive to-do list of wished-for features and desired usability improvements and gradually worked to complete them.

In subsequent years, I have dedicated only a small fraction of my total job to new website development. We added social media integration, a complete admission application system, mobile theme, and also slightly changed the direction of certain features, for example changing the “all school” section into “co-curricular.” Summer has proven a good time to do substantial new code development and Drupal configuration work.

Anticipate the next version

When will we have to repeat the design process and re-launch or significantly upgrade the site? We know that the shelf life of a school website is approximately four years, and we are currently in year three. Drupal 6 won’t be supported forever, and Drupal 7 and Drupal 8 are calling. We believe that the website still meets people’s needs, but this is increasingly coming under pressure as mobile users want easier access to site content and tools, the site design has begun to feel a little old, and we see other websites with more modern features that enhance usability.

My departure from the school may also accelerate consideration of a new website. I mitigated this to a degree by training over 60 people to be content editors and two colleagues to become develop portions of the site. Many people here know a lot about the site. That said, the departure of the principal developer leaves a vacuum, and the school will take much of next year to determine whether to continue with the Drupal strategy indefinitely or to begin to work toward a new website solution.

 

Visual Website Design

Our admission, website, and communication teams have worked together to reorganize the admission section of the school’s website. Not only did we want to simplify and clarify navigation, but we also wanted to present information in visual ways.

Our website is very text-heavy, much of it written eight years ago and only edited since then. In much of the site, we present all of the important content as text and then add some photos for aesthetic or emotional effect. In today’s media-rich culture, people have a lot of practice consuming information visually. We can actually communicate content, not just feelings, through photographic badges. This also forces us to distill the “landing page” message to three key ideas.

In recent years, affordability has become increasingly important to families. Our website statistics show a rise in page views in the tuition, financial aid, and scholarship pages. We respond by both providing easy access to the information people are seeking and by promoting the response that we wish to convey.

Before


After

You can see it in the stats

We recently listed some new job opportunities on our website. Check out the increase in traffic to the employment home page.

New Drupal School Developments

Last week, I noted some interesting developments involving Drupal and secondary schools.

New Schoolyard

NewSchoolyard launched at NAIS, promising inexpensive school Drupal sites built on a template. This fills a hole in the school website market between buying an expensive product, hiring an expensive developer, and doing it completely yourself. In addition, New Schoolyard offers products and services at different price points, allowing schools to decide how much of the work they want to take on themselves or hand over to this company.

If successful, New Schoolyard may open the door even wider for more schools to adopt open-source websites and learn how to modify them. I greatly anticipate the first sites they will create and the code that they promise to contribute to the Drupal community. I have found in my own work with Drupal that it is a challenge to create a customized site that others can then truly make their own. I wonder what strategies New Schoolyard will employ to make full ownership possible for their clients.

DrupalSchools

Around for a while but flying under the radar, DrupalSchools.net is readying for a relaunch. Go check out their list of Drupal sites, tips and tricks, and thoughts on the potential role of Drupal in changing how schools work. This site promises to serve the secondary school community and put the thoughtful use of technology before techie talk. Also check out my list of school “front door” Drupal sites that I started in 2007 and have added to a bit over time.

More interest in our work

The frequency of inquiries into our work at Catlin Gabel continues to increase. Some of these schools are tinkering with demo Drupal sites, others are launching a community intranet, and others are moving toward a new, public-facing website. More schools are discovering the benefits of working with a piece of open-source software before committing to it and sharing their knowledge and perspectives gained.

Maru-a-Pula Website To Drupal

Just two months ago, I wrote how I was still using Website Baker successfully for two sites. Well, it’s down to one now! I have migrated the Maru-a-Pula website from Website Baker to Drupal. Maru-a-Pula is an amazing school in Botswana that I have worked from the U.S. to assist since teaching there from 1994-96.

Nothing went wrong with Website Baker. The school had just outgrown the basic CMS for its needs. The principal had started to write a news column, and while Website Baker does support news, the Drupal module is much easier to use. We now have several new features the school or I had wanted: RSS feeds sitewide, a blog for any author, actual calendar functionality, and all sorts of future possibilities using modules from the Drupal community.

For the sake of a smooth user transition, I built a new Drupal theme (sub-theme of Zen) to copy almost exactly the old Website Baker theme. The two sites look nearly identical. I have to re-theme the Search form. I have done enough theme work in the last year that I felt very comfortable manipulating template and CSS files to create the desired look.

The site is designed so that local tech staff in Botswana may take over as much administration as they wish. The site has no custom module code whatsoever, and all dynamic content is presented through content types, views and blocks (e.g., main home page photo and three feature columns).

New site
new site

Old site
old site

Contributed Modules
Calendar
CCK
Date
FCKeditor
Filefield
Imagefield
Link
Menu breadcrumb
Pathauto
Simplemenu
Site map
Token
Views

New Catlin Gabel web site launched!

We launched the new Catlin Gabel web site yesterday morning! The first day went very smoothly. Thank you to those who sent feedback (especially the two with constructive comments). Most first reactions have been about graphic design and navigation. I’m sure that people will have more to say about functionality once they use the site to get things done.

We timed the launch for the very slowest week of summer, so that we could see how the site performs as the load increases up to the start of school. A handful of teachers and staff members are updating new sections of the site, such as Sustainable School and Global Education. Other parts of the site are missing content at present and will need to be populated before the start of school. I created an introductory video to call attention to some aspects of the site.

Far from being done with the site, I have a very long list of items to address, most notably continuing development work on our custom modules. Many remaining to-do items are to customize aspects of the Drupal interface that aren’t quite the right match for our needs. Nonetheless, it feels great to have cleared a major hurdle!

Some of the recent posts on this blog describe the site’s features and development process in greater detail.

new web site

Web Site Strategy

Here is a quick run-down of some key ideas underlining our new web site strategy.

Site goals

The site has two overarching goals:

Provide timely, useful information that school constituents are seeking.

Regularly transmit the key messages that drive our communication strategy.

Guiding Principles

Authenticity: our target audiences are sensitive to the authenticity of our message. We benefit by demonstrating transparency in our communications and providing a “window” into daily life in the school. Ruth Catlin envisioned the school as a “lab” that would share its teaching accomplishments broadly.

Timeliness: web site visitors expect site content to be up-to-date and useful in the present moment. Many visitors come to the site expecting to find information to help them meet a deadline, attend an event, or find out what just happened in the school community.

Engagement: community members once gained entrance to this community. The site should attempt to move individuals up the “engagement pyramid.” It should provide tools for users to provide information to the school, communicate with employees, and network with each other. Highly engaged members of the community contribute to the school’s success through attendance at school events, volunteerism, financial contributions, and spreading the good word.

Excellence: our school attempts to perform at a high level in all its pursuits. The site should itself demonstrate excellence in design and function and also communicate examples of excellence that take place within the school. Admittedly, this desire for excellence sometimes rubs up against our equally strong desire for authenticity.

Site objectives

Develop a graphic design and user interface that conveys the vibrancy and excellence of this institution and is also easy to navigate and use. Choose colors to pay tribute to the classic Catlin blue but make central use of the new, Crane-provided color palette.

Broadly publish photos of everyday life and special events at the school. Most schools only display carefully staged, professional photos on their home page. We deliberately publish shots of everyday life and special events in order to convey the vibrancy of school life, the authenticity of our communications, the informality of our school culture, and to provide motivation for repeat visits. We will also convert the random-select home page photo into a proper slideshow and retain the current grid view for photo galleries elsewhere in the site.

Limit the cash cost of the new site to less than $10,000.

Make athletics schedules and driving directions easy to access and subscribe to.

Make lunch menu information easy to access and subscribe to.

Make it possible for many people at the school to contribute content to the web site. “Content managers” will receive training and maintain the core pages on the site. Teachers will have the ability to post classroom news, which will be aggregated into division-level news pages. Teachers and students will also have individual blogs, in order to publish examples of their work should they choose to do so.

Launch our social network and media initiatives at the same time as the new school web site. Continue to develop our Facebook presence to share highlight news items, audio and video captured at school, and community-contributed content. Further develop and call attention to our LinkedIn presence, so that it takes over as our primary “career network” tool. invite parents and students to join the network (currently only alumni are involved). Launch new Twitter and YouTube channels in order to reach our constituents where they are, exert more influence over messaging about Catlin Gabel in those spaces, and create the opportunity for a viral media success.

Broaden the publication of News feeds to the entire site. News items will appear on the home page as they do at present, but they will also be archived permanently (unless deleted), allowing users to get a sense of the rhythm of school life over weeks and months. Newsflash items will automatically appear in other relevant sections of the site (e.g., alumni, arts). Each program, department, division, and classroom may have its own dedicated news feed, which will show both Newsflash and staff-contributed items. This will increase the timeliness of these content sections and “unbury” new content items. The web site manager will be able to select and promote smaller news feed items to the home page Newsflash if desired. Allow users to set up customized news subscriptions by RSS or email.

Provide forms to collect important data from constituents, increasing usability, accuracy, and efficiency. Users will be able to complete online forms to start the admission process, make an online gift, apply for a job, or update their contact information. The school benefits by making life easy for its constituents, receiving accurate data, and not having to collect it through more time-consuming processes.

Provide an opt-out alumni directory that alumni, employees, parents, and students may search. Provide employee and student photo directories to other employees and students only. Automatically generate directories and contact lists from our core school databases, eliminating the need for manual data entry of this information by school staff on the site.

Broaden the visibility of Caller articles on the site. Cross-list them in relevant sections through the site (e.g., a Caller article on sports also appears in the Athletics section of the site). Use Issuu.com to embed a Flash-based version of each Caller in the site, increasing readability of the articles, allowing the user to print an issue, and leveraging the school’s investment in graphic design and layout services for this publication.

Get All School News and division newsletters out of PDFs and into web page and email format. Retain the distinctive, individual character of division newsletters.

Provide a straightforward process for parents, alumni, admission applicants, and job applicants to create a login on the site that gets them access to relevant content and tools.

Enable the posting of comments by employees, students, and parents. Limit the viewing of comments to these same groups. Do not enable comment moderation queues but rather follow comment posts closely and intervene in exceptional cases.

Provide a clear navigation pathway for people new to Catlin Gabel to learn basic information about the school and receive key messages.

Improve site navigation for parents, who have provided feedback that the items of interest to them are scattered all over the site.

Provide “quick links,” so that many programs may have a ubiquitous link for them without cluttering up the primary site navigation.

Create a “schoolwide” or “all school” top-level section to draw attention to the many, growing schoolwide programs that mark the distinctive nature of the school (e.g., sustainable school, global ed, the arts).

Make it easy to post and sign up for volunteer opportunities. Make it possible for a user to see all available opportunities in one place.

Perpetuate the distinctive qualities of our four divisions by providing separate top-level sections and news feed categories.

Reduce the number of email list errors by providing central [email protected] listserv addresses automatically synced to our school databases.

Getting close

I have had my head down working on our new school web site for the past few weeks, hence I have not written much here.

We presented new features to focus groups: three faculty, one parent-faculty association, and one board communications advisory group. We hired a local college intern to migrate content from the old site to the new. Two staff members are working on the photo directory, site copying and backup utilities, and an emergency contacts form. Our graphic designer sent us two graphic concepts, and our web site team met and sent back comments. We received the a second revision and are preparing to send back our comments on Monday.

We are gradually taking on real users as we build up the web site. Our athletics director has started entering competition dates for next year. The arts department recently met to build out their new “schoolwide” arts program section. This week, we plan to invite employees to update their emergency contact information through our new custom form. The week after, we will likely invite all parents to update their contact information and review their directory entries online.

Our publications director has been developing her Twitter “voice” and getting to know the Facebook Pages interface in preparation for that aspect of the site launch.

So far, we have committed about $5,000 of contracted work to the project. We plan to finish the project at less than $10,000 total.

Hopefully, I will find time after site launch in July to post more information about our project!

Seeking CMS Graphic Designer

Catlin Gabel seeks a graphic designer on a contract basis for a new version of the school’s web site, www.catlin.edu. This person will produce an original graphic design suitable for a content management system and consistent with the school’s existing style guide for print materials. The design will contribute to the vitality, accessibility, and usability of the new site. The project will be limited to graphic design and a small amount of interaction design — the information architecture is already in place. The school already possesses a considerable amount of photographic imagery for use in the site. The final deliverable may be either a layered Photoshop document or a complete Drupal theme, depending on the designer’s skills and experience.

To apply, please send:
- A letter describing your interest in this project
- A résumé of your graphic design experience and training
- A description of your web graphic design process
- The URL of a portfolio of your web site graphic design work
- References for prior web site design clients

We will select finalists and then request from each a project bid and interview (in-person or Skype).

Richard Kassissieh
Director of Information Technology
Catlin Gabel School
kassissiehr (at) catlin.edu

Seeking Drupal Consultant

Catlin Gabel seeks a Drupal expert on a consulting basis to advise and assist school technology staff with the development of a new version of our public-facing web site, www.catlin.edu. The consultant will explain Drupal best practices to the school’s development team, provide suggestions for techniques to solve specific problems, and directly assist with site configuration and programming as needed. Please visit ww3.catlin.edu for examples of the ideas we are currently exploring.

To apply, please send:
- A letter describing your interest in this project
- A résumé of your Drupal development experience and computer science education
- The URLs of sites that you have developed and/or a web-based portfolio
- References to prior Drupal site clients, especially in the nonprofit and education sectors

We will select finalists based on these materials and then request an in-person or Skype interview.

Richard Kassissieh
Director of Information Technology
Catlin Gabel School
kassissiehr (at) catlin.edu