In this project, we were tasked to create a visual brand identity for La Batie - Festival de Geneve through extrapolation of design principles from reknowned designers Wim Crouwel and Dan Friedman expressed in the form of a microsite.
Thomas Tran
Avril Yang
Linda Liu
Michelle Illing
Zaac Agnes
Interaction Design
Secondary Research
Prototyping
After Effects
Photoshop
Figma
4 weeks
La Bâtie comprises some forty productions, each exemplifying the best of contemporary works from home and abroad. It takes place during 18 days in the Grand Genève. This project is focused on the cabaret portion of the festival, Le Poudrier, which features performances containing themes from the drag arts and erotica.
The microsite intends to promote drag artists (who are often marginalized, niche and underpaid) through interactions that entice users and promote exploration of the talent that these artists provide. The site is intended to showcase a post-show experience, mainly for attendees to re-visit memorable experiences from the event.
1
Encourage visitors to explore the site through denial and reward
2
Unique visual and interactive identity of the performances to re-invoke memorable experiences for attendees.
To create a unique identity for the event, we started with a lateral, deep graphic exploration and experimentation by studying the works of Wim Crouwel and Dan Friedman. The purpose of this exercise was to extract Design Qualities present in many of their works which we would then synthesize to develop this visual and interactive identity.
Lateral exploration of design works
The most valuable insight we got from studying Dan Friedman came from an interview he did with Eye Magazine, which he says:
" Legibility is based on order, convention (predictability), simplicity and on the reader as a passive recipient. Unpredictability is the ability of a design to attract or seduce you, in an intense, virtually cluttered world, into reading it in the first place. It is usually based on disorder, originality and complexity."
Interview with Dan Friedman, conducted by Peter Rea for Eye Magazine 1994
This quote alone is invaluable because it gave us a different perspective on how to look at typography. That the function of unpredicability in type serves to entice the user to even want to read the type to begin with, and that good typography is a balancing act between order (being able to read the type) and chaos (enticing viewers to actually want to read the type)
The design quality we extracted was using transformations of repeated elements to guide attention towards elements.
Another design quality we extracted was 'Breaking the grid', which creates an element of chaos, making compositions more dynamic.
After going back and exploring more works and iterating on the process of pulling more design qualities, we ultimately ended on the following.
From the extracted design qualities, we developed static visual graphics to put into practice the qualities we learned from Wim Crouwel and Dan Friedman. The goal was to see if what we extraced from our exploration was usable. I was involved in the creation of the following assets.
We began exploring how might interaction communicate varying levels of expression which would couple well with the visual identity exploration and the design qualities extracted. I had the most involvement in developing the prototype interactions and motion graphics of the following examples.
The interactions and motion graphics were intended to communicate the dynamic and loud atmosphere of the cabaret shows. By surfacing related content in a fast-paced manner, we hoped to have brought forward the atmosphere of the cabaret show.
This design intended to use the interaction of dragging and hovering to reveal cropped images to communicate a sense of mystique and curiousity to communicate the more seductive side of the cabaret shows which often have erotic elements.
The team developed 3 key insights of the project to use as a communication tool to articulate the 'why' behind the project. To communicate that the purpose of the microsite is more than just an exploration of experimental graphics.
The final deliverables included a microsite prototype demo as well as a slide deck. I focused specifically on the development of interactions and motion graphics of the prototype demo part of the deliverable. The foundation of many of the interaction ideas were supported by Dan Friedman's idea on balancing legibility (order) and unpredicability (chaos).
The text scramble was our way of using motion graphics to create an element of unpredicability. To play on this idea of slowly revealing the contents of the text in an enticing manner.
The revealed media content after dragging over it uses our Design Quality of close-crop framing, as a way to play on the architectual idea of denial and reward. Visitors upon finding the content are rewarded with a partial view of the media mostly hidden by the crop.
Upon clicking the partially revealed content, the background changes to show the entirety of the content and the merchandise associated which can be bought.
Although there was a development in software skills especially in After Effects, I felt I got the most value through laterally studying the works of other great designers and I do not believe we would have been nearly as successful without the iterative process of constantly going back and exploring and examining many, many works.
The goal of this project was to find a client with an experience design problem and propose an experience design solution. After research, exploration and design sprints, the final solution took form in a website redesign centered around featuring the Italian boutique suppliers of Italist.
Thomas Tran
Avril Yang
Linda Liu
Michelle Illing
Zaac Agnes
UX Research
Prototyping
Interaction Design
After Effects
Photoshop
Figma
4 weeks
Concept video
Italist is an online luxury marketplace seller based in Los Angeles, that partners with Italian boutiques. They offer authentic luxury items at discounted prices by providing express shipping to global customers and sell their products at Italian prices, bring luxury goods to their customers cheaper and faster.
Words associated with lower cost and sale are seen numerous times throughout their website.
After reviewing Italist's mission along with reviews regarding the company, the team synthesized 3 main brand pillars that would help build the foundations of our project:
Upon research of online reviews, articles, interviews and various studies on customer behavior. The insights from our primary and secondary research revealed to us what luxury brand fashion consumers care about beyond pricing and shipping that influence their decision to buy.
An excerpt from a research article titled Emotional Branding Speaks to the Consumer's Heart, by Yong-Kyum Kim, a Professor of Retail and Consumer Sciences.
Mindy was one of our user-testing participants, who is a frequent buyer of luxury fashion brands.
One key aspect about Italist that separates them from other luxury brand retailers (besides price) is their connections with authentic italian boutiques. We felt that we could leverage this connection to develop a brand less focused on a place that offers the best price, but also one that provides an experience of an authentic, Italian shopping experience and atmosphere.
Part of our sprint involved ideating for How Might We's
Italist's customers are not being served meaningful content about Italian boutiques because the content is hidden between sale banners and hundreds of popular brands. From here we developed the following question that we needed to answer.
"How might we better surface Italist's partnerships with small Italian boutiques in order to provide a shopping experience that aligns with the values of luxury brand fashion consumers?"
The aim was to better connect customers with the brands and boutiques to build familiarity, communicate a sense of an authentic and Italian shopping experience without getting in the way of communicating Italist's discounted pricing.
The strength in the design solution lies in the content that we have chosen to surface for this site. These content design decisions were based on the key research insights and can be broken down into 3 key focuses:
1
Familiarity with boutiques to help inform purchasing decisions
2
Discover from which boutique their product comes from
3
Explore the nuances of each boutique through the offered products.
The intent with this homescreen is to not only introduce featured boutiques, but to communicate the feeling of walking down the streets in Italy past these boutiques and looking through their display window.
The main shopping screen featuring products sold from a selected boutique. This is as if a customer has walked into the boutique to explore the products being offered.
Detailed information relating to the product which was inspired by a negative review on Italist.com about the lack of information leading to heavy cognitive overhead.
A story about how this particular boutique came to exist, as if a customer were to walk in the boutique itself to personally get to know the owners.
Upon research of online reviews, articles, interviews and various studies on customer behavior. The insights from our primary and secondary research revealed to us what luxury brand fashion consumers care about beyond pricing and shipping that influence their decision to buy.
Dear van Gogh was a immersive media research project in Virtual Reality intended to explore immersion as well as the relationship between Vincent and Theo van Gogh. You visit Vincent van Gogh's memories from the periods of 1888 - 1890. As memories replay themselves through the paintings, you experience dialogue between Vincent and Theo van Gogh to understand what was happening during the period the painting was created.
Thomas Tran
Avril Yang
Tianxin Xue
Prototyping
Secondary Research
User Testing
C# Programmer
3D Modelling
Texture & Shader Artist
Unity
Photoshop
Oculus Quest
Figma
Blender
C#
4 months
Project trailer video
Vincent van Gogh is a world reknowned Impressionist painter in an era where the Impressionist movement was looked down upon as a practice for amateurs. He alongside other painters were creditted with pioneering the movement. The immersive experience intends to showcase a perspective of Vincent's life that is not commonly seen, that which is the influence his younger brother Theo van Gogh had on Vincent's life and career.
Before we even began to build an immersive experience, we questioned what we even knew about the word 'immersion', as it is a convulated word. A research paper titled 'Spatial Immersion versus Emotional Immersion, Which is More Immersive?' conducted by Dr.Andrew Perkis, a multimedia researcher at the Norwegian University of Science and Tech highlights 2 different types of Immersion:
1
Spatial Immersion: Sensory appeal triggered and maintained by the spatial qualities of the virtual environment. Does the environment make the user feel like they could walk through and interact with it?
2
Emotional Immersion: Arousal by the narrative content of a story. An example of this is when a major character dies in a story and the user feels genuine sadness from the death.
The research paper ultimately concluded that appeal to emotional immersion played a larger role in creating a complete and meaningful experience amongst participants. Whereas appeal to spatial immersion plays a more secondary role in appealing to empathetic feelings of participants. Spatial immersion is still important in that not appealing to spatial immersion in a virtual environment would often lead participants to feelings of motion sickness, vertigo, etc.
Letters written between Theo and Vincent are well documented, archived and accessed online which we used as in-experience dialogue. Vincent although unemployed would send his paintings to Theo for him to sell. In return for the paintings, Theo would provide a small allowance for living expenses as well as expenses for canvases and oil paint. Although many doubted Vincent, he really would not have the legendary artist known today if it was not for Theo's near unconditional support.
Sequence of paintings experienced by the user based upon events happening in Vincent and Theo's lives indicated by research
The team came up with the idea of painting on an empty canvas as a point to transition in to the next scene to create a sense of enticement to slowly reveal the scene a user will experience next.
An early iteration of the painting mechanic
We were not sure what type of influence having to paint a Van Gogh painting would have on users, whether it would create a sense of connection between themselves and the painting or not. So I designed a small workshop that is structured as the following:
1
Pick a Van Gogh painting from a series of given paintings
2
Take 1 minute to analyse the painting, then write down anything notable about the chosen painting whether it be an associated feeling or a specific detail, if anything at all.
3
For 10 minutes, paint the chosen painting on Aggie.io (a web-based painting and illustration app)
4
After submitting their painting, write down any changes in details they noticed or how they felt about the painting or the experience of painting.
Results of the workshop
Jacky was one of the 2 participants that chose to create a painting that invoked a feeling, as opposed to a replication.
Out of the 8 participants, 2 did not paint a replica of their chosen painting but rather painted an image that replicated the emotions they felt from analyzing the painting. However, in all instances, participants felt immediately intimidated by having to paint a Van Gogh, despite being told this was not a skill-required exercise.
Because we did not want users to take too long painting as the painting interaction is not the main focus of the experience, as well as feel intimidated by having to paint, I proposed to change the interaction slightly. Instead of actually painting in the virtual environment, we reveal an underlying painting with the virtual paintbrush to simulate a feeling of painting minus the time and emotional constraint.
The final iteration of the painting mechanic, which is cleaner and faster.
Early iteration of the model environment of Room in Arles done in Blender
Retexturing and volumetric lighting gave more life to the environment.
Eventually, we had to scope down on the events featured in the experience because of how long it took to model each of the environments. Although the public showcase of our project was well-received, I would regard the project as a failure to effectively encapsulate the development of the brotherly relationship in Vincent van Gogh's journey to become a reknowned Impressionist painter due to how much we had to scope down from the experience. The following video summarizes the entire experience.
Project journey video + walkthrough
Many lessons were learned from software skills, to scoping and time management, but the most meaningful takeaway for me was what I learned about the lives of Vincent and Theo van Gogh beyond what is commonly known. Often Vincent van Gogh is portrayed as a legendary artist plagued with insanity, but details of his life from the start and end of his career, as well as his dialogues with Theo revealed just how well put together his thoughts really were, as opposed to an artist that lost his mind.