The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Threaded View

Case Study: Bio21 web site

Notice: This is a discussion thread for comments about the article, Web Science, first published in Issue 244 of Desktop Magazine.
__________

The University of Melbourne’s Bio21 Institute, a $140 million biotechnology research centre that opened in 2005, is an amazing facility. It’s amazing for a number of reasons—not only are the facilities themselves state of the art and the research being performed by the centre’s 450 scientists cutting-edge, but the building itself is a wonder to look at, having won multiple architectural awards.

The challenge facing the Di Marca team was to translate this impressive facility—and the wealth of content associated with it—into a new web presence that both inspired and informed the site’s visitors.

Because the institute is an independent body, the new website needed to reflect a clean, fresh look, while still conforming to the University of Melbourne’s branding system. The client also needed to be able to make frequent, regular updates to the site by themselves—including the ability to expand the site in certain areas and accommodate entire new sections as the site grew.

Clean Or Custom?

With these requirements in mind, the team had the option of either building a custom Content Management System (CMS), or choosing an off-the-shelf solution. After reviewing several alternatives, Di Marca settled upon SitePoint’s Gazette CMS, and partnered with SitePoint to deliver the final solution, citing flexibility, SEO benefits and ease-of-use as key decision factors. “We decided an off-the-shelf CMS would be much more cost-effective for our client,” explains account manager Natalie de Maaijer.

One concern the Di Marca team had over using a pre-built solution was whether the CMS would be able to handle non-standard functionality. Would it be a square peg in a round hole?

While the Bio21 site contains a large amount of structured text, the final solution ended up being far more than a content-heavy brochure site. For example, the site employs several dynamic elements—JavaScript-powered font resizing, an events feed, image galleries and a scrolling news ticker.
For this project, the CMS chosen was more than capable. “Like many designers, we have very strict ideas on how our designs should be translated into an actual final website. And we were able to do that, very successfully,” de Maaijer concludes proudly.

“Gazette is definitely very flexible,” concurs SitePoint’s Julian Carroll. “Pretty much any design can be implemented—the site administrator can be granted as much or as little access as is required to update the site on their own. It can also accommodate rich media like embedded Flash objects or PDFs, and it’s incredibly extensible.”

Design Inspiration

The aesthetic of the Bio21 site walks a fine line between old and new, balancing the tradition of the University of Melbourne with the innovation behind the institute. “We wanted to reflect as much as we could of the university’s brand system, but showcase the facilities themselves—because the architecture there is amazing,” says lead designer, Denzil Tudor.

Indeed, the colour palette, lines and curves used in the site’s design draw heavily upon the architecture of the Bio21 building. “I guess we were quite spoiled—when the project came up we were given a huge gallery of studio-quality photography of the venue, with some amazing architectural shots from all different angles,” reflects Tudor.

The Development Process

From a purist’s point of view, website development should be a one-way process. However, when the initial design mockups were translated into a working website, the design and development teams communicated back-and-forth considerably, which resulted in several changes to the final templates.

“When SitePoint started to implement our design, we found that a lot of things were growing as we were developing—the kind of scope creep that one expects in most jobs,” recalls de Maaijer. “Things start to change as you develop, and the realities eventuate.”

Allowing developers to influence one’s design is not necessarily a bad thing. Tudor explains: “I think that, as a user, you like to latch on to something that is familiar. You don’t want to have to work out some new navigation system when there are already established conventions. It’s the designer’s job to dress it up, add a bit of flair and make sure it’s interesting—but not to reinvent it.”

De Maaijer adds, “In the end, the site looks amazing, and it works beautifully. The solution that we’ve given Bio21 may not be the most basic system. But it’s great that you can dumb [Gazette] down and simplify it, by making fewer options available.”

Training & Handover

One strategy that the Di Marca team employed to minimise pain during handover was to involve the client early on in the project, when obtaining access to the content was crucial in defining the site’s information architecture. In fact, team members from the client entered the majority of the content into the CMS themselves.

By exposing the future site administrators to the system that they would eventually be using to update the site, the learning curve for those individuals became perfectly manageable. Most questions about how to operate it could therefore be answered at the start of the project—not two months after it had been handed over.

“Unless you’re involved in it, learning any CMS can be daunting for a non-technical person. But at the end of the project, we knew the system back to front, and so did our client,” comments de Maaijer. “That said, it’s very easy to use. Especially for people like me—I’m not especially technical. For me to understand, it meant that my client could understand it too.”

The End Result

A successful web project relies on several factors coming together—it’s not enough to develop a strong brand system and comprehensive templates if the system that implements that design is one that the client is unable to update, either because of technical restrictions or because it’s too hard to use. However, when everything falls into place, the project really shines.

“Everyone pulled together and did such an amazing job,” recalls de Maaijer fondly. “And our client was over the moon about it—they’ve had such positive feedback about the navigation, usability … everything. To be involved in something that is so integral to the company and the company brand, and to deliver something that exceeds their expectations is very rewarding.”