Jazzdor Dots Branding System
Within a five-week period, art direction and graphic experimentation with posters evolved into content-driven interaction design through the analysis of strong precedents that were guided by our design qualities and principles. This all culminated into a final microsite with purposeful content design and informed art direction. Encouraging exploration of Jazzdor Festival's varied music through expressive & experimental micro-interactions.
This project is not affiliated with Jazzdor in any way. It is a case study done for an academic project.
Role
Brand and Motion Designer
Timeline
5 weeks
Team
Daphne Borrel
Emily Xu
Abbey Perley
Megan Yung
Tools
Figma
Illustrator
After Effects
Context
Jazzdor Festival is bold.
Our direction for Jazzdor involves a unique type form which allows us to play with shapes around the lettering and grid. Below are unofficial examples of the brand in use.
Setup
Translating print to digital by using "Conceal and Reward" to reveal content through user's micro-interactions keeping them engaged.
Start
Playlist Home
As the song plays, the user can view meaningful analyses and information about parts of it, skipping forward by click the upcoming text or sections in the player below.
Learn
Uncover
Song Meanings
The user can view meaningful analyses and backstories about a song while simultaneously listening through it.
Explore
Uncover Images
Concealed images (through half-tone texture) are revealed when hovered to showcase new information. This provides another interaction avenue for those who may get tired of reading.
Easily Skip Forward
Clicking on the segments in the player below gives the user free reign over elements they want to explore.
Learn about Artists
Dive even deeper into the songs through discovering the artists behind them and the instruments they play.
Retrospective
If…
developers were to create this website in real-life, it would be a nightmare. For this project, our team really wanted to push the boundaries for what was possible in UI interaction design and didn't give ourselves any false constraints. Due to this, the website would be difficult to implement and we would likely pull back on many interactions in the future.
I learned…
how to work in a collaborative workflow with programs that would otherwise be done individually (i.e. After Effects). We distributed different pages amongst members of the team, as well as organized and created a way for us to easily send AE files.
If I could go back…
I would try and experiment more with other possible micro-interactions and layouts for our page. Our team wasn't able to nearly experiment and try things out due to tight deadlines. I would also start with storyboarding to visualize how the interaction would work before animating on a still mockup right away.