An engaging, minimalist website that helps people find the festival that they will enjoy.
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.
UX design, UI design, Prototyping, Logo design
Research conducted in August 2019 - Sep 2019
Refined the design in
April 2020 - May 2020
Mobile website, Design system
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?
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?
These are the top four websites the user has visited before and will be used in the future.
The interviewees would use the website regardless of how it looked. The top one frustration was the 'filter settings'.
The filter settings are confusing.
Difficulty navigating the website.
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:
List 2-5 features of the festivals you can think of, please write these down.
Spend up to five mins to search for your features on these four websites.
Talk about your experiences as you go through the tasks on these websites.
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.
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?
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
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).
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
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
Music / genre
Refined filter sections based on the user research
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 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'.
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.
The flow of 'filter setup'
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.
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 of two tested prototypes
User feedback regarding these two prototypes:
Prototype shown above, left:
The users think it clearly shows what sections of the filter is being edited
The users think the setup is easy to follow
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:
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.
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.
🔸 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.
Each color has 8-10 shades to make sure I don’t have to compromise too much.
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.
The gutter remains 24px
The margins adapt in multiples of 8px
By adding and raising shadows to interactive elements, the user is provided with visual cues about how to use the system.
🔸 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.
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 & options display in desktop
Responsive layout of feature 'filter setting'
Set up a filter in mobile phone