So you’ve probably seen the new website for GoShort.nl, an international short film festival held every year in the Dutch town Nijmegen. If not, now is the time to explore the site, form your own opinion on the design and maybe get yourself some tickets!
What’s this about?
In this blog post Martijn (our interaction designer) will share how we came up with the information architecture and interaction model for a key feature of the website. The website provides the possibility to explore the festival line-up — which is comprised of 264 films — and create your own timetable by searching, filtering and selecting film blocks.
But how do you structure this in a clear way?
Short answer: it depends. Every studio or creative team does this a little differently and there’s no definitive answer. When it comes to websites like this one, we start out by getting as much information as possible from our client and her stakeholders with a kick off meeting. In these meetings we discuss everything; from target groups to structuring the website. It’s basically a short but efficient sprint in which we find a basic structure for the website, in direct collaboration with the client and stakeholders.
After that, the team structures all the information more thoroughly by forming a sitemap. A sitemap is an overview of all the pages and possible actions. It forms a base from which we explore and experiment with information architecture and the wire-framing of information and interactions. By that the sitemap change every so often, as we discover better ways to structure information.
A sketch for the sitemap of goshort.nl. Was this the best way? We’ll figure it out later on when running into difficulties. ¯\_(ツ)_/¯
The same goes for the wireframes. You can see it as a dynamic part of the design process in which many iterations follow each other up to improve past ways of structuring information and interactions.
Some wireframes we sketched to figure out the information structure per page.
But what about structuring those 264 films?
So yeah, that’s a slightly different story. Since the start of the festival, Go Short structures their films in blocks. A block contains 2-5 films. As a visitor, you can only visit a film block, not a single film. Kinda makes sense, as all films have a short running time, so it’s more convenient to view a collection of them categorised per theme then to walk into one and missing a bunch of others. Besides film blocks, Go Short also organises parties, lectures and competitions during the festival.
As a festival visitor, you probably want to find a film block you like, select that block and make sure you’re able to visit that block.
Find a film block, select that block, make sure you’re able to visit that block. Easy, right?
Go Short provided a traditional timetable on their previous website in the form of a timetable which showed all the film blocks on all the festival days. Seems like a proper way to visualise an overview, as it feels familiar to the print variant most visitors will use during the festival.
Traditional isn’t always bad, but does it add something to the experience of using the website?
We thought differently. Nowadays a website can feel lacking when it provides static information and doesn’t help you reaching your goals quickly (and if possible in a nice way). In this case, you could describe the goal of a user as: finding the right film block. Or even before that: explore what Go Short is offering on a day and time specific to the visitor.
I mean, it’s fine looking this one thing up on a website, but when you plan to go for the weekend, it can become a troubling task when you have to do the planning all by yourself. Why not let the website help you a little bit by cutting up the information in bit-sized pieces? And add a filter to hide the things you’re probably not interested in?
So we figured, we might as well make it easier for the festival visitor to create his/her own planning. With that in mind, we researched ways people select & collect things online. By collecting recurring patterns (common interfaces) and conceptual models, we get a better idea of what (most) people are comfortable using online nowadays. As we discussed the shopping cart and timetable patterns, we came up with an idea for the Go Short website.
The shopping cart pattern. In this case the most well known Dutch e-commerce website Bol.com. Other well known examples are Amazon and eBay.
An online timetable pattern. Recognize this one? Yeah, this was the previous timetable Go Short used. By clicking on a colored block an overlay would open and show detailed info about that film block with a link to a ticket for that particular block.
A printed timetable for a festival: bring a pen and circle every act you want to see. It’s fine (for print).
Show me the money; What did you come up with?
As mentioned before, we wanted the visitor to discover & collect film blocks and be able to buy tickets for their selection. So we came up with a combination of both:
The shopping cart + the traditional timetable = create your own timetable.
In a few steps, the visitor is able to:
- discover what Go Short’s festival line-up looks like,
- select what kind of blocks she wants to see,
- work out a personal schedule for the weekend,
- and order tickets for that schedule.
Let me break it down step by step with a few clips of the user flow:
Discovering what the festival line-up consists of.
Selecting blocks the visitor is interested in.
Creating and editing your own festival timetable with the selected blocks.
Ordering tickets for your own festival timetable.
So we combined those two interaction models into one! To compare it with the two conceptual models mentioned earlier: people can add film blocks to their shopping cart and create their own timetable. Both are recognisable in the way they behave. The timetable is still a direct visual implementation of the conceptual model, but it acts in a more personal way. And the shopping cart pattern is still there, but is directly connected to the timetable. In a visual schematic you can summarise the user flow like this:
Pretty cool, right? ; )
As is in most cases, there were certain constraints. We had to work with a legacy ticket system and there was no room for user testing. Next year we will do an iteration of the design and interaction model to work out the kinks and improve the user flow. But for now — if I were you — I’d try out GoShort.nl and get yourself some tickets for the next edition of Go Short.