This week we had to work individually to re-design an existing website of our choice. I chose the Belladrum Tartan Heart Festival; a music and arts festival that is held in Inverness, in Scotland.
The deliverables for this project were:
- A prototype of the website with micro-interactions
- Responsive web (minimum 2 breakpoints)
- Style Guide (including states)
The first step was to gather as much information on the festival as I could —due to the current pandemic, a lot of festivals have unfortunately been postponed and a lot of websites have limited or no information, just a message of cancellation. You can check their website here.
I was lucky to find quite a bit of information and images on the festival on other websites and through various articles and other sources. With the research, I could analyse the festival and its competition informing my decisions on how I wanted to brand the festival and its marketing direction.
Research findings
Belladrum festival offers a diversity of music and arts to various age groups and is known for its family-friendly atmosphere. This is all well and good, but I had to decide on how I wanted to define the brand and redesign the site — and for this I had to resolve a lot of potential contradictions. How do you market to everyone? How can you elicit family-friendly that doesn’t exclude young people?
I used the brand positioning map and a visual competitor analysis to help me place the brand in context with other Scottish and UK music and arts festivals and distinguish Belladrum from them. The research is, of course, not exhaustive but it helped me make informed decisions for the design.
As you can see above, I decided to move the brand toward a more commercial feel to separate it from smaller boutique festivals.
Target Audience
The research also informed my user personas which I defined to help guide me through the project.
I decided on a primary and secondary persona to address the diversity in age groups that Belladrum currently attracts.
My main target is young people with the secondary target being young families.
With my target market in mind I decided to further define the brand by writing down adjectives that currently describe Belladrum (based on the research I gathered), then adjectives that I felt they should define themselves as — and finally what I felt they should not have. This helped sort out what brand attributes I wanted to focus on; and what might send mixed messages to the target market.
I decided to define the brand attributes as: energetic, fun, and exciting because many of the other festivals I researched emphasise: wholesome, natural, boutique, homemade, eco etc and I wanted it to stand apart.
Branding
With my decision made on the direction I wanted to take the brand, I created a mood board to visualise my brand attributes and tested it to see if respondents got the brand attributes I wanted to convey.
I was happy that audiences understood: Fun, Energetic, Exciting, Happy as the top adjectives associated with my mood board, but I still had to translate this into a site design.
Next step was to create Style Tiles that were referenced from the Mood board. I also decided to re-design the logo to match my new design direction.
Learning from last week, I spent much less time on the style tiles, keeping in mind that they are only a tool that can be developed and not something that have to be perfected.
I also tested my style tiles, although in hindsight I feel this was unnecessary because, 1. There wasn’t much variation in my style tiles and 2. The feedback was too varied and subjective to really take any value from it. Ultimately I went with the one I had better instincts about.
Wireframes
Having my target audience defined made it easier for me to consider the user flows I would need to design the prototype. I wanted to show:
- User checking the artist lineup
- User checking how to get to the festival
From this I could map out the screens I needed to design, and created the mid-fi wireframes and prototype which helped identify any potential pain-points and smooth them out before creating the hi-fi screens.
I didn’t test the mid-fi prototype as I made a lot of changes as I went along — instead I tested my hi-fi prototype and based on that feedback iterated and iterated.
The hi-fis and prototyping took me the best part of the day — this time I opted for Figma and Figma prototyping because I was worried about how much time I was spending on Principle and honestly I don’t fully ‘get it’ yet.
Once I was confident I had something of an MVP in hifi, I started to iterate and make small adjustments which I tested as I went. I kept going back and forth on certain design decisions e.g. colour and pattern use throughout the site — but always got feedback when I got stuck or had too many options.
I defined the style guide and defined the micro-interactions as you can see above.
Desktop & Mobile Prototypes
Considerations
This project, more than any other so far, was about good time management. There were many ideas I could have followed, brand decisions I could have taken, different stages I could have tested and further tested — but the time budget meant I had to prioritise what was necessary.
I felt a bit defeated by prototyping the micro-interactions as Figma was my backup. I had been learning Principle and had clear ideas on which transitions I wanted — and how to do them e.g. I wanted the burger menu icon to morph into the close icon as the menu dropped (see below).
I could make the interactions in Principle on a small scale; but I couldn’t apply it to the hi-fi screens I’d designed in Figma, which was very frustrating.
I had to forget Principle altogether so the day I spent trying to prototype the whole thing on Principle was essentially wasted. Instead I returned to Figma for the prototype and all of the micro-interactions. In the end I was happy with the results and happy with using Figma.
With more time I’d like to figure out using Principle but for time sensitive projects Figma is the winner!