Festival Finder

Minimalistic and engaging website that helps people find the festival 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. 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.

My Role

UX design, UI design, Prototyping, Logo design

Time

August 2020 - October 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?

01 Insights

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.

Screenshot 2020-09-07 at 17.34.06.png

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?

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

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.

line.png

The basics

 

Location, Time,

Price, Age

Everyone wants to know

Some people want to know

What makes a festival unique

The entertainment

 

Activity,

Music/Genre

Additionals

 

Accessibility, Camp, Accommodation, V.I.P.

02 Definition 

 

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 personas

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). 

Information Architecture

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. 

Information architecture.png

Information architecture

 

03 Design 

Brand attributes

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

paper-sketch.png

Sketched on paper with titles to gain ideas of spacing

Low-fidelity Sketch.png

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.

Wireframe in greyscale.png

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

     Responsive layout

By following these rules, we can better avoid draining the user's patience. 

The final design ticks these requirements.

Filter setup
details.png

Filter & options display in desktop

Responsive layout of feature 'filter setting' 

Set up a filter in mobile phone

Design system 

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. 

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

Additional process pictures

In the following are a few more pictures to showcase my design explorations, wireframes, etc.

wireframes.png
Screenshot 2020-09-17 at 11.47.15.png

Low-fidelity wireframes

explore filter setting1.png
explore filter setting2.png
explore filter setting3.png
explore filter setting4.png

Explorations of feature 'filter settings'

 Try out details to de-emphasise the filter section

3 different design:de-emphasis.png

Left panel with 

white background

Left panel separated

with line divider

Left panel sit directly

on white background

Other projects
'RE-': UX/UI design for a sustainable lifestyle app