La Bâtie Visual Identity

Timeframe

Spring 2022, 4 weeks

Team

Linda, Zaac, Thomas, Avril

Project Type

+ Visual/graphic design
+ Content strategy
+ Interaction design

A visual brand identity for La Bâtie Festival de Geneve, bringing inspiration from renowned designers Dan Friedman and Wim Crouwel. The purpose was not to copy their style but to research what made the masters successful and apply the learnings in a more contemporary style. Ultimately, the result is a microsite that pushes the boundaries of how expressive web interaction can be, while considering functional aspects such that users can understand the site.

Final microsite direction (no sound)

Project goals

The goal of the project was to create a graphic and visual language for La Bâtie Festival de Geneve by taking inspiration from renowned designers. The purpose was to expand our graphic and visual design skills, practice diverging by creating multiple microsites at different ranges of expressiveness, and converge on a final visual identity for the La Bâtie.

My role

I played a project management role by planning, organizing, and directing what needed to be completed each week, while ensuring the projects was on time and within scope. Another key role that I played was to articulate the team's ideas, work and progress into a presentation structure that was meaningful and impactful during weekly presentations. For the project deliverables, I focused on content strategy and copywriting, but I also had a visual design role throughout the project as well.

About La Bâtie

La Bâtie is an annual, 17-day, late summer performance art festival located in Geneva, Switzerland where artists abroad perform music, theatre and contemporary dance. For this project, we focused specifically on La Bâtie's cabaret shows, Le Poudrier. Le Poudrier Cabaret is the nightlife program of the festival, featuring shows with themes from the drag arts.

Designer precedents

We started the project by studying the work of two designers: Wim Crouwel and Dan Friedman. The purpose of studying these designers was to extract specific design principles that we could use to develop our graphic design skills.

Wim Crouwel

Wim Crouwel is a Dutch designer from 1928 -  2019 whose disciplines include: graphic design, type design and typography. He is well known for his need for consistency and strict unwillingness to deviate from the grid.

Dan Friedman

Dan Friedman challenged the strict rules imposed by Swiss Design by pushing the boundaries between legibility and unpredictability. Engaging negative space by utilizing wide spacing of letters through type creates visual interest and maintains legibility.

Extracting design principles

In order to extract design principles, we began to explore specific, interesting elements we found in Wim Crouwel's and Dan Friedman's work. We started by loosely defining a few principles that we could explore in our project, then we found and annotated representative images. As we started our own graphic experimentations, we progressively narrowed down our principle definitions and representative images until our principles and our work was finalized.

Process that started wide and ended with two well-defined principles

Graphic exploration

Here the goal was to develop 3-4 sets of multiple, unified graphic assets based off the designer principles that we identified. Some different assets that were explored were: posters, window display, a hallway entrance and a wall mural.

After creating these assets, we selected multiple graphic areas from our different assets that we thought would translate well into to the remaining visual design portion (specifically interaction design) of the project.

Some of the graphic assets that were carried on throughout the rest of the project

Visual exploration

We began exploring how we might create a microsite with different levels of expressiveness. At this point, it was very beneficial to have the entire team on the same page, and since we had agreed on our main goals and design principles as a team, we were able to create a unified depth of work across the spectrum from functional to expressive.

I was most involved in the creation of the first two sites, specifically in the areas of visual design (color, type) and content design.

The focus for our microsite is to create pre-event excitement for La Batie's cabaret events. We achieved this by providing a snapshot of what the cabaret event entails, and how it contrasts from the norm. Inspired by the stark contrast between the everyday world and the eccentricity of the drag shows, the directions aim to engage the visitor by creating an experience centered around the dynamic expressions of the performers.

Functional and expressive

The dynamic personalities of the performers play an integral role to build the atmosphere of the cabaret shows. By surfacing performer-related content via names, headshots and recordings, this direction aims to bring the dynamic personalities of the performers to the forefront.

The microsite uses fast moving interactions to shock and excite users, similar to the experience of a cabaret show. Particularly when visiting an Artist page, the interactions are meant to be loud, dynamic, and full of personality - exactly like the personality of a cabaret performer.

An early microsite that I designed

Expressive

The microsite displays the interconnectedness of the four La Batie events by displaying elements of each event on screen at the same time. The user is meant to feel as they are in control of how and what content is delivered to them. For example, rescaling the four quadrants of the events dynamically changes the content displayed. The intent is to entice the user to explore through discovery of content in a stimulating manner.

I worked on the color and type for this microsite

Extremely expressive

Details of the event are revealed in small pieces of content via interaction (hover, drag) — providing a fun experience for viewers to discover and manipulate the content. By maintaining feelings of mystery and curiosity, the viewer is incited to attend the event in order to achieve the whole experience.

The most expressive microsite

Pivot point

The team felt strongly that we could pursue all three of these directions, but we choose to move forwards with the most expressive direction because we thought we would learn the most by taking the opportunity to explore more experimental interactions.

I suggested that we consider moving forwards with an "after the event" microsite so that we could create an opportunity for the audience to provide more support to drag artists after the show, in a merchandising like concept, and this is something we moved forwards with.

Final direction

For the final direction, I focused specifically on the insights and framing, the content design, and the final presentation to the class (design of slides, copywriting, script).

Insights and framing

I played a major role in the creation and articulation of the framing for this final direction. The purpose of creating insights was for the team to use these insights as a driving force behind the final form of the microsite. More importantly, these insights were used as a communication tool to articulate a strong 'why' behind our project concept during the final presentation, especially since we choose to pursue experimental interactions, which might have not made sense otherwise.

Value proposition

Intended for users who have attended Le Poudrier's cabaret shows, this microsite "Dragshop" allows users to purchase merchandise from the shows while re-discovering their past drag experience.

Art direction

The background texture of the home screen has a rippling effect when the user moves their cursor about the screen. It's intent is to encourage the user to explore the page and discover content through dragging.

A few empowering models of high fashion

Content strategy

Since many drag artists are severely underpaid for their shows, this microsite was created in order to further support drag artists. Users re-engage with the shows by interacting with the site and are able to provide additional financial support in the checkout page. Anticipating that users have already seen the event, the content surrounding the merchandise only features essential details. Instead the content strategy focused on surfacing short pieces of content to trigger memories of the cabaret event.

A few empowering models of high fashion

Interaction design

The interaction design features three key interactions: 'drag to discover,' 'hold and unveil' and 'scramble.'

DRAG TO DISCOVER: The drag interaction reveals the content in bits and pieces, and is a slow interaction, which forces the user to be more engaged with the interactions.

HOLD AND UNVEIL: When users click and hold a piece of content from the home page, the merchandise tied to the particular event and a looping video of the event is revealed. This interaction re-engages the user with the event show and commands the user’s attention to drag the merchandise to the cart.

SCRAMBLE: By scrambling the type and imagery during the drag, the identity of the content is masked until the user commits to the drag by releasing their cursor. The user can guess at what the content might be based on their experience of the show; an ‘aha’ moment is established when the content lands as the user recalls the event.

Three key interactions within the final microsite

Conclusion

(Left) microsite screenshots
(Right) a hallway design that could be part of the visual identity for the final concept

Learning takeaways

My visual design skills vastly improved during this project - I learned a lot by examining so many works from other designers and doing my own graphic experimentations. I am more confident and comfortable working with a wide, open process, and I have a much better understanding of art direction, content strategy and interaction design. I also feel more comfortable working with a team; I learned how to manage problems as they came up, as well as how to evaluate work so that the best work is surfaced.

Thanks for reading!

west  Take me home

View next project

Vancouver Biennale App Design   east

Copyright 2022 Michelle Illing.  Made with music_note in Vancouver, British Columbia.