WORKS     FUN     ABOUT


MICROSITE FOR THE JAZZDOR FESTIVAL
Nov - Dec 2022


Landing Page High Fidelity Prototype  


This is a 5 week art direction and microsite design project for a design course at SFU. Our team envisioned a post-event microsite for the jazzdor festival which is a contemporary music scene based in Strasbourg, France that holds semi-annual festivals in indoor venues around varying European cities. They believe jazz is a means of self-discovery that can build communities which foster connectivity and exploration. I helped execute and study graphic qualities and principles for the art direction. I also helped co-design the site's interface to convey the content strategy.


MY CONTRIBUTION           TEAM                          TOOLS


Art Direction                          Daphne Borrel          After Effects
Interaction Design                Jaden Lee                 Figma
Content Strategy                  Abbey Perley
Copywriting                           Megan Yung                   
                                                 Emily Xu



1. CONTENT STRATEGY


I conceptualized the microsite by brainstorming and analyzing the brand's mission using a FigJam Board. Recognizing the festival's goal of nurturing connections within the jazz community, I determined that the microsite would enable users to relive cherished performances via an archive of older songs. Additionally, users can explore the meanings behind their favorite songs and artists, fostering a stronger sense of connection to the jazz community through dedicated song and artist pages.


FINAL CONTENT STRATEGY APPROACHES


①Create an Informative audio experience by providing the option to explore more about artists and songs, going beyond a traditional music player.




② Describing the nuances of jazz by conveying diverse meanings and analyses to help listeners better understand and appreciate the intentions of jazz artists




③ Creating stronger connections to jazz by including a page for the artists behind the songs, which reflect Jazzdor’s commitment to bringing the most creative voices of today’s jazz to their audience. 


  


2. MICROSITE INTERACTIONS

I thoroughly analyzed Spotify's user interface to ensure an informative user experience. I discovered that in order to ensure an informative audio journey for users, it is essential not to disrupt their listening experience. Spotify maintains a seamless audio flow by letting listeners to multitask without pausing their music. We integrated this finding into our microsite interactions, allowing users to freely engage with content.


FINAL INTERACTION PRINCIPLES


① Encourage Exploration using a snapping cursor that shifts the focal point to interactive elements 




② Conceal and Reward through textured images and micro- interactions on hover to keep users engaged




 ③ Seamless transitions using morphing geometry for a consistent web experience


LAYOUT AND EXPERIENCE


Screenshot of Low Fidelity Song Page I Drafted


I crafted an iteration of the microsite layout with a specific focus on incorporating features enabling listeners to skip through various song meanings, navigate to artist pages, and switch between playlists and songs – all within a single page. This design ensures their learning about content doesn't interrupt their listening experience. The final microsite is a result of refining my initial mockup. 


SONG PAGE



The final song page features performances from the latest Jazzdor festival and offers valuable insights, meanings, and background information on various aspects of the song indicated by the display and divided timeline, facilitating a deeper appreciation of the jazz artist's intentions and the intricate nuances of jazz. Additionally, on hover and click, users can freely navigate through the analyses.


ARTIST PAGE



Users can seamlessly switch between the song and artist pages, all within a single interface. They can access the artist page while retaining playback controls – play, pause, and skip – allowing them to explore comprehensive artist information without interrupting audio enjoyment. 




3.  ART DIRECTION

The team embarked on a graphic experimentation process to establish a distinct identity for the microsite. This process involved studying a collection of design qualities and principles, drawing inspiration from Dan Friedman and Ellen Lupton


Design Principles

from Ellen Lupton’s “Graphic Design the New Basics”

① Scale to Create Tension


Created by Catedra Gabrielle 

Large elements are placed within margins to create visual tension. Alternatively, small elements contrast elements of large scales to balance composition.

② Texture Dimension with Distinct Layers
Created by Dan Friedman


Texture adds dimension by separating elements of similar colors to create distinct layers. This also adds dimensionality in monochromatic compositions.


Design Principles

adapted from Dan Friedman’s work

① Images within Geometry to Support Type

 Created by NNU Magazine
 
Images are contained within geometric shapes to act as supporting elements that shift the focal point onto the type.


STUDYING THE PRINCIPLES


To dig deeper, we first studied and explored a set of 3 design principles and 3 qualities by generating multiple sketches. I generated multiple sketches using the principle scale, shown in posters 1-2. We decided on a combination of one design quality and two principles. After given content we further iterated this combination and formed possible art directions for further refinements over the span of three weeks shown in posters 3-4. All iterations included my use of scale, scale to create tension. 


Samples of my contributions

 


① Studying Applications of Scale



② Iteration with Jazzdor Content



③ One of the final iterations co-designed with Emily Xu
CONVERGING FROM 3 DIRECTIONS

After experimenting with three methods of incorporating images into geometry, scale for tension and texture seen in all these iterations, only one of them was further refined for the digital microsite. 

 


SELECTION OF DIRECTION

We selected this art direction as we discovered the applications of our qualities and principles remained across large, medium and small forms. In addition we found a more purposeful application of texture used within the geometric shapes and a better font pairing. 



Application of our art direction on street banner and string cloth

TYPE COMPLIMENTED BY GEOMETRY




Geometric shapes are placed inside type bowls and counters to accentuate or contrast the curved joints of PP Rader. GT Walsheim contrasts the curves due to its lower-contrast, geometric form.




TYPE STRUCTURE




Consistent tracking between letters allows for a unified type structure across all three pages. (IMAGE IS NOT TO SCALE)




COLOUR TO SEPARATE CATEGORIES




Three main colours are used to represent the semantic differences in mood between the playlists. Yellow is used as an accent colour as it is complementary to blue, triadic to red, and close on the colour wheel to green.




HALFTONES FOR DEPTH


Images have 12-pt halftone texture applied to prevent them from blending into large forms they are close to. In monochromatic or limited color palettes, they add dimension.




4. REFLECTION

”DON’T DESIGN IN YOUR HEAD”


One of the key lessons I learned from this project is to not design in my head. While I initially believed that striving for complete originality would result in a superior design, I learnt that drawing inspiration from other design precedents will create something valuable.


”IDENTIFYING PATHS WORTH PURSUING”

Even though I maintain a detached perspective towards ideas, I learnt to recognize when to persist with an idea rather than abandoning it too early. I acquired the skill of identifying which ideas are worth pursuing and investing time into and which ones should be discarded.
   CONTACT ME
  
  DMB7@SFU.CA / LINKEDIN