New Microsite Design: OFFF Barcelona 2020 Festival
UX/UI Case Study
I am a student UX/UI at Ironhack Barcelona bootcamp. 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 had to work as a one-person studio and covering a series of roles to make sure I deliver a high quality project:
- Market, Trend, and User Researcher
- Interaction Designer
- Art Director
- Motion Designer
- UI Developer
The 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.
Introduction
I decide to design a new microsite for the OFFF Barcelona 2020 festival. It is going to be their 20th anniversary so I thought it would be challenging enough.
Founded in Barcelona in 2000, as inspiring as it is enigmatic, OFFF is a creativity, design and digital culture festival that involves some 20,000 people around the world. Throughout its 19 editions, it has become a global reference for post-digital culture.
The User Experience Research
I start by interviewing 5 people that have frequently attended any of the past OFFF Barcelona editions. Following are the three outstanding insights I gather from the interviews:
“When I go to the OFFF I can‘t attend all the conferences beacuse 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 am only interested in some of the speakers participating in the festival. I don’t want to pay for guys that don’t interest me.”
I define the 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, their availability of time and their purchasing power.
The Central Creative Concept
I find who is the public of the OFFF festival and by doing so I start 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 let me think in a jungle of creatives as a CCC.
Then I develop a Mood Board that helps to express the concept graphically. Animals, nature, colors, organic shapes, neon lights, light, patterns, textures… The rhetorical figures come to the surface. If the festival is the jungle, the animals are the creatives. 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.
The Style Guide
I configure the Style Guide. I resolve 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.
As regards 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.
The User Persona
I filter the insights gathered on the research stage and I configure three users persona: Caterina, Björn and Miquel. Each one of them with their own needs and frustrations helps me to explain the new features I propose for of the three microsite’s established stages of use: Pre-event, During the event and Post-event.
I start with Caterina. She is an student and can’t afford the expensive all inclusive OFFF Pass.
I create a feature to solve her needs and frustrations:
- 1-Day Ticket
- 1-Talk Ticket
Following, 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 Stockhoolm and although he wants to attend to OFFF Barcelona he can’t make it to this edition, this year he can’t come to Barcelona.
For him I develop another feature, My Talks — Watch Live, that allows him to be able to watch the OFFF Talks remotelly in live streaming via the “During the event” microsite.
The third user persona is Miquel from Palma (Mallorca). He is a renowned illustrator and has lot of work these days so he is not able to come to the talk he 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 develop 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 realize how important is to shape a 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 tools that synthesises the gathered information. It helps to focus on the problem and define the solutions.
Thanks for reading, I hope you enjoyed it! I would appreciate any feedback. To know more, visit my online portfolio. Feel free to connect with me on LinkedIn.
Appendix
