Category: Project 2

After doing different user tests, site maps, and a heuristic markup of the Boardmasters website, I created a synthesis chart to list out in final detail how all of the different areas mentioned in the User Behaviour tests could join together to possibly become one larger problem that could be solved.

Initial Ideas

For example, a lot of users mentioned the negative space surrounding the webpage, and as a result, it felt boring and bland. This means that if the webpages structure improved as a whole, there would be no need for the blank space, as shown in the research on cream fields ,(https://miro.com/app/board/uXjVNfSA41M=/moveToWidget=3458764566657652161&cot=14) suggests.

Above is some of the initial sketches I did into concepts I pulled from the synthesis chart. With this, the main things that I wanted to look into was planning the Gallery to be a bit more playful, but keeping it professional looking to show off the beautiful images, as well as the most important feature, the creation of a method for error tolerance, as the user needs to be able to successfully book tickets without having to leave the webpage completely to return home.

Design System

This was what I chose to focus my redesign on, the ability to prebook a ticket effectively with the user being able to return to the home page when done. I wanted to make sure I included all of the design system used by Boardmasters to make it feel more colourful and less of just a blank space, which was commented on by my users, and so to do this, I began by making a board based on the design system.

Found on the Miro board : https://miro.com/app/board/uXjVNbWB2lE=/?moveToWidget=3458764568814375381&cot=14 , this was a simple pull together of all of the components used by Boardmasters, as a way to help me understand how they lay out their design, so that it correlates, something that is a part of the 10 heuristics of design. Without a corrolating backdrop, or colour scheme, the design would not flow, and it could confuse a user, especially if the final design is a separate page.

This was something else I looked at. Could this be a pop up? Would this help the user understand the idea and be able to click off at any given moment? This was something I was to look at later in my wireframes.

Existing Websites

Using all of this information, I gathered three other websites that I could analyse, all of which have similar themes (two being festivals and one being a music event), that could be used to help design idea generation and add creative flare to the ideas I already have.

I thought about things that were said by the users during user tests in order to help me understand why certain things were useful in websites. For example, on the ‘Five talks motion’ website, there is a lot of movements, which creates depth, which could be linked to commentary about how some of the users couldn’t understand what Boardmasters actually was – however, for a festival about movement and motion, the depth of this movement was perfect! This could also be a negative thing however, as there was a large focus on the video on this webpage, something the users confirmed they would never usually pay attention to.

After my research into these websites, pulling different things that I both liked and disliked, I was able to collate all of my research in order to present my Synthesis.

Miro Board Link : https://miro.com/app/board/uXjVNfSA41M=/?moveToWidget=3458764566657652161&cot=14

Synthesis

I am very aware that this section in particular is overly worded and a lot to look at, but having done a few UI/UX projects before, I always found this method really helpful when it came to looking at where the exact problems were, so correlating my ideas, then speculating methods of solving them. One reason this helps is because things always interlay. So one problem may be caused by another, and by solving one, you solve a group. A synthesis ‘chart’ helps me to therefore link these and find a root cause to solve based on my research. Below is my chart, where I looked into elements the users wanted solved, and how best to do so. It helped me focus my idea on one flow, or more specific elements.

Within my redesign of the website, I knew I needed to include different areas of the festival experience that felt left out amongst others. There was a clear idea of the colour schemes being based around the sun, sand, and sea, and yet, people were confused about the festival being both a surf competition, and having musical artists perform.

Micro animations, I felt, was a good way of expressing these ideas, by using small movements to represent different things. In my initial ideas, I looked at the sun, and the idea of it being a loading bar, or waves and how they could move across the page when a section is highlighted. Even though I knew I may not use this is the final wireframe, it was fun to look at different ways of being able to use smart animations!

These can be found here : https://miro.com/app/board/uXjVNbWB2lE=/?moveToWidget=3458764566885013893&cot=14

Testing

From here, I tested different ideas in Figma, some of which worked out well, and others didn’t work at all! It was through these tests though, that I developed my skills in Micro-animating in Figma.

Above are some of the animations I tested, from loading bars, to hover states on navigation bars. It was, however, in looking at the moving sound bars that I had the idea that I hoped to carry through onto the website.

Loading bar

The user struggled to connect the idea of both music and surfing, the two main reasons any festival goer would attend Boardmasters. To help achieve this connection, I wanted to use different things people thought about music, and about surfing, that joint the two. During initial idea generation, a few notable ideas were of movement, energy, and waves.

I thus, decided to look into beat waves as a loading bar form, and possibly to be used throughout the rest of the webpage – as the movement of a beat mimics the wave movement, creating the connection.

I thought about the way that the beats could move both up and down, as well as what beat to use. Boardmasters doesn’t have a soundtrack or a specific song connected with it, so at first, I struggled to find a beat to use.

Boardmasters does, on the other hand, have a promotional video, that users commented on not neccessarily caring for when large and a key focus on the websites landing page, and probably only clicking on it when shared with them, or promoted to do so. This felt like a waste of space, and so I had the idea to use it as a pop up. By using the sound of the promotional video, there was the opportunity to provide a link for it, all whilst promoting ideas of the surf competition and the artists performing.

The promotional video had 3 different layers of sound as well. The music, the waves, and the sound of people enjoying both. These 3 things felt really important, and could join together to create a beautiful and meaningful Micro-animation.

By the end of the process, I had created 3 different component sets in order to provide the user with a loading bar that offers not only a signifier of their waiting time, but also a message of music and ‘vibes.’

Along the way, I did stumble at a few different things. The notable ones were small mistakes that could easily be fixed, but did take me a while to comprehend, as such small changes were not always on my mind as the biggest problems. Below is one of them, as I tried to use two different names to flow a component, meaning that Smart Animate didn’t understand that it needed to animate between the two points.

This process really helped me develop my skills in Figma, and defiantly made me more confident to move further within my designs!

Navigation Bar

I then attempted to use the same theme to create a fun navigation bar – however, upon finishing my first design, including a hover state and a clicked state, it did not look very professional or well put together on the webpage itself.

It took me a while of generating more initial ideas to come up with the idea to use the Boardmasters logo font as inspiration for the shapes in the Navigation Waffle/Hamburger. I wanted to make it look sophisticated and clean, whilst maintaining some sort of hover state micro-animation and movement to emphasise the users journey.

Sponsors

The sponsors section was one part of the webpage that was really poor when it came to layout, styling and just overall excess of negative space. I decided I wanted to use a carousel system for the showcase of the brands, and to do this, created a separate component so that I could reuse the system throughout the webpage.

This was not all used in the final version of my prototype, and when I had used all of them, I accidentally deleted them without realising I could have handed them in on a ‘sandbox,’ page – rookie error there.