UX/UI Case Study: Designing a Microsite for Super Bock em Stock
How I redesigned a festival’s website for the experience before, during and after the event
Disclaimer: Please note that I have no affiliation with Super Bock. This project was developed as part of the UX/UI Bootcamp at Ironhack Lisbon and it serves a merely educational purpose.
In this week’s project, we had to work by ourselves again. The first task was to pick an event to work on during the week.
On the week of the project, there was a cool festival happening soon: Super Bock em Stock (SBS). I immediately thought it would a great event to work on! I knew about it before, but I’ve never been there so I had to investigate 🕵♀.
PART I: Understanding the context
So, what is it?
- SBS is a 2-days Indie Rock Music Festival that happens in Lisbon
- It happens once a year around November (it’s one of the only winter festivals in Portugal)
- The artists that play there are mainly emerging artists
- There are around 50 concerts happening during the festival
- It happens in different venues at Avenida da Liberdade (one of the most known in Lisbon), such as old theatres
- It has around 15.000 attendees (a much lower number than the big Portuguese festivals that have around 100.000 attendees)
- It is sponsored by Super Bock, one of the biggest brands of beer in Portugal
PART II: Defining who I’m designing for
Once I had all the details figured out, I went to discover WHO were the users of the festival, WHY they go there and WHAT they like and dislike when living this experience. I interviewed 5 SBS users and I was able to build SBS’s Persona.
Francisco is a heavy user of the festival. He’s constantly listening to music and looking for new artists. He goes to Super Bock em Stock because there are one or two artists that he already knows and likes, but he’s thrilled to go on the discovery and find other artists that he doesn’t know yet. Actually, this is something that Francisco loves, because he gets to know lots of emerging artists that he can share with his friends.
“A big win for me is when I show a song to someone and they tell me they haven’t heard it before”
Francisco’s main Job-To-Be-Done (aka objectives) at the festival is:
WHEN I go to Indie Rock festivals I WANT TO discover emerging bands SO I CAN be updated and show it to my friends.
To be able to design a better experience for Francisco, I also created the objective for my research:
PART III: Coming up with ideas
After defining my objective, the next step was to come up with ideas that could be aligned with Francisco’s goals.
I started by analyzing the current brand of the festival and I realized it is very brand-oriented. Super Bock has a very strong positioning in Portugal and it sponsors other festivals, such as Super Bock Super Rock (SBSR), one of the biggest in Portugal. However, SBSR is for a different target compared to SBS but, the brands are highly similar.
I believe that SBS has a huge potential and has its own vibe and target, so I decided to work on the branding of the festival.
Look & Feel
I started by collecting some pictures of the festival to understand what people see and live there.
Based on several insights from the research, I defined 3 elements to take into consideration to design the new identity of the festival.
Hot and cold. SBS is a winter festival — it’s cold and rainy and people have to walk up and down the street to go from concert to concert. But when attending a concert, users are faced with a really hot environment, full of people and warm red lights.
Restricted. People that go to this festival are not mainstream (at all), so it is important to give them the feeling of being part of something exclusive.
Super Bock. Super Bock is the naming sponsor of the festival and uses this sponsorship to communicate with its audience, so I believe it would be extremely important to maintain the mood of the brand. Actually, Super Bock recently made a campaign to celebrate its 90 years of existence, and the mood of the campaign was… old Lisbon times, which goes perfectly along with the mood of the festival and with the baroque styles that are one of the strongest elements of the venues that are part of the festival.
After putting my mood board together, I conducted a Desirability Test with 5 people to understand if my ideas were effective. The main words I got went along with the message I wanted to pass:
UNDERGROUND / HIPSTER / EMOTIONAL / EMPOWERING / NIGHT / CLASSIC / ELITE
Features
Also, it was important to define the features that would allow me to achieve the objective I defined for Francisco: to help him collect unknown artists during the festival.
I did a brainstorming session with some people and I defined the features that would make his experience better before, during and after the event (you can see them in the videos below).
PART IV: Building it!
To build the website I started by organizing the structure of the website. I built a Sitemap and I conducted a Card Sorting experiment to make sure that it made sense and that was user-friendly. I also built the low-fidelity version of the website (for the experience after the event) and after some iterations, I build the high-fidelity version on Figma.
Before the event
- Before the event, Francisco can see the artists that are playing at the festival. Because he doesn’t know the majority of the artists and he doesn’t want to be completely lost during the festival, below each artist there is a Spotify song where he can quickly listen to one of the artist’s songs to check if it’s interesting or not and add an artist’s concert to his schedule.
- He can also check the venues that are part of the festival and he can see which artists play in each venue.
- Finally, he can buy the tickets directly on the website or see all the other stores in which he can buy the tickets.
During the event
- For this version, I decided to build the responsive version of the website, since he will surely not take his laptop to the concert.
- During the festival, he will have access to a new section: “Live Now”. In this section, he can see which artists are playing at the moment and the ones that are going to play next, so he can be prepared and go to a specific stage with enough time.
- He can filter this list by stages, which will help him in case it’s raining and he doesn’t want to walk too much or if he wants to know which artist is playing next in the venue he’s at.
- In case he’s at a concert and doesn’t know the artist that is playing, he can check for more information about him/her. And because many times Shazam is not able to recognize songs at concerts, there is a Spotify list that shows the songs that the artist is playing in real-time (but only releases songs when the artist starts playing to avoid spoiling the setlist)
After the event
- And finally, after the event, Francisco can vote for the most surprising artists. Also, he can see what artists were the most surprising and listen to their songs. This way, Francisco can easily and quickly catch up with the artists that are emerging.
Finally, here is my final presentation:
This was one of my favorite projects! I really enjoyed going through the whole process, having to understand the festival and its users, to understand their pains and expectations and to build something that could add value to their experience.
