Hanley Whelpton

When User testing, there are a list of things that should and shouldn’t be done within the tests. These could include prompting the user towards a certain answer, or showing them how to do something. The usability test should make sure that there is an honest reaction toward what is happening.

Within these tests, there are two different forms of information gathered:

User Profiles

In order to do this, I gathered a group of 5 users, people that I believe would have the intent to use the website, simply viewing it or purchasing tickets for the event.

I split these up into two different groups, 3 of those are users who have never been to a festival before, but would be interested in going, and 2 of whom have been to festivals and so understand the event to a greater depth, as well as having an understanding of how tickets are purchased. All of the group have used the internet to purchase some form of ticket for an event.

Using a script as stated below, I guided the users through a few different journeys and asked them to comment on what they felt and saw, collecting Qualative data, whilst screen recording in order to present some Quantitive data.

Script

Hello User Name

You probably have a good idea as to what you are about to take part in, but I will run through it anyway in order to clarify any details for you. The first thing I would like to make clear is that we are testing the site and not you, and that this is most likely the one thing you will do today that is never going to be wrong. We welcome any mistakes made, and ask that you voice your opinion on them whilst moving through the website in order to help us understand your thought process better.

Please ask any questions as we go along. Even though I may not be able to answer them, I will try to guide you where I can. As you go through the website, please tell me what you see, what you are doing and how you feel about it as a whole – and please be honest!

This session is being screen recorded as well as voice recorded, but no one will be bale to see you or me, and all that will be used is me asking the questions, you answering, and where the mouse is going on the screen. This is just for accuracy and helps us out greatly.

So, have you ever been to a festival?

If yes > And did you purchase those tickets online?

If yes > How was that experience?

And when you go to purchase any tickets for any event, do you do this via other websites such as Fatsoma or from the seller?

Would you please begin by signing up to the ticket presale for me?

Feel free to put in a random email/phone number.

Please leave this page and go back to the home page.

And scroll down slightly for me please. Would you usually watch the promotional video on a webpage?

Please find the sponsors of the event.

Can you find the photographs for me?

What do you think about this page?

If I asked you what you thought about this festival, what you think its focus is and what you would expect upon arriving there, what would you say?

Results

From the recordings I gathered, I gained a strong overall opinion of different aspects of the website. It was using this that I then created flow charts in order to note the different pain points along the journey. Whilst most of what I thought from my heuristic markup came up, some parts didn’t, and some comments I made about what I didn’t like personally, a lot of the users stated as values to the website. this only proved further to me how important user testing is.

After mapping out the pros and cons stated by different users, I was able to begin my further research.

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

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.