Tuesday, June 8, 2010

Building a Website for a Small But Unique Organization - a Case Study


What should the website for a small but highly unique organization be like? I don't think that there is an exact answer to this question. However, I recently had the opportunity to build a new website for a small private high school in British Columbia, and I think I came up with a pretty good vision. Now I would like to share about this experience. First off, I am a huge fan and practitioner of the 37signals approach, and for this project I was particularly inspired by a book titled REWORK (a New York Times best-seller written by two guys at 37signals). In my humble opinion, the result was fantastic, and I do believe that this new website is comparatively the best in its class (pun intended). I should share with you that I am not a real professional web designer, nor do I usually create websites. However I was excited to find that despite my lack of expertise, by carefully employing the lessons from REWORK, the site turned out extremely well.

Now before I get into exactly how it was done, please take a look at these sample screenshots from websites of high schools with comparable educational philosophies. When taking a quick glance, ask yourself which of the four websites you think best succeeds at expressing the school's uniqueness:



So....If you choose the bottom right one, please keep reading because that's the one I'm responsible for, and I would love to share the process I went through in creating it. If you picked a different site, then you're off the hook and can stop reading if you want to. HOWEVER, if this is the case I would really appreciate it if you could please leave me a COMMENT regarding why the bottom right was not your first choice.

1. About the High School

The Island Oak High School, located on beautiful Vancouver Island, British Columbia, Canada, was founded in 1995 by the entrepreneurial parents of home-schooled children. Unlike the majority of public high schools in North America, it is very small with only 10-20 students in each grade. It is not well known at all, even amongst the local community. With no reputation to speak of, even people who hear about the school don't really have a way of forming an opinion about it. Before I had any connection with the school, let me just say I had no idea whether the school would be worth consideration for my daughters' future education. Even though I had visited their previous website, all I really felt I knew about the school was that it was tiny.

Now that I have had the opportunity to work on this project, I know what a unique and special place this school really is. While this information is of course explained on the new website, here is a synopsis of my observations:

(1) It is a small-sized school, and they prefer it that way

As I mentioned in my last post, The school has a warm and caring environment. Everybody knows everybody, and it is like a large extended family. The students and the staff love it! One student that I interviewed said "(here at the school) people think I exist."

(2) It is a Waldorf school

In 1995, the founders were home-schooling their children. Inspired by Rudolf Steiner, they decided to start a school implementing his philosophy. In North America, this type of currinulum is called Waldorf education. Through providing a unique curriculum, Waldorf education is devoted to enabling children to be able to think for themselves, to be autodidacts, and to directly affect positive change in their world.

(3) For a school so small, there are many international students

Because there are many Waldorf schools all over the world, and many students in this curriculum study abroad in exchange programs in 11th and 12th grade, a large percentage of students come from other countries. International exposure to this degree is rather rare in regular schools.

(4) Nature's blessings abound in this beautiful environment

Island Oak is located on a large island on the west coast, and happens to be the warmest Canadian place in winter. As a result of the mild climate, the land is very rich in soil which nurtures delicious vegetables. Grass-fed cows, goats and sheep produce outstanding milk. The forests on the island bestow health upon the sea here, making the highest quality seafood available including abundant oysters, various kinds of wild salmon, and prawns, to list a few. The students here can take advantage of the environment by kayaking, climbing and other outdoor sports in summer, and engaging in winter sports as well. All of this adds to the school's appeal to international students.

(5) Students get to be themselves

At this school, there is no peer pressure to be anybody but yourself. While some students may meet up and be social after school, other students may go home immediately to assemble their DIY computers or pursue other interests. Everything is acceptable.

Sounds pretty different from your average high school, doesn't it? Island Oak definitely has its own way of doing things. While not for everyone, the families and kids for whom it is a fit are exceedingly lucky to be able to find such an environment. To be honest, it was its uniqueness that convinced me to help out with the website. If it had just been a regular school, I would not have had much interest.

2. The Problem: "Should Make the Invisible Visible"

Because they are a private school, they must attract new enrollments every year in order to maintain their optimal size.

From an insider's perspective Island Oak is full of life, and the students are actually happy to be there (unlike what Paul Graham once wrote about "the emptiness of school life" in his essay). It is a great environment in which to learn. However, from an outsider's perspective, well, that's the problem. There is no outsider's perspective as the school is practically unknown. And this is the school's biggest problem.

This issue is primarily due to the fact that the school uses its resources to give a lot of individual attention to the students. They did have had a website but the previous site didn't do a justice to the school. So my objective became clear—the new website would effectively communicate the school's mission and environment to prospective students and families, both local and international.

3. "Competiton"

I took a quick look at some of other Waldorf high schools' websites in North America.









Now don't get me wrong—the sites look good. It seems as if all of these schools hired a professional web design firm to create the sites for them. In terms of the aesthetics and design, I like the San Francisco site best. The primary objective that these sites accomplish is establishing that the schools exist. Beyond that however, if I were for example deciding which school would best suit my children based on these sites, they don't do much to differentiate themselves. I really wouldn't want to have to visit each school in person, so the websites should give me enough information, and the right type of information, to help me make such an important decision.

This realization convinced me that the best website for the school would highlight its uniqueness and should avoid pretending as if it were a big established Waldorf school. Rather, the site should be more personal, speaking warmly to the visitor's heart about the school personality. The school should not aim to directly compete with these other schools, but should showcase unique and original experiences available at Island Oak. Once I realized this, I knew that this project was going to be a success, although it turned out to be harder to achieve than I thought...

Related Lessons from REWORK: "Don't copy," "Underdo your competition," "Who cares what they’re doing?" and "Less mass"
There are many websites in your domain, and they often look similar. Visitors are tired of them. If you copy them, you will tire your future customers. Aim to be unique and opinionated yourself.

4. What to include

Because I wasn't familiar with the school, I decided to try to gather first hand information about it through interviews with teachers, students, and parents. Also, I enlisted the help of Vivi de Graff, the energetic parent of an 11th grader to start working on content for the site. We worked together really well, especially as she is highly intelligent and detail oriented.

Vivi, who is a perfectionist, came extremely prepared to begin collaborating with me on basecamp (a project collaboration service from 37signals) with her ideas for what the content of the site should be. On her list were 56 well thought out items, and the idea that there would be nine plus pages with 24 subpages. I countered her proposal with my own, which was that we should limit ourselves to have only four pages of content! I'm sure this surprised her, as her inclination was the exact opposite of mine. My idea was to make sure that our essential message would be clear to visitors, and to make sure that this message was reinforced and applied everywhere throughout the site. This was also important due to the fact that we were only working on the site part time, and this kept things manageable.

After our initial messaging on basecamp, we came together for an in-person meeting. She had come up with a great tagline for the school: "Small School with a Big Embrace." It is perfect because it captures what the school is really about. That really helped us focus our work, and we reconfigured her original content list into four main pages (although one was added later), a top page, and a time-sensitive page with information such as newsletters and announcements that can change on a weekly/monthly basis. Following this structure we were immediately able to weed out extraneous information. For example, in the original list of content, there was a page titled "What is a Waldorf Education?" As this item is not directly related to the message "Small School with a Big Embrace," and there are any number of articles on this subject available elsewhere on the web, we decided that it wasn't necessary. At the end of our session Vivi declared "This (list) is clean!"

So if you work on a website for a small but unique organization, consider limiting the number of total pages. That way, the organization's message will come across as bold and clear. Related Lessons from REWORK: "Embrace constraints," "Build half, not half-ass," "Be a curator" and "Hire a good writer."

5. Building content

Another thing that Vivi and I decided during our initial meeting was to have "talking titles" on the menu for every page instead of brief one or two word titles. On the top page of the Waldorf High School of Massachusetts Bay, for example, we can find School, Community, Alumni, Calendar, Contact Us, Directions, Search and Site Map in the tab menu. While these short titles are more common, we strove to achieve two goals with our talking titles. One was to include friendlier navigation for the visitor, and a talking title sounds much warmer than a one-word title. The second was to apply our theme "Small School with a Big Embrace" in all aspects of the site design, including the menu links. Compare "School" with "Come in and Meet Us" in these examples below.


vs.


The other intention of the talking title method was to convey a clear objective for each page. The talking titles helped us clearly set a specific mood/mission so we could work on it without forgetting exactly what we wanted to cover. Additionally, they helped us focus where all of the information should go in the previously mentioned curatorial stage. Instead of cutting out what we thought was unnecessary (which can be hard to do from a list such as "School, Community, Alumni, Calendar, Contact Us, Directions, Search and Site Map,") we choose what is critically essential and matches our theme, and/or we redistribute the information to an appropriate page. So in my experience, Talking-titles are creator-friendly a well as being more visitor-friendly. Win-win!

At this point, we were now ready to fill in the content. Our strategy was to use as many photos and videos as we could. We wanted to let the media speak for itself about the school's atmosphere. We decided to have a photo shoot, and on that day we got so many wonderful images that it was difficult to pick only a few. We definitely found a way to communicate "Small School with a Big Embrace.". You will see what I mean when you look at the top page. Also, Vivi did a wonderful job with the content itself. The text was very clear, and instead of making the text formal, she kept it in alignment with our theme and the tone was warm and inviting.

6. A student generated video

As I mentioned, we planned to create a video for the "Come in and Meet Us" page to showcase the school.

Vivi told me she was going to shoot some videos of the faculty and campus. A little bit later, she told me her daughter, who is in 11th grade, was editing the video for us. A month later, I asked Vivi how her daughter was doing, and she told me that her daughter was a perfectionist and kept fiddling with it. After another two weeks passed, we decided that we should encourage her to finish up. A few days later, I received a link to a YouTube video. It was fantastic!

It brilliantly captures how and what the students are up to at the school in a very personal way with scenes of student life, as well as faculty interviews. The way it was shot makes you feel like you are immersed in the video, not only a distant viewer. I later found out that this student both recorded and edited the footage, which is quite impressive for someone who had never had any formal training, and had not been around computers until recently (Waldorf educators discourage use of media/computers until when children reach an appropriate age). In one month she taught herself all of the skills necessary to complete this project, which is a perfect example of the culmination of the self-learning and thinking skills instilled by a Waldorf education. While technically not perfect, and not an "official" nor professional view of the school, the video explores the school from a student's perspective, shows off the girl's potential, and is thematically in line with our message. Take a look at the page later.

Other schools created their videos by hiring professionals. An example could be HarvardJustice.org. These are very well-done and look almost like a TV show. However, you don't have to do the same for a smaller organization - it might not look slick and professional, but your hand-made greeting video will be fine if you express yourself in a personal way. It will express what you are.

Related lesson from REWORK: "Nobody likes plastic flowers."

7. Infrastructure should be optimized for an organization with no technical staff

Composed of a very small team, the school has six teachers and two administrative staff. Because of a lack of a technical staff, they had been having difficulty updating the previous website. As a web developer, I knew that the school would be best served by a good content management system (CMS) so that they could update the site in a WYSIWG (what-you-see-is-what-you-get) manner, and the CMS should be web-based (they could not afford to hire a person on a regular basis who could maintain an internet server. Even though I could develop a custom CMS for them, what if I moved to Germany in future?). Also they had some pdf files to share on the web, such as monthly newsletters, and they need to have their own email addresses. They were using an email/web hosting service that was not capable of custom configurations such as having a subdomain or using a CMS.

Initially, I just did some technical migrations from the previous infrastructure behind the scene which included a domain transfer, hosting the previous site on my own server, and moving the email server to Google Apps for Education. The running cost was now pretty negligable.

The next question was regarding which CMS we should use. I intentionally postponed making a choice about this until that moment, because if we had done it beforehand, it could have affected our creativity and restricted the contents/site design, and I didn't want that limitation. But now with the contents clearer, I started to figure out what would be good enough.

In terms of page contents, there is the top page, four main content pages, and a sub page PLUS a seasonal/time-sensitive information such as news and event announcements. The first six pages, thanks to our careful curation process, were not going to require much updating, perhaps only once or twice a year. However, the news/event announcements section would be added to frequently as it is almost blog-like. So, I separated these items into two categories - one for relatively static content which would be served at islandoak.org, and the other for timely information would be at news.islandoak.org as a blog. At the top page of islandoak.org, I decided to show titles and links to the most recent entries by parsing the blog's RSS in Javascript. By separating the two, I could completely hand-craft the static contents at islandoak.org.

Once this logical separation was complete, choosing a CMS was fairly easy. Any web server is capable of hosting islandoak.org, and likewise could any blog service could host news.islandoak.org. For the latter, I chose tumblr because it is simple and easy to use. When the school needs to publish a monthly newsletter pdf, they can just drop the file in a dropbox, get the public link to it, and then post it on news.islandoak.org.

Because of the more permanent nature of the content on islandoak.org, I decided to go with tumblr also, but in a separate account. On tumblr, you can have custom designed static pages. Then the school can easily update the pages through tumblr's user friendly web interface, and without having to learn to use more complicated sftp tools.

In summary, we postponed the making a final decision on which CMS to use until the last moment in order to avoid any impact to our pure creativity in building content. And we chose the platform so that the user only had to use a blogging interface + dropbox to maintain the site. And the static/dynamic separated structure gives them the flexibility to migrate the platform anywhere as long as a static content hosting + a blog service are available to them. So they will never be locked in anywhere.

Related lesson from REWORK: " (The) Tone is in your fingers."

8. Design time!

And now to design the pages!

In my primary role as a programmer I can confidently tame state-of-the-art databases, manage a cluster of a hundred servers, or professionally program the backend of a web application. My specialty however, is not design.

If what the school needed was fancy eye-catching design for the website, I would have brought in an actual design firm. However, as the most important thing in this project was to convey to visitors that the school is a "Small School with a Big Embrace," I decided that I could design the pages myself, adhering to the following criteria:
  1. The design would be minimalist, allowing the content such as photos and videos, to shine
  2. The design would be clear so that the message is recognizable at any distance.
  3. The design would be simple so that the visitors don't have to make too many choices
  4. It would be compliant with web standards and have no need for proprietary tools
I formulated this list with several specific practices and designers in mind as inspiration. Inspiration for #1 was Apple's top page. #2 came from Helmut Krone, a designer for Volks Wagen's advertisements. #3 is a well known fact from psychology research which proves that it is better to have fewer choices, and many top designers have adopted this. For #4 I was indirectly inspired by Chris Boone.

Having those four strategies with the site proposition "Small School with a Big Embrace" in my mind, I hand-coded the xhtml/css (plus some jQuery scripts) from scratch. At this stage because everything was already carefully curated at the content level, I had a fewer design items for each page. This made the page design pretty straightforward. So what’s the end product? Well, have a look at the website. Perhaps some of my favorite designers in the world could have done a better job, but only if they fully understood the site’s specific needs discussed here. While overwhelming at the outset, ultimately our position of wearing multiple hats for this project helped us produced a cohesive and effective design. We may be a small team, but it made us, and the results, stronger!

9. Concluding Remarks


Last week we finally launched the new website. Almost immediately we began seeing incredible improvements—in fact in statistics such as the bounce rate, the average time visitors spent at the site, and the average number of pages visitors viewed have doubled! Vivi accurately exclaimed "We made the invisible education visible!" And that’s exactly what we had set out to do.

Being small is fine. Having limited resource is OK too. However, through this project I have learned that a key for success in a website development project for a small organization is to embrace these constraints and allow uniqueness shine through a minimalist design.

Lastly, please visit the site at http://islandoak.org. Thanks for reading!


Acknowledgements
I would like to thank Brian Eng for his feedback on the initial design of the top page, and Emily King for reviewing this post. I should also mention that Vivi de Graff displayed the quickest grasp of the essence of REWORK that I have ever seen in my life as a practitioner.

3 comments:

  1. Great read, it was fun following along with you through the design process. Your choice of tumblr as a CMS is interesting, I wonder if others are using it similarly?

    ReplyDelete
  2. @lawlor.chris Tumblr is not the very best choice for the static contents only site and the way we use it is an extreme case. Some people are using it as a personal "website" with a bit blogish taste. Take a look at http://ejdraper.com/post/260904713/running-a-site-on-tumblr for example.

    ReplyDelete