Soul Revival — a holographic music festival (UI Case Study)
Background
For this solo project, we were tasked with researching and creating a responsive website for a music festival campaign that offers more than booking top tier talent. With this project, we’re tasked with thinking beyond this to meet raised expectations of music fanatics to find more innovative experiences whether through art, food, atmosphere and/or culture.
Timeline
I was allotted a total of three weeks to complete this project. The specific timeline entails:
Team
Since this was a solo project, the team consisted of myself as the single UI designer:
The Challenge
The challenge for this project is: To create a music festival campaign that goes beyond booking top tier talent to meet expectations of music fanatics in finding more innovative experiences whether through art, food, atmosphere and/or culture.
The Goals
- Build a brand campaign that promotes my music festival on the genre of music, location, and target audience I’ve selected
- Create a responsive website with an engaging and well-designed experience for users
- Establish a consistent visual identity that carries through different marketing materials
The Why
Beginning with the why, I reflected on what might make this music festival different from others. How could I provide a unique and innovative experience for festival goers? Initially, I started with:
Transcend space and time through an immersive, sustainable festival experience for music lovers
I thought my festival could be a zero-waste and zero-carbon music festival that takes place in BC in 2020 — to align with Vancouver’s goal to become the greenest city globally.
I also had another why in mind though, which I ended up leaning more towards because it featured departed legends of soul + would be the first ever holographic music festival:
Final why: Transcend space and time through an immersive, holographic festival experience for music lovers
The Persona
For this music festival, I targeted individuals in the 30–40 age who grew up listening to hip-hop/r&b music and appreciates the 60s soul tracks sampled in the music they liked. My target persona’s goal is to meet other like-minded music lovers and experience a music festival that celebrates diversity and history:
The Research
Since I wanted to feature soul artists at my festival, I decided to do so some research on what soul concert posters looked like in the 1960s. I came across a lot of different posters and found some common patterns between them, in the typefaces, colours and shapes used, as well as the way content was stacked unevenly. Some examples of images and posters I took inspiration from include:
Since my music festival was nostalgic and futuristic at the same time, I also thought that retrofuturism could be a good design style to represent the tension between the two. Retrofuturism is a movement in the arts showing the influence of depictions of the future in the past i.e. think flying cars and robots. And so, in my research I also looked at images that conveyed this style as well:
Design Directions + Moodboards
Design Direction: Retrofuturism
In my first design direction then, I decided to set a mood that was nostalgic, futuristic, radiant, vibrant and imaginative.
Visual language
I decided to use neon bright colours contrasted by deep, navy blues to convey radiance and vibrancy. In regards to space, I planned on making it look futuristic using three-dimensional shapes. Movement would be linear and fast while shapes would look geometric, edgy and boxed in — to convey the retrofuturistic design style I envisioned.
Moodboard
Using the moodboard, nostalgia and futurism is represented using the images of the stereo, headphones and RUN DMC — which are designed in a retro-futuristic design style. The bright neon pops of blue and pink create radiance and vibrancy while the images of the grid and dark blue pathway vanishing into the distance inspires a sense of wonder.
Chosen design Direction: Utopos
In my second and chosen design direction, I decided to set a mood that was nostalgic, futuristic, romantic, trustworthy and sweet.
Visual Language
In regards to visual language used to convey these moods, I decided to use colours that were commonly used in 60s soul posters I researched because I really wanted to create a sense of nostalgia for that time. This was the same for space within the website as posters advertising 60s soul artists were stacked with content asymmetrically. I decided to represent the tension between nostalgia and futurism with uneven movement, but also wanted it to be fluid and smooth as I thought it captured the feelings evoked listening to the smooth melodies of soul music. The contrasting shapes, again, were selected to create a sense of nostalgia while simultaneously evoking tension between nostalgia and futurism.
Moodboard
Using the moodboard, I represented the ‘old’ using vinyl records, a record player and old paper and the ‘new’ using a holographic image of two hands. Romance and sweetness is conveyed using the stacked licorices, the use of the colour pink as well as ‘the how sweet it is to be loved by you’ sign. Trustworthiness is represented using blue hues, which I’ll speak to more in the next section.
A short note on why I chose this design direction: it was a difficult choice between the two — they are both solid design directions. I leaned more towards the second because I really wanted to recreate the design style of the 60s soul posters I researched. Also, I thought that if I wanted to communicate that this festival featured soul legends, the visual language in the chosen design direction did a better job of doing that.
Style Tile
Colour palette: expanding on this a little more, I specifically used blue because it represents trustworthiness in colour psychology. Given this is the first holographic music festival, people might be skeptical of it and so the blue is used to make people feel at ease. Pink conveys romance and sweetness, while turquoise represents open communication between the heart and the spoken word. Black is used to create contrast, and the beige old paper aesthetic is used to convey nostalgia.
UI elements: The icons and button are rounded and filled to create consistency with the design direction.
Typeface: I’ve used three typefaces, the two header typefaces are Rhode (header one) and House slant regular (Header two). The two header texts contrast each other well, and based on my research, embody a 60s soul concert feel. The body text is Raleway, which I selected because it’s clear and legible to read at a small size.
Background: The background is an old paper aesthetic — to create a feeling of nostalgia for the past.
Pictures: The photos of artists used are modified to look like holograms — to give people a taste of what the festival is going to be like when they attend.
Logo design
I started off my logo design process by selecting a name. After reflecting, I thought ‘Revival’ was a good name to use because in a way, the festival revived departed musicians so that they could perform again. I also thought Revival could be an annual event, that takes place over the next few years, beginning with Soul Revival, then Rock Revival, Rap Revival and so on.
I was initially thinking of creating an emblem for Soul Revival, although I realized it wasn’t versatile in replicating across branding. For business cards, for example, it’ll be too small to read and decipher the details.
After scrapping that idea, I decided to experiment with creating a Wordmark logo. I started with writing the name of the festival on paper, then I raised some of the letters of revival and did the same for soul. Why? I thought to myself, it’s like these soul artists are rising from their graves to perform for everyone again, so maybe I’ll raise these letters as a nod to that.
I also put the letters of soul in circles as another nod to 60s soul posters. Once I was happy with my design, I digitized it and experimented with typefaces, colours and finalized the hi-fi logo above.
The Campaign
Prior to making any marketing materials for my campaign, I had to remind myself of who I was advertising to and what unique value I offered them:
Target group: As mentioned earlier the target group was selected because of their interest in the history of rap music and the soul tracks sampled within it. The target group has a love of all music in general, but they have an affinity for soul music.
Genre: For the marketing campaign, I selected 60s soul music out of pure interest. Initially I wanted to include other genres of music, but since I had a short time frame to complete this project, I decided to focus on the MVP.
Location: I chose Chicago, Illinois as the location because it was instrumental in spurring the album-oriented soul revolution of the late 60s/early 70s. Since the festival takes place within the city, people don’t have to camp, which wouldn’t make a lot of sense because the festival has to happen at night, over two evenings. Also, I chose Grant Park as the venue because the infrastructure already exists as Lollapalooza happens every year.
UVP: In thinking about the UVP, initially I started with ‘Re-imagine reality at the world’s first holographic music festival’, but then I felt I needed to be more specific about the value I was providing festival goers. Attending the first ever holographic festival was apart of this value, but it needed something more.
My final UVP is: Re-live that good ol’ soul at the world’s first holographic music festival. It communicates an opportunity for festival goers to re-live soul music in a unique, innovative way.
Swag and promotional materials
My intention with the swag was to create merchandise my target persona would buy. Jordan loves vinyl records and wearing unique items of clothing, especially graphic tees, so I thought the following merch would be relevant for her:
Jordan is environmentally conscious; she takes the bus and skytrain to work — so it made sense to advertise posters on the street, bus-stops and at skytrain stations:
Jordan also loves to use instagram to follow her favourite artists and keep up to date with any upcoming albums or concerts. Once she has a ticket to Soul Revival, she’ll be able stay updated about dates, contests and line-up announcements. The instagram posts for the Revival page will slowly tease out festival details — to build excitement and anticipation ahead of the event. It’ll include a contest where a select few participants will be given free tickets if they can guess some of the surprise guests included in the line-up.
I also designed wristbands for the festival, including Saturday, Sunday and full weekend passes:
Final website design
Desktop and Mobile
While I primarily focused on UI design in this project, I did take UX into consideration as well and so I’ll speak to both in relation to design:
UI Design:
- At a first glance, you’ll likely notice the holographic image of James Brown, which stands out against a pink background. In mid-fi, I thought I’d have to place artist images against a darker background for the hologram effect to be obvious, although with feedback I realized this didn’t entirely align with the mood I wanted to set for this website. I decided to use pink as background for every artists image in hi-fi. I also decided to use a lighter background for the website itself, so I changed it from black to the textured beige paper aesthetic.
- The line-up features headliner names stacked on top of each other in black, uneven boxes — which pop against a pink background. In low-fi I didn’t have the artist names stacked or contained in boxes. Earlier on, I thought I’d display the line-up in a warped arc shape.
- In hi-fi, I utilized both white space and uneven turquoise boxes to wrap text that appeared to be floating in mid-fi (i.e. Reimagine reality, Motown museum and Setlist playlist sections and artist descriptions)
- In the schedule for the festival in hi-fi, the letters for ‘Saturday’ and ‘Sunday’ are enclosed in circles, which is consistent with the design of ‘Soul’ in the logo. In mid-fi the lettering was enclosed in a shape that wasn’t consistent with the shapes used in the rest of the website — and so after reflecting on feedback I got about this, I decided to scrap it as I wanted the visual design to be consistent.
- Desktop VS Mobile: in my mobile design, everything’s looks fairly consistent with desktop, with the exception of the placement of content and images, which I’ll discuss more in UX design next. Otherwise, from a UI design perspective, everything is scaled down to fit into mobile.
UX Design:
- In mid-fi, I have a CTA to purchase tickets right after the title, but I thought I needed to entice people to buy first, with the line-up and image of James Brown pictured as a hologram. In hi-fi then, I placed the CTA after the line-up. I also have a few more ‘get tickets’ CTAs placed throughout the page.
- In regards to placement of sections, I had Motown Museum immediately follow the Re-imagine reality section in low-fi, although in mid-fi, I thought that my persona would view the museum as secondary in importance to artists and artist descriptions. Same in regards to schedule, I thought Jordan would want to see this before the setlist tracks section.
- I added a setlist playlist section in mid-fi, because I thought my persona would want to get amped and listen to some of the setlist tracks prior to the festival.
- Desktop VS Mobile: Since I’m working with less real estate in mobile, I stacked content and images on top of on another to conserve space. Artists are presented, for example, with both their names and descriptions following their image. I did the same for the footer and the date and location details of the festival as you’ll see in the mobile prototype.
Final Prototypes
To see the final drafts, click on the prototypes below:
Challenge accepted, but was it solved? First, lets revisit what the challenge was:
Create a music festival campaign that goes beyond booking top tier talent to meet expectations of music fanatics in finding more innovative experiences whether through art, food, atmosphere and/or culture.
Beyond booking top tier talent, I think my music festival is unique because it’s innovates on the experience of music festivals. It paves a new trend in the industry, by initiating the first ever holographic music festival. It also goes beyond offering music, by including a museum and pop-up record store to satisfy the goals and interests of my target persona.
For future considerations, if I had more time, I would have designed more pages for the website. I also would have scaled the images down a little more for desktop, as I think the size is too large at the moment. Otherwise, I really enjoyed working on this project. I absolutely love music, especially soul, so this was a really fun and rewarding experience for me.
If you liked my case study, claps would be appreciated. I’m also interested in any feedback you might have, so feel free to leave any comments or suggestions as well.
Thanks for reading,
Fatimah
