Bigger than the Grammys
2022 / Interactive News
An interactive feature story investigating the legacy and meaning of the Grammys to non-English-singing superstars consistently snubbed by the institution.
I worked with a developer and writer and took lead on art direction and creating the photo illustrations. I also contributed to reporting and writing.
An interactive feature story investigating the legacy and meaning of the Grammys to non-English-singing superstars consistently snubbed by the institution.
I worked with a developer and writer and took lead on art direction and creating the photo illustrations. I also contributed to reporting and writing.
Background
This project is the culmination of a three-month “Visual Storytelling for the Web” class, instructed by Hilary Fung, the deputy creative director for engineering and graphics at the San Francisco Chronicle.
Our three-person team was tasked with reporting and coding an interactive news story from scratch. We wanted to do something related to the Grammys, since the 53rd Awards would happen right in the middle of our quarter.
The focus turned to language — and by extension, ethnicity and race — in music and the discourse bubbling over the past few years surrounding artists like BTS and J Balvin. These are some of the globe’s biggest pop stars, yet the Recording Academy has failed to award them a single award.
We aimed to do a deep dive into why some artists, whom the Recording Academy have consistently marginalized, still sought the recognition of this institution and wanted to bring in the topics of pop music, representation, and critical race theory.
Our three-person team was tasked with reporting and coding an interactive news story from scratch. We wanted to do something related to the Grammys, since the 53rd Awards would happen right in the middle of our quarter.
The focus turned to language — and by extension, ethnicity and race — in music and the discourse bubbling over the past few years surrounding artists like BTS and J Balvin. These are some of the globe’s biggest pop stars, yet the Recording Academy has failed to award them a single award.
We aimed to do a deep dive into why some artists, whom the Recording Academy have consistently marginalized, still sought the recognition of this institution and wanted to bring in the topics of pop music, representation, and critical race theory.
Process
We started with brainstorming sessions, drawing low-fidelity prototypes of the article, then creating a high-fidelity design in Figma (which I took lead on and is shown towards the bottom of this page).
As the two journalism students, the writer, Kim, and I completed the bulk of the research, interviewing, and writing. We sought out sources in the Recording Academy, the music industry, music publications, and academia. The other member, Jordan, was a computer science major and took lead on the development.
Our work processes thus took place somewhat simultaneously, though as the member leading design and art direction, I tried to work between all areas, using the story to shape the design and trying to implement my design in Jordan’s code. I elaborate in my reflection, but I wish I took more part in the programming because there was a gap in my design vision and the final product.
Design Choices in Prototype
Playing with the idea of status through the literal size of the headline, juxtaposed with a representation of a shattering public image.
Section headers are collages, using the jagged cutout element from the headline illustration. There is a heavy grain, evoking the image of the static from a TV (playing with the idea of the Grammys being broadcast).
Interactive: A barrage of tweets that pile onto the screen one by one as the reader scrolls. It’s meant to feel chaotic and angry, like that night on Twitter was.
Interactive: Side-by-side comparison of primarily-Korean and primarily-English BTS songs. Each block of lyric and analysis is meant to pop up one by one as readers scroll. The song would be playing when the mouse is hovering.
Interactive: Photo that contains dots that, when hovered over, reveal pop-up boxes of information about the person/location/object. The selected box color is pulled from the respective section header.
Interactive: Excerpt from Frank Ocean’s letter to the Grammys where certain phrases, when hovered over, start annotation animations that then reveal analysis on the side.
Prototype
The prototype (without animations/interactivity) I created in Figma.
Outcome & Reflection
Take a look at the final story here!
The final deliverable did not turn out how I envisioned, to be honest. Because of time constraints and the fact that our team only had one developer with React knowledge and experience, we didn’t get to implement many of the interactive elements we had planned.
Though the three of us had planned to each help out at each step of the process, our workload ended up being rigidly divided, especially between development and reporting. In the future, I would want to work more fluidly between designing and coding and be more involved in actually programming. If I were to redo this project with the same time constraint, I would help code this with the developer in HTML/CSS/Javascript, since I’m now more familiar with those languages, and would be sure to communicate my prototype design choices at every step of the programming.