I’m proud to present my latest project to the world — at least to those who got the password:

The Gwen Frostic Online Archive is all about the legacy of Michigan artist Gwen Frostic.

Being part of my bachelor thesis, I’ve been working on this archive for a few weeks. Based on an offline version compiled by my fellow student Elsa, my goal was to transfer that archive to an online version accessible from all over the world. Elsa put a lot of effort into scanning all the newspaper articles, images and writs and categorizing them, so eventually I had to build a new home for over a thousand items.

Working on such a project includes incorporating various techniques and design principles. You have to think about the general layout of your application, information architecture (i.e., how to organize the great amount of data), navigation design, URL structure, backend logic, preferred technology, requirements from above (i.e., the people actually working with this archive) and the overall user experience.

So, how did I proceed?

First, I created a mockup to reflect the basic layout I was thinking of:

As the online archive should make use of Elsa’s sophisticated data hierarchy, I had to find a way to represent this. Initially, I thought about using a navigation tree, which is the de facto standard for displaying nodes in a hierarchy.

However, the default way of implementing a navigation tree has a major flaw: what if the user expanded a lot of nodes at once? The navigation tree would simply become too large, resulting in lots of scrolling to finally reach the content in question. So I’ve made use of what I call the “iPod Playlist approach”, which means that the user is presented with one node containing the items plus folders pointing to the nodes directly below. Also, I made use of breadcrumbs navigation, which allows for navigating directly to one specific node:

Speaking of hierarchy, I had to bear in mind that MySQL doesn’t offer you an easy way to store your data hierarchically — after all, MySQL is a relational database — so I had to dig into some algorithms until I found what I was looking for: it’s called the Modified Preorder Tree Traversal algorithm:

Looks quite complex, and it is. :-) Luckily, I didn’t have to implement it on my own (given the time I had for setting up the backend), as I found a nice plugin for use with the CodeIgniter PHP framework. I strongly recommend CodeIgniter, as it allows you to realize your ideas in no time — given that you have some PHP knowledge.

Then, I had to generate preview images from all the PDF files which had to be stored in the archive. Finally, I had to put all the file references into the database. And that’s it.

Well… not quite! Still, there was lots of additional work to do, like adding search capabilities, JavaScript effects for enhanced usability, offering the user to download the requested files instead of just displaying them in the browser, debug all the implemented functionality, adding explanatory text, hints, and so on…

This is what the final version looks like:

I’d really like to make the website available for everyone, but I can’t because of university requirements.