SINNE. Berlin — a UI case study
A techno music & arts festival
BACKGROUND
_____
/ PROJECT GOAL
For my favourite project so far, I was tasked with conceptualising a brand new music festival.
The main goal was to create a strong visual brand identity and a responsive website creating an engaging, impactful and well-designed experience for the users.
I also had to establish a strong, consistent visual identity that carried through different marketing and promotional materials.
/ RESEARCH
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 / way finding, 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.
Today, designers have more at their arsenal in creating experiences and showcasing an event even before it happens.
/ WHO
SINNE. Berlin is for creative people aged between 26 and 35 who have a deep appreciation for music and art. They do not follow pop culture and seek out their hobbies and interests.
Typically they could be found in a music rabbit-hole on Spotify, at a local underground electronic music party, or visiting the latest art exhibition in their city.
A typical attendee of SINNE. Berlin is Chris Cooper: he lives in the city and is driven by creativity. He does his research and looks for music festivals and events based on the specific artists he likes, and wants to be around others with the same motives.
Many great DJs are booked at large festivals overrun with people who are there to get drunk rather than appreciate the artistry. This is what Chris Cooper wants to avoid.
/ WHAT IS SINNE. BERLIN?
Sinne means ‘senses’ in German. SINNE. Berlin is a carefully curated techno music & visual art festival designed to elevate the senses. It spans 2 nights and is located in Berlin, Germany.
The musical and visual artists selected for the festival are known for being experimental and pushing the boundaries of convention.
It is set in the iconic nightclub Tresor, which is a huge, old power plant. The festival is based in Berlin — a hub for techno. A lot of electronic music is produced out of the city and many people make a pilgrimage there for the music scene.
The venue plays a big part of the experience and plays into the brand. Tresor is very raw and industrial, which is perfect for SINNE.
DESIGN INCEPTION
_____
/ WHY
It’s important to come up with a Why to understand why exactly you are creating your design; this should be kept at forefront of your work and used to guide your decision making.
Humans often looking to elevate to higher states, whether it be through drugs, alcohol or even meditation. SINNE. Berlin looks to recreate this feeling through music and visual arts.
Upon walking through the long, dark tunnel into Tresor, the attendees are entering an immersive piece of art.
Light art installations are scattered throughout — waiting to be discovered — and the music is cohesive from start to finish. Whilst other music festivals have artists performing in silo, each DJ set at SINNE. Berlin builds on the last: it is an evening of peaks and troughs taking you on a sensory journey.
The visual language of the Why can be explored through the following 5 categories:
MOOD: Much like the feeling the festival is trying to evoke, the mood of the design should be euphoric. As we are trying to pique the interest of solely our target audience, it also needs to be intriguing & thought-provoking
COLOUR: The colour reflects what a festival-goer would see. It’s dark like the night, and illuminated with glowing and contrasting visual art.
SHAPE: Waves reflect sound waves and geometry conveys elevation of human consciousness.
SPACE: Drawing inspiration from experimental electronic music, the space is inconsistent and layered.
MOVEMENT: The movement of the website is fluid and smooth — this is how I envision sound waves to float through the air. This smoothness also offsets and softens the sharpness of the geometry.
/ MOOD BOARD: Neon Lights
The first art direction I explored is called Neon Lights; it is a reflection on the visuals you may see at the festival.
It is dark and the lights of the art are reflected on people and surfaces.
/ MOOD BOARD: Mind Warp
The second art direction — Mind Warp — focuses on the heady feeling an attendee might experience.
The trippy geometry is a reflection of the waves of energy, and the sometimes unsettling and inconsistent nature of the art.
The darkness is simply a parallel of the time of day and the bright contrasting colour is the visual art.
I chose to go with this art direction as I felt it was the most accurate representation of the festival itself; it was also the more striking of the two and would allow for experimentation and flexibility in the design.
/ STYLE TILE
The next step was to translate the mood board into a style tile. Using the chosen Mind Warp mood board, I mocked up some UI elements to give me an idea of how this art direction might look as a website.
- I opted for a matte black as I felt this was more sophisticated and easier on the eye than a standard black. Potentially it would also be more stylish to the target audience.
- The sharp edges of the buttons reflect the raw — often industrial — digital sounds of the music and venue.
- The simplicity of the content and CTAs offset the intense imagery. It’s important to keep a clean, minimal look to prevent a clash.
/ TYPOGRAPHY
Techno music can be seen as geometric as it has repetitive patterns, often layered with sharp, industrial sounds. I opted for sans-serif typefaces that would reflect this, and also be legible and clean alongside the intense imagery.
- Stolzl was chosen for the headers as it has sharp corners and right angles, which make it a strong typeface which can convey a message clearly.
- Work sans was selected for the body text as the sharpness of corners mirror those of Stozl, but it also has a soft roundness with offers some friendly, legible relief.
/ LOGO
With the logo for SINNE. I initially jumped into taking to pen and paper to quickly iterate through different concepts. I spent an hour testing out every idea I could think of, however, none felt right.
At this point, I took a step back to understand what a logo is actually for.
The primary purpose of logo is to identify a brand, stand out from others and be memorable.
It must also stand the test of time and give room for growth.
“Logo design is a strategic tool — it’s not art.”
— https://logogeek.uk/logo-design/why-logos-matter/
SINNE. Berlin has a bit of a ring to it so I immediately knew that SINNE. needed to be a word mark logo. The word ‘sinne’ (senses) is intriguing, memorable and packs much more power and recognition than any ambiguous logo could.
After exploring a few different typeface options, I opted for Proxima Nova Bold as I found the thickness of the stems had the impact the brand was looking for, and the circular bowls balanced them out.
As with any good logo, I opted for one that would stand the test of time and was versatile enough for expansion into other territories.
/ ICONOGRAPHY
The icons selected for the website are simple, geometric and sit well with the chosen typefaces.
( Note: if I get more time I will make the weighting of the Facebook logo more consistent with the rest of the icons.)
DESIGN PROCESS
_____
In this project I applied my learnings from over the last 3 months. For me to work most effectively I knew I had to be strict in finalising the content and concept first, then stick to an iterative process. I made a conscious effort to not get caught up in smaller details at the beginning.
From researching competitors and other websites, I first made a list of features and pages that I knew I needed to include. I made sure I was clear in the goals of the website and that the content reflected this:
- To be an informative website to both ticket holders, and those interested in purchasing a ticket.
This website should not serve as advertisement to the masses, but provide information to those that have found their way there through the music scene.
I drew out the low-fi wireframes first, then tested the mid-fi prototypes on some users to make sure they were clear. I wanted to make sure I was happy with the information and layout before moving onto the hi-fi screens.
Before I started working on the final screens, I stopped to think about the visual elements and branding I wanted to represent SINNE. I knew this is where my time could potentially get held up so I wanted to front-load this work.
HEAD: Using Photoshop I first created the sliced head image which conveys the feeling of the festival. I opted for an older man to be ambitious of age; SINNE. is trying to cater for the older crowd who are the target audience. His eyes are closed to show sensing and euphoria.
The sliced head effect was inspired by one of my favourite graphic designers: Magdiel Lopez — go check him out after reading my case study :)
WAVES: In Illustrator, I created the trippy waves which convey the energy and sound.
Once I had finalised the main visual elements, I was able to work quickly. Inspired by my last project, where I *somehow* managed to design most of a website in 2 days, I tried to recreate this pace by being decisive and designing intuitively. I made sure I had completed a full iteration before going back to refine it.
FINAL DESIGN
_____
/ TEXTURE
The background of the website has a grainy effect which reflects the raw, industrial, concrete venue. The texture also adds dimension and makes the visual elements stand out more.
/ BREAKING THE GRID
I have kept the content clear and concise, so breaking the grid offers a stylish and edgy way to display the information, whilst fitting with the brand.
/ BLACK & WHITE
The imagery is black and white to not clash with the waves and make the pops of colour (used for emphasis) to stand out more. I also feel this adds mystery and style and is a parallel to the dark silhouettes you would see at the event.
Desktop Prototype: https://invis.io/3PPSAO92NJX#/337266879_Music_Copy
The website is responsive and the mobile design stays pretty true to desktop, with the exception of the navigation which becomes a burger menu
Mobile Prototype: https://projects.invisionapp.com/share/56PS8FHERSF#/337892481_Mobile
/ Animations
I added some animations to create drama and elevate the perception of the website and brand. SINNE. has positioned itself as a thought leader in art and taste, so the website needs to reflect this.
The animations I added using Principle are unexpected and try to add delightful design to the user experience.
THE CAMPAIGN
_____
An important factor of the campaign is that SINNE. is not trying to advertise or persuade the general public to come to the festival. To create the desired vibe for the event, we only want to speak to our target audience who are familiar with the scene and are used to finding events through DJs, artists or clubs they follow.
This means our campaign is never persuasive, just informative yet stylish.
The Instagram posts use the main visual elements to align with the visual identity and create brand recognition.
The brand is introduced and teased with the post of the waves, right before the date announcement. Soon after this, the confirmed acts are slowly filtered out.
The strategy with the Instagram account is to curate an artistic, visual language that appeals to our creative, target audience.
- All the posts are black & white to evoke a sense of mystery and intrigue. The subject matter focuses on the senses or what an attendee may see at the festival.
- There is also a chance SINNE. may get organic attendees from Instagram who appreciate the aesthetic and want to know more.
/ POSTERS
The posters are very specific to the target audience and come in two types.
TYPE ONE: has all the information but doesn’t directly say what the festival is. The goal is is create intrigue and brand awareness. For each poster, the pink is used to emphasise the most important point, and the website address is always featured so people can find out more.
TYPE TWO: Is more like classic advertising and offers more clues as to what the festival is, but is still subtle.
Whilst other event posters might be bright, have a lot going on and trying to grab your attention. In contrast SINNE. festival posters are intriguing and stylish; they aim to captivate and pique the interest of the Chris Cooper’s of the world who care about aesthetic and think outside the box.
A lot of negative space is used alongside the strong visual elements.
/ WRISTBANDS
The wristbands were made to be easy to distinguish between them, and have enough white to allow for bouncers to check them in the dark.
/ SWAG
The festival merchandise serves as a memento or time capsule of the event. Nobody needs yet another tired looking tote bag with a faded design, so the swag has been selected to stand the test of time and be useful to the target audience and their interests.
The ethos is: purpose & design first — advert second.
The vinyl record would have recordings from all the music sets over the weekend.
The merchandise is also a perfect opportunity to collaborate with high-end brands like ACS, who experienced event-goers would know.
Pairing with established and respected brands can also elevate the perception of SINNE.
The last three swag items focused on music, whilst the next three focus on the senses. All but the vinyl can be easily carried home in your pocket from the festival:
Stonedware pride themselves in offering a “design-centric smoking experience for the aesthetically inclined” which both aligns with and builds up the SINNE. brand.
CONCLUSION
_____
In summary, I feel like I have created a brand and visual identity that is both distinctive and fitting for the festival.
/ POSITIVES
I feel like this project has been my best work to date. I tried not to second-guess myself (as I have done in all my previous projects). Following my gut instinct and trusting my taste has elevated the quality of my work (or at least my perception of it!) and meant for the first time, I have produced a body of work I am proud of.
Utilising atomic design and producing my main visual assets at the beginning meant I managed my time effectively. Sticking to a rigid process and ensuring I worked iteratively worked well in ensuring I had plenty of time to test out different ideas, and ensure every piece of the project was thought-out and considered.
I have also discovered the world of Youtube tutorials (!) and pushed myself to learn something new in Photoshop, Illustrator and Principle. I have often been intimidated to go outside my skillset when pressed for time, but I’m happy I did.
/ FUTURE CONSIDERATIONS
If I were to work on the project more, I would build out more variations of the visual elements to make the design more interesting.
I also have just one call-to-action to buy tickets on the website, so I would add another in the navigation bar to make it easier for users.
