OFFF 2011 Website

Conceptor, UX designer

The brief

By showing our recap of OFFF 2010 Paris to Héctor (the organizer of the event), he quickly asked us wether we wanted to do the website. We got no restrictions what so ever, and were very open in what we wanted to do with the website.

The idea

Through research we discovered the most fun part about OFFF are the people you meet. So we wanted to have a website where it would be easy to connect with each other.

The concept

Apart from all the basic functionalities an event website should have, we added a profile which serves as a portfolio. Visitors could use this to add comments, and ask questions via the site to the speaker.

The result

Due to timing and budget (and many other problems), we had to leave out a lot of features. But the site is still here, and we got many good reactions.

Homepage wireframe Homepage design
Homepage during the festival

We wanted to give people a sense of what was happening right now at the festival. On the homepage you see the 2 or 3 artists who are speaking at this moment, and a live twitterfeed of tweets mentioning the artist. Underneath you can find the latest updates and some basic information about the festival.

Toggle wireframe/design
Artist election wireframe Artist election design
Artist election

To make it easier for the organizer to make up an agenda, we asked visitors to vote on the artists they wanted to see. The artists you voted on were saved to your personal profile, so that once the agenda was live, you would get a personal agenda filled with all the artists you voted on.

Toggle wireframe/design
Agenda wireframe Agenda design
Agenda

The agenda was one of the most difficult pages to make, since you had a lot of rooms, some static, some with a timeline. The most important rooms are at the top. You can browse through them via the timeline at the top. At the bottom you see the static rooms.

Toggle wireframe/design
Artist profile wireframe Artist profile design
Artist profile

The artist profile had all the necessary info you needed: a small description, interesting links that might be mentioned in the presentation, social media links, downloads for a workshop, ... Underneath we worked out a system where you could both see the tweets come in that mention the artist, and see a list of questions people wanted to ask. You could vote on those questions, and at the end of the lecture, the most voted questions were answered. To ask a question, you had to be logged in. A form would appear for you to either send a tweet or ask a question.

Toggle wireframe/design
Travel Guide wireframe Travel Guide design
Travel guide

Many people combined their visit to OFFF to a trip to Barcelona. So Héctor and his team collected a large amount of venues which we brought together in a travel guide. Logged in users could save locations they liked.

Toggle wireframe/design
Profile wireframe Profile design
Profile

This is the profile visitors were able to make. It appeared as an overlay over whichever page you were browsing and enabled visitors to have a richer experience.

Toggle wireframe/design
Project info
Client:
OFFF
Company:
Design is Dead, Emakina
Date:
June 2011
Tools used

Photoshop, Illustrator, Omnigraffle, Expression Engine, HTML5, CSS3

Credits
Concept:
Isabel Jablonski, Wes Nijssen, Laura Muls, Pieter Van Den Bosch
Design:
Isabel Jablonski, Wes Nijssen
OFFF Presentation

OFFF 2011 Presentation

Conceptor

OFFF Website

OFFF 2011 Website

Conceptor, UX designer

Cloudania

Cloudania

Back-end developer

Pizza Hut Superdetective

Pizza Hut Superdetective

Conceptor

Raise The Odds

Raise The Odds

Conceptor

Cas & Anna

Cas & Anna

Conceptor, Web developer

Robyn

Robyn - None Of Them

Flash developer

Pixboom

Pixboom

Conceptor, UX Designer

Panasonic Evolta City

Panasonic Evolta City

Conceptor, UX designer

IKEA Homepage

IKEA Homepage

Conceptor

Parfois

Parfois

Strategist, Web developer

The Idea Swap

The Idea Swap

Web developer