Case study: UI design for a music event
Ironhack Bootcamp Project 5 — Event micro-site
After two months studying UX design, it’s time for me to discover an other part of the user experience: UI design.
Brief
For this new project, I had to design an event micro-site promoting an event of my choice. This micro-site had to be a landing page declined for each moment of the event: before, during and after.
I have chosen to work on a design proposal for the last music event I attended before the pandemic started: Francofolies de La Réunion.
The subject
Francofolies de La Réunion is a music event that exists since 2017 and takes place every years in March at Reunion Island, a French island located in the middle of the Indian Ocean next to Mauritius. The event is linked to Francofolies de La Rochelle, a major French music festival become an institution in France and abroad. Belgium and Canada have their own Francofolies too.
In Reunion Island, it’s one of the biggest cultural events of the year. People living at each corner of the island come to applause famous artists during several days. It’s a big party gathering a young and trendy audience.
UX objective
My mission as a UX designer was to provide the right information to festivalgoers.
The landing page « before » had to give details on the planned artists, the schedule and allow them to quickly book tickets.
The landing page « during » had to give details on the schedule for each stage and gather all the practical informations such as camping, shuttle buses, parking lot and weather forecast.
The landing page « after » had to gather all the event souvenirs such as photos and videos.
Visual Research
Competitors
Before beginning the UI part, I conducted a benchmark to see what choices did my competitors to built their website’s UI.
I focused my benchmark on two direct competitors (Francofolies de La Rochelle et Francofolies de Montréal) and two indirects competitors (Musilac and Le Printemps de Bourges).
Their websites have a lot in common. They use a lot of colors in a harmonious way. Except Musilac, they play on graphic forms and contrasts with flats of colors. An important place is given to photos. Buttons are flat and colored. Typefaces are all sans serif and bring modernity to the pages.
To build my visual universe, I decided to follow the model of competitors. The Francofolies de La Réunion are a young festival that needs to gain fame in order to gain momentum. Its website must reflect the qualitative side of the « francofolies » label but also be attractive. The festive dimension is important to take into consideration.
Brand identity
Before starting to look for visual inspirations, I defined the brand attributes of the event conveyed by his logo.
It inspired me three adjectives I had to keep in mind : « happy », « festive » and « qualitative ». The adjective « subversive » was the one I should not represent through my work.
Since the logo is existing I didn’t need to create one but I had to make it fit into my design.
Moodboard
To build my moodboard, I started to gather some photos of the event. The Francofolies de La Réunion start at sunset and stand by the ocean. These two particularities give a very special atmosphere to the event. I kept it in mind and I looked for illustrations of sunset with warm and vivid colors. It inspired my first colors palet. I wanted to use bright colors on a white background to create contrast.
About typefaces, I wanted sans serif typefaces bold and condensed in uppercase letters to use it as titles or on buttons.
I founded layouts alternating text and color areas. I liked the idea to use a staggered layout to create contrasts and vary the rhythms.
Style tile
The style tile is articulated around the four adjectives « colorful », « modern », « welcoming » and « warm ».
For the logo, I chose an illustration of an island and I colored it with pink, purple and orange to give the impression of a sunset. I declined these colors on the other elements of my design.
My aim was to play with colors and contrast to create a dynamic and attractive set.
Prototype
Before
During
After
Each landing page is built along the same model: header, hero, first section with primary content, second section with secondary content and footer.
The user can retrieve the essential informations first. His eyes are attracted by it because they take all the page width. Secondary informations are lower using a staggered layout to give rythme and break with the first section.
The content of the different sections of the page varies depending on the temporality as I explained above.
Desirability testing
To be sure my choices were consistent with user perception, I conducted a desirability testing. I proposed to the user a list of adjectives and he had to choose the ones that corresponded to the design based on his feeling.
The adjectives I would have liked to find were « joyful », « festive », « colorful », « welcoming » and « modern ». At the end of my test, « festive » and « joyful » weren’t chosen at all. It was very problematic.
I understood I didn’t choose the right colors: my design was to dark. I revised my colors palet to change this feeling.
What I learnt
Even if the aim of this first UI design challenge was to sharpen our creativity, I learnt it is very important not to forget the user. We don’t design for ourselves. Layout and color choices are very subjectives but tests are the good way to place the user back at the center of the design.
I really enjoyed this new project and I’m proud of the result.
