Microsite re-design: Finnish Hobbyhorse Championship 2020
Ironhack week 6 | individual project | 4 days
The project of week 6 in Ironhack is re-designing a microsite for a festival of our choice that will take place this year. The microsite I worked on is the 9th Annual Finnish Hobbyhorse Championship 2020. This is an event that takes place in June in Finland every year and it claims to be the biggest hobby horse event in the world.
The brief defines three stages of use of the microsite: pre-event, during the event and post-event. The website should include all the information for this year’s edition and links for the community.
The hobbyhorse phenomenon
Hobbyhorsing is a phenomenon that is getting big in Finland. It is practiced by girls between 10 and 20 years old mainly and they participate in jumping shows and dressage competitions. They also sew and decorate their horses. In Finland alone, there are about 10,000 riders that create a very inclusive community, online and at competitions.
Why these girls take hobby horsing so seriously?
As I didn’t have a way to contact directly with the end-user, I did a bit of online research and I found a lot of interviews and reportages that gave me good insights into the motivations that drive the hobbyhorse riders.
The main insights I found are that the users take this hobby very seriously, they don’t think it is a childish game. They join it because of the sense of belonging to a non-judgemental community, the do-it-yourself spirit and the lack of adults telling them what to do.
After reading how some of the girls have overcome personal issues or how they find their place to fit as a teenager it turns out that something that people can find very silly is actually connecting and empowering girls and teenagers.
The current website
The current English microsite of the 9th Annual Finnish Hobby horse Championship 2020 has all the content placed in just one screen with no hierarchy or organization.
Re-branding
After the online research, I started ideating a new brand for the site. I wanted the brand to be young, playful, carefree and friendly based on the end-user information that I compiled. Below there is the moodboard that conveys the look and feel of the re-branding.
As the name of the site is quite long and could be hard to remember (The 9th Annual Hobbyhorse Finnish Championship) I decided to narrow it down to “FHC” (standing for Finnish Hobbyhorse Championship) for the purpose of the logo. I added the full text and the year when the event is taking place right beside the acronym.
The logo reminds the idea of movement and taking over obstacles while jumping with the repetition of the letters overlapping to each other in different colors and giving a sense of direction and depth. This links directly to the jumping competitions that the hobbyhorse riders take part in and also to get over struggles that teens might face in real life. I used colors that feel imaginative, young and friendly.
Sitemap and low-fi prototype
After that, I organized all the information that was on the current microsite and distributed it into different sections. After that, I created a sitemap and drawn a quick sketch as a low-fi prototype.
I decided to have a simple scroll down microsite: the homepage will have the logo and the relevant information for the user like dates of the event, location and a short description.
When scrolling down there will be the rest of the pages with the corresponding links. For example, the tickets screen will have a link to an external website where the user can purchase them or the contacts will have links to send an email.
In the Championship section, there will be all the categories that the participants can sign up for. I organized those in drop-down menus as there is a lot of information in each category. This way the classes are not displayed all at once and there are a hierarchy and a grouping system in place that could facilitate the user to find the information more efficiently.
Hi-fi screens
After the low-fi prototypes, I have designed all the screens for desktop and mobile viewports with the Sketch software.
Desktop viewport
Mobile viewport
Interactive prototypes
I did within a day and a half the prototypes with micro-interactions in Principle for both hi-fi viewports, desktop and mobile. I animated the patterns on the screens and to do a parallax effect to accentuate the idea of playfulness and imagination.
The menu for desktop it sticks at the side of the screen and it moves up or down as the user navigates through the sections. This indicates the user where is in the microsite.
For the smartphone version, I have hidden the menu in a hamburger button so when the user presses it, the menu slides from the side.
Style guide
Below there is is a quick style guide that I put together for the presentation of the project in class. It allowed me to talk through some of the elements that were basic to develop the hi-fi that I presented.
Next steps and take away
My idea for the microsite is that before the event it would have a count of participants that are signing in, during the event the selling tickets option would be disabled and after the event, the winner’s classifications would be published.
The next steps for this project would be to test the hi-fi prototypes with users and iterate on the design and also to develop an iPad viewport and the style guide. I would like to test as well if the organization and the display of the information are easy to navigate.
My big take away for this week is around Principle: the more I use software and the further I try to go, the more I realize that I still have a lot to learn to control the movements and the interactions.
