The goal of this project was to create a responsive website and corresponding campaign for a music festival.
For this project, it was important to establish a consistent visual identity that carried through every element of design from the wristbands to the ticket purchase on the website.
The foundation of the design utilized some UX design but is mostly focused on the UI elements to showcase my more visual skills.
Music festivals all over the world have soared in popularity over the last decade, indicating a global appetite for unique experiences in the music industry. According to Pollstar, 2017’s top 100 tours yielded a record breaking $5.65 billion in revenue and nearly 16% increase over 2016. With a vast range of festivals offering genre diversity, they require more than just booking top-tier talent.
Music fanatics have raised their expectations to find more innovative experiences whether through art, food, atmosphere and/or culture. Regardless of trending artists booked, developing a sustainable brand “experience” in conjunction with digital marketing strategies are key to a festival’s survival. Festival branding must adapt across a vast range, from large-scale stage visuals / wayfinding, to digital ticketing systems and of course online promotion and content.
However, branding a festival goes beyond creating a logo, a colour palette and a collection of photography — it’s about creating a holistic identity built around more abstract and experiential concepts. In this rapidly shifting landscape, designers and festival directors not only need to learn how to appeal to today’s festival goers but also pave their own trends, styles and conventions of experiential design. The digital era has only upped the ante on this competitive and high stakes industry. (Red Academy Brief)
Target Persona
When developing the target persona for my music festival I didn't want to copy the typical music festival persona. The typical music festival persona is young adults that want to drink and listen to their favourite top 40 bangers.
For this music festival, I created a target persona with a goal to find a music festival that has more to offer than just partying and art. I hoped that this would, later on, strengthen my competitive advantage over direct music festival competitors.
Competitors
The main or direct competitors would be other music festivals, which in essence provide a potential user with an alternative to attending my music festival, may it be location, time of year, or preferred genre of music. I have selected Sasquatch music festival, Tall Tree festival, FVDED in the Park, Capitol Hill Block Party, Bumbershoot, and Rifflandia as direct competitors because of their genre of music and location.
The secondary or indirect competitors are a little bit more tricky to determine and this can usually be the case with indirect competition. indirect competition is any other source of entertainment or activity my potential user could go to instead of my music festival. These are generally more location specific. I have selected the Gorge in Seattle as my location, which I will go into more details about later. the indirect competition here would be the Museum of Pop Culture, Pike Place Market, other local concerts, local bars, sports games and or, Seattle Harbour Cruises.
I started creating my mood boards as I was researching. Usually, with my process, I develop a specific mood board after the design inception. This allows me to incorporate inspiration and specific attributes into the visual design from the design inception. This time my mood boards were put together based on competitive research. I wanted to create a festival that hadn't been done before and applied some type of further learning.
My first design direction is titled Ancient Future.
I wanted to create a design that combined Greek and Roman sculptures with new era digital. The contrasting art forms create a unique visual commentary on what is considered art.
The second design direction is titled Retro Future.
For this design, I wanted to play off of the nostalgia of space exploration in the 60’s and 70's.
I chose to go with the Retro Future design direction. I wanted to create, in essence, a thoughtfully curated and designed music festival that transports attendees to the outer reaches of the known and unknown universe by combining aspects of nostalgia, myth, and fact — creating a communal experience of wonder and discovery.
I wanted to create a strong visual brand identity for the responsive website that was an engaging, impactful and well-designed experience for the users but still optimized to meet business goals.
Combining the findings from all the research categories allowed me to create a design inception that is based on facts and not just aesthetics and personal preference. I also wanted to make sure that the design stood out against other music festival competitors. The purpose and aesthetic of the music festival should be at the core of the design I didn't want to create something that just looked like it had a theme.
Why
“To create a unique, musical experience through an outer-worldly environment”
When constructing the why I had to ask myself how I could purposefully design to meet the user needs. To create something that was more than just the average music festival.
Mood
I established the mood of the design as being experiential, inclusive, and thought-provoking. I wanted the festival to encourage exploration of knowledge, music, and understanding while still remaining fun and enjoyable.
Colour
This was the first project where I used a large variant of colours vs a precise selection of three or four. With colour, I focused more on feeling and relation then specific colours. The feeling I wanted the colours to emit were retro and vintage space. I researched a lot of posters from the 60’s and 70’s and pulled my colour palette from there.
Movement
I wanted the movement of the design to feel smooth as if you were floating through space.
Shape
The shape takes cues from the nostalgia of retro space art. The comic flat design allows for limitless imagination on what can be designed. Illustrating all the content also allows for a sense of mystery. The users don't get to experience the true visuals the festival until they arrive on the first day.
Space
The space should feel connected and tethered. I wanted to create structure thought the shape design by having some aspect of the website tied down to contrast the floating and smooth movement, like an astronauts tether.
I wanted Galactica Music Festival to embody the notions of discovery, exploration, and the unknown. It is an independent international exhibition of music, art, education, and community. As a festival, it will stand as a distinguished platform for North American artists and a destination for innovative international talent.
Space and all its wonder is the essential element of the Galactica experience. The unique festival site is thoughtfully curated and designed to transport attendees to the outer reaches of the known and unknown universe by combining aspects of nostalgia, myth, and fact — creating a communal experience of wonder and discovery.
Galactica would pride itself in being an inclusive gathering that brings together people from diverse backgrounds and inspires them to participate to the fullest.
Location
For the location of the festival, I looked for a place that could resemble a barren planet and felt extraterrestrial. I decided on the Gorge in Seattle Washington. There are many other music festivals located here making it a good venue as the infrastructure is already there.
Venue Design
The core design of the festival is created as a galaxy. Each is stage designed as its own planet and offers a unique experience both visually and audibly. The four planets each have their own element associated with them; fire, water, sand, ice, and jungle. Corresponding relatable names have been given to each planet to create a sense of nostalgia and excitement about actually visiting those planets.
For example, Pandora the jungle planet from Avatar offers a unique stage design and set list relating to the aesthetics of the planet.
At the core of all the stages is the location of the Space Center. Its gravitational pull keeps the surrounding planets in perfect balance and acts as a communal and interactive space for attendees to take their Galactica experience to another heightened level. Stationed here are engaging demonstrations, commissioned artworks, interactive forums, star tours, and much more — all produced in collaboration with Education Partners, SpaceX, NASA, and CERN.
I wanted to use this sense of exploration and discovery as a competitive advantage over other music festivals. This would satisfy my target person’s want for something more than just partying and music. At this festival, they would be able to learn something and experience more as well as enjoy the music.
Colour and Texture
For the background of the website I decided you use a dark grey to represent space instead of a black. I felt this gave me room to play with different levels of dark colours that make the background interesting but don't overpower the website content.
The background also contains vintage comic book cutouts in a darker grey that create depth and interest, but aren’t distracting. As you scroll down the home page I have created an epic space battle in the background that subtly draws the users vision down the page.
Also in the background are the lighter grey distance lines, like on maps. I linked floating aspects of the page to the margins to give a sense of purpose and structure. These lines carry on throughout the website and give a sense of retro computer graphics.
When studying vintage posters I realised how important texture is. For the texture of my site, I decided to just simply use tight vertical lines. This design aspect can be seen used everywhere from posters to maps.
I created art elements, using Illustrator, for each planet that I was able to pull aspects from to use as elements for the website giving the design a cohesive feeling.
Initially, my designs felt too modern and flat and didn’t have that retro feeling I was trying to establish. Below you can see how I adapted the image and changed elements to at that retro feeling from my research.
Images and Buttons
For the images and buttons, I chose to use rounded edges. All of the images have one rounded corner in the top left. This design element all so carries over to the tickets as well. I saw this design featured in my research and felt it strengthened the retro design I was trying to achieve.
The buttons all have a rounded pill shape so they are distinctive. Thanks to the dark background the vintage colour range pops and draws the eye right away to certain aspects of the pages. I decided to always the same contrasting orange for CRT buttons so users could recognize that colour as an action colour and not get lost in all the other colours.
Typography
This project I really focused on type pairing to create a retro space feel. There are three different typefaces that I used.
Starting with the headings I combined two different typefaces. Since the overlying theme of the website is “explore” I added a darkened explore to every one of the headings using the same grey as the background space scenes. For this, I used the typeface Signpainter. The cursive nature of Signpainter creates a retro feeling of when calligraphy was so prominent in 60’s and 70’s poster art.
The second part of the heading vastly contrasts the curved lines of Signpainter. Sitting just below and offset to the right I used Lightyear. This sanserif rounded typeface emulates space there is something about the curves pair with the strong lines. For this typeface, I used a light yellow like a soft start light. Lightyear is also used for the logo.
For the body text, I chose Futura in white. Futura compliments both the heading types and fits well as it is an established vintage typeface with a history of being used in space designs.
Logo and Name
One of the main goals was to create a logo that captures the direction, mood, tone and audience that I had selected. I played with different logo inceptions before deciding on a name for the festival. I felt that a strong visual logo would be better than coming up with a name and trying to fit a logo to the name.
I played with circular lines for the logo like a solar system revolving around a star. I kept the design simple by only using small circles as planets and simple lines to show their trajectory. Using this image I played with the line lengths and found that I could create a “G”. I decided to name the festival Galatica. This name fits because the whole music festival emulates a galaxy from the stage themes to the festival layout.
The main logo “G” contains four colours that match the stage planets and then the rest of the name written in the Lightyear typeface. The simplified logo, which is used more throughout the site, is all light yellow and but can also have the same effect in grey scale. It also retains its legibility at multiple different sizes.
Style Tile
In order to develop my wireframes, I first started by researching what were the most important pages that other music festivals had. After this, I used my UX knowledge to card sort the best possible layout of pages. As you can see below as my pages developed the order of information changed especially on the home page. I thought it was important to include the lineup right away as its one of the determining factors users have when deciding to go to a festival.
The second most important wireframe feature was including the “buy now” button on every page in an accessible area so users could quickly just buy tickets if that's all they wanted to do on the site. I ended up attaching it to the menu drop down and gave it the distinctive orange CTA colour that I had used throughout to create importance.
I did some minor UX testing on mid fidelity to better understand the user flow. After the initial testing, I was able to confidently create the high fidelity.
Thanks to the design process, bringing the wireframes from mid fidelity to high fidelity wasn’t too hard. I already had a well-developed symbol library in Sketch that was easy to overlay. Only minor tweaks were needed due to utilizing atomic design
For my music festival, I wanted to build an engaging and impactful brand campaign that promotes the genre of music, the country and area the festival is located, and the target audience.
For the campaign, I wanted to try a different take on the marketing. Since the essence of my festival is “explore” I decided to market the campaign as a vacation site would do their marketing. Making my fictional planets seem like actual destinations.
Some of the digital marketing would be targeted at travel sites since my target market likes to travel. The other part would be demographic targeted social ads.
For a more Gorilla Marketing campaign, I would post on the side of city busses and tourism busses marketing the festival again as a travel destination with links to the website to find out more. I feel this type of marketing goes hand and hand with the mystery and unknown aspect I'm trying to portray with the overall design.
Here you can see the progression of my lineup posters. I started by combining all the elements from my planet pages but felt that once they were all together the design was too complicated and intricate. I found there is a fine balance when creating retro-inspired art. The final design I went with something flatter that encompassed more of the simple part of my design.
Here are the wristbands for the festival. Again I pulled from the poster and chose not to use the more intricate planet designs because with the small-scale certain aspects wouldn't have delivered.
The final design I feel captures the “why” I set out to achieve. The design allows users to understand the purpose of the music festival as well as easily find the key information they need to know.
My design task was creating a festival that set out to establish a different type of music festival where you could explore and learn alongside listening to your favourite bands. I wanted to design a venue that was purposeful and related to my overall theme. I feel I have created a design that transports users to the outer reaches of the known and unknown universe by combining aspects of nostalgia, myth, and fact — creating a communal experience of wonder and discovery.
Secondly, I designed this website to be responsive. Responsive web means that the site will scale no matter what screen size it is viewed on. This also means that the layout changes to adapt to smaller screens such as smartphones. The mobile design remains true to the core design but condenes the layout to be more efficient for users accessing content on the go. I also have removed the dark grey comic illustrations from the mobile version to create a more simple clean design for a smaller screen.
Finally, I wanted to use animation to demonstrate key movements on the website. Below you can see how the menu and the ticket cards would animate.
Overall the website feels purposeful in its design. It executes the design inception that I intended it to. The retro space design is present but isn’t overpowering and allows the website to still feel current.
Learning Outcomes
This was the first time that I created a fully responsive website all by myself. For this project, I was the only UI and UX designer. I had to schedule my time wisely so that I could make deadlines on time. I also learned how long a project can take when it is fully illustrated instead of just putting in photos. This project really helped me strengthen my Adobe Illustrator skills to the point where I feel very comfortable using the software. Next time I will be more prepared with how long certain tasks take so I can schedule my time even more efficiently.
