Creating a Curated Event Microsite
Siam Songkran Music Festival
The brief :
This week, I was challenged to create a new microsite for the 2020 edition of an existing event. The microsite should be responsive and include two different stages:
- A desktop version before the event
- A mobile version during the event
I chose the Siam Songkran Music Festival. Songkran is the New Year Festival in Thailand. In April, Thai people celebrate Songkran by visiting temples, watching parades, and participating in massive water fights.
It’s an awesome event! People share love, happiness, and good fortune. Everybody is having fun with friends and family.
When I went to Songkran, I was like a child having fun with water, while the sun and the smile of people warmed me.
This is the Siam Songkran Music Festival in Bangkok, April 2019:
Research :
For the 2020 edition, I wanted to push this happy mood on the new microsite.
I began doing a comparison between the current website and the most famous festival: Coachella.
I began by showing the current Songkran home page to five users and asking them what they liked and didn’t like about the site:
- All five users tried to stop the video playing on repeat in the background.
“ The video has a poor quality and it’s too hard on the background”
- All five users didn’t know about the festival, despite having traveled to Thailand.
“I didn’t know about this festival when I was in Thailand. If I knew about it I probably would have gone”
- All five users told me that the visuals (pictures, text, videos) are too big.
- Four users said that they liked the illustrations and the blue color.
- All five users said there are too many colors (blue, green, black, grey, gold, etc.).
Last point: the users said it would be nice to have some of the content on different pages because there isn’t enough space for all the elements to fit on one page.
Finally, I checked the code of the current website to check the referencing and I noticed that the alt text on pictures is either inadequate or doesn’t exist. This means that you can only go on the website if you know the name of this festival — if you Google “Thailand festival” you won’t find Songkran. So to be more famous in other countries, Siam’s website should have better referencing.
You can have a view of the current website :
As you can see, it is much different than the Coachella website.
The Coachella website is very clear, the background is pastel like the environment where it takes place, there are some illustrations, and the color and typeface are consistent. But most importantly, you can feel the mood that they provide.
If the goal of Siam is to be famous, they need to have a clear brand identity.
I created a mood board for the new website. I wanted to portray the happiness and environment of Thailand into it.
I recreated my mood board five times before I was satisfied. The hardest part was that I wanted to show too many different things. I found my inspiration in my memories, but also by looking through different websites like Dribbble.
Taking themes from my mood board, I created the Style Tile for the new microsite:
The process :
First I tried to understand what is the most important thing for users to have on the website. For that, I asked them to do a card sorting exercise to create the sitemap.
Next, I created Mid-Fi wireframes for the mobile site because the microsite should be responsive.
To create a responsive website we need to design for the smallest size first and then for bigger size devices.
Colors please :
After testing, users said that there were no major problems so I proceeded to create the Hi-Fi prototype for the desktop version:
As you can see, the content has been separated into multiple pages to have better referencing with the Googlebots. The activities and artist lists are available but further information such as the times and days that they perform are hidden on the main site.
I then prototyped and animated my Hi-Fi mobile version:
During the festival, the schedule for all shows and activities is available. The user can see where each activity is and at what time it is held.
Next steps :
As always, I wish I had time for more tests and iterations:
On the mobile version, I want to add the possibility for the user to personalize his own schedule: he picks his favorites artists and activities and creates a downloadable calendar of events as a PDF, just in case he doesn’t have data during the event.
Also, I want to allow the user to filter the artist list by musical genre and make some changes on the animations.
Thank you for reading :) !
