Jazzdor Microsite
Role
Timeline
Tools
create a brand that is flexible for both print and web to encourage listeners to learn more about jazz?
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.
print to web
A snapping cursor that "pushes & pulls" users to interactive elements to promote exploration.
"Conceal and Reward" revealing content through user's micro-interactions keeping them engaged.
Seamless transitions through dynamic menu elements that change shape and position allow for a cohesive web experience.
01 // PLAYLIST HOME
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.
02 // Song analysis page
The user can view meaningful analyses and backstories about a song while simultaneously listening through it.
inspiration gathering
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.
inspiration gathering
Clicking on the segments in the player below gives the user free reign over elements they want to explore.
inspiration gathering
Dive even deeper into the songs through discovering the artists behind them and the instruments they play.
Exploration
Initial interaction explorations were the stepping stone towards our final interaction principles, but were far from being a cohesive visual language due to their lack of consistency from page to page.
Appendix
Poster Iterations
Internship reflection
Retrospective
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.
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.
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.