Festival Finder

An engaging, minimalist website that helps people find the festival that they will enjoy. 

hero image.png

Intro

My friend and I were planning to go to a summer festival last year, but picking the right one to go to was a frustrating process. We had trouble filtering our preferences and the search took longer than we expected and so we didn't go through the full list of recommendations. In the end we dropped the idea of going to a summer festival altogether.

My Role

UX design, UI design, Prototyping, Logo design

Time

Research conducted in August 2019 - Sep 2019

Refined the design in

April 2020 - May 2020

Deliverables

Mobile website, Design system

Challenge

With so many festivals to choose from, how can we make it easier for the customer to identify and choose the right festival for them?

Research

The user's habit in general and

why the product has value

🔸 Festival-goers do research online before they commit 

 

As an alternative to holidays, festivals normally take at least half a day so people want to know that they commit their time and energy to the right thing.

People rely strongly on online information to determine which festival they will go to. Especially for first-time festival-goers, they compare their options and read reviews.

🔸 Festivals are highly varied, yet quite similar at a glance

People have more choices due to the rapid expansion in the festival industry. But too many choices confuses people.

Festival search websites help the user know the difference, they offer filters to make a shortlist of relevant festivals. It is better than 'festival recommendation' articles because the user can customise the result.

User research &  Competitive Studies

The searching experience frustrates the users

I conducted an online survey with 10 people, I wanted to find out:

1. Why do people who are actively searching for a festival to go end up not going?

(Provided they have both the money and the time.)

2. What are people struggling with when they use the festival search websites?

3. How can the website help the user find the right festivals easier?

🔸 Survey

 

These are the top four websites the user has visited before and will be used in the future.

 

 

Screenshot 2020-09-07 at 17.34.06.png
Screenshot 2020-09-07 at 17.34.06.png
Survey.png

The interviewees would use the website regardless of how it looked. The top one frustration was the 'filter settings'.

1.png
2.png

The filter settings are confusing.

Difficulty navigating the website.

3.png

The information about the festival is too little. 

🔸 User interview & competitive analysis

With this project, I decided to focus on improving the searching experience. I interviewed four interviewees and showed them four websites, pictured above.

Goal: Understand what makes the filter cause the user to get frustrated

The task I conducted in the interview follows this structure:

  1. List 2-5 features of the festivals you can think of, please write these down.

  2. Spend up to five mins to search for your features on these four websites. 

  3. Talk about your experiences as you go through the tasks on these websites.

  4. What difficulties have you experienced during the search?

The users' feedback could then be condensed into the following observations:   

     

           Too many or too few options: Search options didn't meet the user's expectations.

         

          The user had trouble forming a clear picture of their selection: It proved difficult to reach the filtered selection in a short amount of time while making adjustments on the way.

          The filter was not well-defined: The user ended up misinterpreting the meaning of some filter labels, causing a mismatch with their preferences.

 🔸 The importance of the filters doesn't match user expectations  

 

From the user research, it seems that the search experience didn't satisfy the user because they had different preferences, which could suggest that filtering is only suitable for some types of users and not for others.

Untitled-1_edited.png
Untitled-1%20copy_edited.png
Untitled-1%20copy%202_edited.png

Reframing the problem

Unique problem statement

The findings above have led me to the following problem statement:

How can we accommodate the list of filters to suit different user's expectations?

Define

Persona

I created personas based on reports that the majority of festival-goers fit within the following criteria:

• Middle class

• The young and middle-aged

• 59% of people go as a couple or are in a relationship

Persona_haven't check English.png

Primary persona (right) & secondary persona (left)

Use cases: Music & activities vs. Music-oriented

Based on the research, I have categorised the user as one of two types:

Music & activity-oriented (they want the whole experience)

• Music enthusiast (their interests are in the line-up or specific artists)

For now, the primary user journey is for the people that want both music and activity (they are not following any particular artist). 

Ideate

Optimising the filter category and process 

To help the user go through the filter settings in a more customised and efficient way, the design of

the search experience from the user perspective can be grouped into two aspects: filter category

and process.

 

For this phase, I have conducted another round of user research with three interviewees. 

 ​

 🔸 Filter category

  • Trial with different filter terms that won't cause misunderstandings - (Method: user research)​

After analysing the filter terms used on existing festival search websites, I formed a list and asked the interviewees if any of the filter names confuse them. The responses helped me refine the wording further.

  • Analysed what filters the users were most and least interested in(Method: Survey)​

This helped me make sure that the filter categories covered most of the topics that the user was interested in. This was to avoid the situation where popular filters would be missing.

  • Categorised the filters into sections based on relevance (Method: Card sorting)​

I formed a list of filter categories from competitive analysis and asked the user to place these filters within the below three sections. The image below shows the result formed by the majority of the user.​

​Below shows the recategorised filter and it is a new structure of the filter section.

Everyone wants to know

Some people want to know

What makes a festival unique

The basics

Location

Time

Price 

Age

The entertainment

Activity

Music / genre

Additionals

Accessibility

Accommodation

Camp

V.I.P.

Refined filter sections based on the user research

🔸  Process

The process should give the user ability to achieve the following:

  • Navigating the filters should be easy: The user should have access to all the filters and be able to switch back and forth as they see fit.

  • It should be easy to skip a filtered item: Unrelated or uninteresiting filter should be easy to skip or dismiss from view.​

  • Gaining an overview should be seamless: We want the user to feel empowered when navigating between different filters, quickly and easily able to modify on the go.

Design

Design a festivals search website

🔸  Project goals

I always aim to simulate my hypothetical project closer to the real project, so I setup a few objectives before I diving into the design phase.

  • The personality of the brand is: Engaging, modern & clean

  • Design a responsive mobile website​ for people to search for festivals

  • Create a design system

  • The user can build an overview of their setup and modify the filter easily

  • The user can skip a filter setup and reset the search easily.

🔸  Information architecture

The core functions of the website are clear: Setting up filters for the festival and getting a recommendation list.

The main focus of the design during this project is around the 'filter setup', the primary CTA button here is 'See results'.

FF-IA final.png

This project focused on a design solution for the filter setup

🔸  Start with designing the landing page of filter setup

The solution for the 'improve people's search experience for the festival' is mainly aligned with 'filter settings'. Considering it is the core feature of the website, so I started designing for a mobile-scale version in greyscale to focus on the layout. 

The interface will need:

• Page title/navigation heading

• Description of the title

• 3 filter sections

• Each section has 2-4 categories

• A button to execute the search

🔸  User flow

Below shows the user flow of the task of 'filter setup'. The destination of this task is to generate a recommendation list of the festivals.

User flow.png

The flow of 'filter setup'

Design

Design layout for responsive mobile website

🔸  Design mobile layout first, but website layout weigh heavy on the final decision

 

From the user research, 8 out of 10 users tend to use the website to search for the festival, 6 out of 10 said they will use mobile to search for detailed information about festivals.

 

Considering more users like to use the website to search, so I decided to keep the idea of designing the mobile layout first for an easy scale-out afterwards, but designing the website layout very close to spontaneously to decide on which design is better.

Low-fidelity Sketch.png

Selected and refined a few design options that would be worth developing further 

Design & user testing

A/B testing for the increment of CTA button click 

🔸  The goal of user testing: Decrease customer's effort scores and increase the CTA button click-through rate. The CTA button is 'see result'.

 

I have translated the design opportunities reflected by the user's pain points in the previous research and made two prototypes to test. 

Due to the time constraints for this project, I chose to test which layout provides a better searching experience with four interviewees and split them equally to test two prototypes, I used these as the success metrics:

 

  • Easy to navigate: Quick to edit, skip and move around the filters

  • Gain overview: Understand which filter has been edited, which has not. And also identify the option they have chosen for the filter.

  • Take little clicks as possible: The user can get setup quickly and clearly with minimal clicks.

Screenshot%202021-04-16%20at%2016.08_edi
Screenshot 2021-04-16 at 16.07.33.png

Screenshot of two tested prototypes

User feedback regarding these two prototypes:

Prototype shown above, left:

Good

  • The users think it clearly shows what sections of the filter is being edited

  • The users think the setup is easy to follow

Bad

  • One user tested on a smaller screen, which  required him to scroll to see the whole list of filter options in one category. Made for a poor overview and navigateability.

  • The user had to move from the top to the left, then to the right to switch the filter categories. It requires a few extra clicks to go through.

Prototype shown above, right:

Good

  • The users found that it didn't require much energy to go through the filters due to the zigzag, linear interaction pattern.

  • The users thought it was easier to establish an overview of the resulting filter setup.

Bad

  • One user mentioned that the page created a feeling of uncertainty upon first glance, because she didn't know how many filter sections there would be.

After analysing the pros and cons of the two prototypes, I concluded that the design on the right side is more likely to see higher click-through rate for the CTA 'See results'.

What I learned...

🔸 The difficulty: Hard to find enough testing participants to create meaningful data for analysis

I was planning to do proper A/B testing, but I couldn't gather enough people to test the prototype with and ended up with very little data to analyse. I had to compromise the process into usability testing and make decisions based on the assumptions I made after analysing the users' feedback.

🔸 What didn't go as planned: The user clicked the CTA button regardless of setup. 

Having followed the A/B testing procedure, instead of gathering the inbounding traffic data, I used the interviewees' responses. During my analysis, I realised it is not objective to learn which design will lead more CTA clicks because the user will finish the filter setup regardless. Four interviewees' feedback could perhaps be representative of the user experience, but it is not enough for making a data-based, evidence-based decision.

🔸 What I learned: Limited user testing is still better than no testing at all

Even though I didn't get to do A/B testing, at least I made the design decision based on the user feedback instead of my personal preference.

Final design

Solution display

🔸 Design system

With a design system, I keep the overall design language consistent and I limited the amount of time I spend making minor decisions about how to present elements. 

Color

Each color has 8-10 shades to make sure I don’t have to compromise too much.

Color + type scale.png

Type scale

 

Based on ‘The major third’ modular scaling method, I round out the font sizing manually to avoid fractional values.


I also hand-picked a few more font sizes to avoid the sense of limitation.

Color + type scale.png

Grid

 

The gutter remains 24px

The margins adapt in multiples of 8px

Grid2.png
Screenshot 2020-09-18 at 17.03.09.png
Depth

By adding and raising shadows to interactive elements, the user is provided with visual cues about how to use the system.

depth1.png
Design System.png

🔸 Example of the detail adjustment for the final design

Below I present a series tryouts to de-emphasise the filter section. The reason I chose the design on the right side was that I wanted the user to focus more on the filter options setup. Meanwhile, I also wanted to retain a good visual balance. 

3 different design:de-emphasis.png

The left panel with white background:

The filter category and the filter options share the same emphasis

The left panel with line divider:

The visual balance is slightly off

The left panel sits directly on white background: Emphasis more on the filter options

🔸 Responsive design

Below I present the final design of the project.

Filter setup
details.png

Filter & options display in desktop

Responsive layout of feature 'filter setting' 

Set up a filter in mobile phone

Other projects