OFFF Barcelona 2020: New microsite

Founded in Barcelona in 2000, as inspiring as it is enigmatic, OFFF is a creativity, design and digital culture festival that involves 20,000 people around the world. Throughout its 19 editions, it has become a global reference for post-digital culture.

Overview

In the present project I was commissioned to design, within a 5 days period, a ready-to-build microsite for the forthcoming edition of a festival of my choice. I decided to design a new microsite for the OFFF Barcelona 2020 festival, 20th anniversary edition.

I had to work as a one-person studio and covering a series of roles to make sure I delivered a high quality project:

• Market, Trend, and User Researcher

• Designer

• Art Director

• Designer

• UI Developer

Scope

• A microsite with a one-year life cycle.

• Three stages of use: Pre-event, During the event and Post-event

• It should include all the information for this edition.

• A ticket sale service.

Research

I interviewed 5 people that have frequently attended any of the past OFFF Barcelona editions. Following are the three outstanding insights I gathered from them:

“When I go to the OFFF I can't attend all the conferences because they are carried out simultaneously in different areas of the festival.”

“I live in Sweden and I love the OFFF Barcelona but it is far from home and now that I have children, it is difficult to move to Barcelona to attend the festival.”

“The festival pass is very expensive and I'm only interested in some of the speakers participating in the festival. I don't want to pay for guys that don't interest me.”

Value Proposition

Offer a responsive microsite that allows users to establish a better relationship with the festival. More flexible and adapted to them, taking into account their criteria or personal preferences, availability of time and purchasing power.

Central Creative Concept

I found out who is the public of the OFFF festival and by doing so I started shaping the Central Creative Concept (CCC) that will support the whole project: The Creative Jungle.

Every year, the festival brings together creative people from different fields. This made me think of a jungle of creatives as a CCC.

Mood Board

Animals, nature, colors, organic shapes, neon lights, organic patterns, textures… The rhetorical figures come to the surface. If the festival is the jungle, the animals are the creatives. Diversity, everyone is different but lives in the same ecosystem in a creative community full of opportunities. Every individual, every creative animal is unique, free and wild like every animal of the jungle. This is how I graphically expressed the concept.

Style Guide

I set up the Style Guide. I resolved the colors, the typography, the photography treatment, the button states and the icons.

The colors are three, turquoise and purple as principal colors and yellow for highlighting. These are vivid colors that connote springtime —the festival is held on April— and rampant contemporaneity.

Regarding the typography, I picked two typefaces that complement each other. Foundry Gridnik, with a more technological appearance and Rustico a brushed typeface, a more wild, gestual and organic typeface.

Different pictures of jungle animal confrom the photography of this microsite. The original appearance of these animals is modified by switching the original colors of their fur and skin for the principal colors of the style guide above mentioned, giving them some funky striking look.

User Persona

I filtered the insights gathered on the research stage and I defined three users persona: Caterina, Björn and Miquel. Each one of them with their own needs and frustrations helped me to explain the new features I propose for the three microsite's established stages of use: Pre-event, During the event and Post-event.

I started with Caterina, the main user persona. She is an student and can't afford the expensive all inclusive OFFF Pass.

I created a feature to solve her needs and frustrations:

• 1-Day Ticket

• 1-Talk Ticket

In the next flow, Caterina shows how she purchases three separate different talks of her interest in the OFFF's Pre-event microsite:

The second user persona is Björn. He lives in Stockholm and although he wants to attend to OFFF Barcelona, due to work reasons he can't make it to this edition, this year he can't come to Barcelona.

For him I developed another feature, My Talks — Watch Live, that allows him to be able to watch the OFFF Talks remotelly in live streaming via During the Event's microsite.

The third user persona is Miquel from Palma (Mallorca). He is a renowned freelance illustrator very busy lately so he is not able to come to the talk he already bought for Thursday afternoon. He feels sorry beacause the talk he is missing is Jean Jullien's, one of the best artist at the moment.

For Miquel, I developed a third feature, My Talks — Watch Pre-recorded, that allows him to watch any of his purchased OFFF Talks pre-recorded through the After the Event microsite.

Responsive Web Design

The microsite had to be build in responsive web design. Following I present how the responsiveness of the microsite will perform in two different viewports.

Key Learnings

In this project, I realized how important is to shape a solid user persona according to the insights obtained during the research stage, or in this case, a principal user persona and two secondary ones. The user persona is an extremely useful tool that synthesises the gathered information. It truly helps to focus on the problem and define the solutions.

This project has been conceptualized and designed by Adrià Lleó within the framework of Ironhack Barcelona's UX/UI Design Full Time Bootcamp.

To know more about it, READ THE FULL CASE STUDY on Medium (6 min.)