Minimalistic and engaging website that helps people find the festival 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. Because we felt the filter set up took longer than we expected, so we didn't go through the list of recommendations (even it's not a very long list, but at that point, we felt very impatient ). In the end we dropped the idea of going to a summer festival altogether.
UX design, UI design, Prototyping, Logo design
August 2020 - October 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?
Festival-goers do research 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
These websites offer filters to make a short list of relevant festivals. It is better than 'festival recommendation' articles because the user can customise the result.
Problem: 'key feature' Filter settings frustrate the user
I conducted user interviews with six users of four popular festival search websites.
The interviewees comprised evenly of first-time festival goers and those who have been to festivals before.
The interviews were based on these four popular festival search websites
The interviewees would use the website regardless of how it looked. The most common frustration among them was the festival filter settings.
I condensed the responses into three points:
Filter is not well-defined: The user confused the meaning of the filter label
Lack of filters: Options didn't meet the user's expectations
Too many filters / choices inside filter: The user lost patience going through all the options
So it would seem that the websites either present too few or too many options. How can we accommodate the list of filters to suit many different users' expectations?
Solution: Optimise the filter categories
What I did to solve this problem:
1. Used filter terms that won't cause misunderstandings
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 naming of the filter.
2. Understood what filters the users were most and least interested in
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.
3. Categorised the filters into sections based on relevance
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 from the majority of the user.
Everyone wants to know
Some people want to know
What makes a festival unique
Accessibility, Camp, Accommodation, V.I.P.
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
Use cases: Music vs. Music & activities
From 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 line-up or specific artists)
For now, the primary user journey is designed for the people that want both music and activity (they are not following any particular artist).
The core functions of the website are clear: Setting up filters for the festival and getting a recommendation list. The light-blue box is the expected user flow.
The primary CTA is: Sign up/share with friend. The dark-blue box is when people want to sign up.
The personality of the brand is engaging, modern & clean.
Start with designing the 'key feature' Filter setting
The solution for the 'improve people's search experience for 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 search
Sketched on paper with titles to gain ideas of spacing
Selected and refined a few design options that would be worth developing further
Focus on visual hierarchy
I began exploring filter settings for features in greyscale to focus on the relationship between different elements in an interface. Then I enhanced the idea with colors.
Low-fidelity wireframes for mobile and desktop scale of 'filter settings'
Thoughts behind filter setting layout design
The design solution for the feature needs to fit with the following criteria:
Must be easy to skim the filters and options
Navigation around selected/unselected items should be seamless
By following these rules, we can better avoid draining the user's patience.
The final design ticks these requirements.
Filter & options display in desktop
Responsive layout of feature 'filter setting'
Set up a filter in mobile phone
Withe a design system, I keep the overall design language consistent and I limist 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.
Additional process pictures
In the following are a few more pictures to showcase my design explorations, wireframes, etc.
Explorations of feature 'filter settings'
Try out details to de-emphasise the filter section
Left panel with
Left panel separated
with line divider
Left panel sit directly
on white background