JANE ZHANG


ABOUT ME

I’m a Communication Design major at Washington University in St. Louis who is also pursuing minors in Human-Computer Interaction and Computer Science. In my work, I strive to explore a diverse range of narratives, perspectives, and approaches. My favorite part of the design process is the iteration stage, especially the moment where I finally arrive at the version that addresses everything I’ve been trying to communicate.

Recently, I’ve been interested in the nuances of multilingual typography and how the characteristics of different languages’ letterforms can be leveraged to enhance a concept across multiple linguistic demographics. Outside of my work, I love stories in any form, whether that means books, movies, or music. Lately, I’ve been watching Summertime Rendering and listening to Jack Stauber. 

Feel free to reach out for work or friendship, and check out more of my work below!

HOME / CLIENT WORK / ARCHIVE


   

YOASOBI ARCHIVE


The objective of this project was to create a web archive on a topic of our choice. I chose to make an archive of pop-duo YOASOBI’s creative work to showcase the depth and breadth of their songwriting and creative material.
View the prototype in a new window
Feel free to browse the prototype below!




BRIEF


The purpose of the website would be to organize an archive of lyrics for the Japanese duo YOASOBI’s albums and music. YOASOBI’s current site is primarily in Japanese, which could make it difficult for English speakers to follow along with their music. Thus, I wanted to include English, Japanese, and Japanese romanizations where applicable in their lyrics. I also wanted to use this archive as an opportunity to showcase their album art and their animated music videos, as they are expressions of the duo’s creative vision that often get overshadowed by the music itself.

The site is designed for YOASOBI fans of varying degrees, and should have enough information for newer listeners while still containing features for older fans. More specifically, it should cater to a target audience of English-speaking listeners and help them keep track of YOASOBI’s content.


WIREFRAMING


I developed some content hierarchies and layout sketches, and ultimately chose to wireframe the option that organized the discography by date and showcased around six images at once to avoid visually overwhelming users.




VISUAL STUDIES


Once I finalized the wireframe layouts via user testing, I explored different type treatments, color palettes, image treatments, and hover treatments. Since web accessibility was a huge consideration for this project, I decided to move forward with the more minimal, high-contrast design elements.




DEVELOPMENT


After finalizing the design and more user testing, I built out the full prototype. The biggest challenges were learning how to use components, implementing horizontal scrolling, and incorporating the animated videos with audio. I also spent a lot of time on finding and floating in lyrics in different languages, as I had to add them line by line. Because this process was so taxing, I only applied the trilingual approach to their most popular songs, though I hope to add in more languages later on.




REFLECTION


While I’m proud that I was able to organize such a vast breadth of content for this project, there are some details that I would like to improve on. I would love to float in all languages for each song (currently only “Idol” and “Racing Into the Night” have all languages incorporated), as I believe that would make the site more accessible to people of more diverse linguistic demographics. I also want to find a way to prototype the videos to shrink and pin themselves on scroll so that the users can view the lyrics and videos at the same time. That said, I’m glad I learned to use components, and I think this skill will make future prototyping much more efficient.