Gatefold

A Spotify-embedded interface that revives and reinvents the visual experience of listening to your favorite music.

THE PROJECT

Problem
Since music went digital, listeners have lost much of the visual experience that accompanied physical forms of music, like vinyl records. The goal for this project was to integrate aspects of that experience into the music streaming space.

Target Users
The target users for this project were tech-savvy music lovers—millennials who consume their music almost entirely through streaming services like Spotify.

Role & Team
This was my senior thesis project during my time at the Ohio State University. I acted as sole researcher and designer for the entire project, but worked with potential users during the research phase and continuously reported back to a team of four other designers to give and receive feedback on our respective projects.

Process
After defining the initial problem, the project went through a semester-long research phase. I conducted generative research using methods from Bruce Hanington’s Universal Methods of Design, both working in the field with potential users and preforming research exercises with fellow designers in the studio. During this phase, quite a few things were discovered that evolved the initial problem statement and expanded the scope of what I thought I would be designing. By the end of it, the research was distilled down to a document of insights which would inform the design phase.

The design phase was short. We had just a few weeks to not only solve for the problem that was defined in the previous semester, but to package that solution into a well-documented, demonstrable and branded product. I created a name and brand identity for the product, designed critial screens for both the front- and back-end interfaces, created a demonstration video of the product, and put together documentation and promotional material to present the project to colleagues at our thesis show.

PRODUCT CONCEPT

Name & Brand Identity
The gatefold of a record sleeve was the most robust format for album art when it came to vinyl records. This was used as the product name and served as inspiration for the brand identity as well as the structure and behavior of the interface.

The Listening Experience
The most exciting thing that came out of the research was a list of specific qualities that users enjoyed about listening to vinyl records. Incorporating these qualities into the music streaming space was Gatefold’s opportunity to really explore new territory. While I fully embrace quantitative research and the use of data to drive design decisions, I also believe that investing in an understanding of the more ambiguous needs and desires of users can help make a good experience great, and help create a product that users fall in love with.

The front-end component of Gatefold is an interface embedded within Spotify—a digital “booklet” filled with kinetic artwork, robust content and engaging interactions that bring those analog qualities that users love into the digital space.

Artwork On The Go
This project took a huge turn during the research phase, when a couple of colleagues pointed out to me that the problem, as it was framed, would likely lead to a solution that worked great on a desktop computer for a user focused on nothing but the music, but that’s not how most people listen to music. In response, I created a take-home journal for participants to record what exactly they were doing while listening to music. I found that they were almost always engaged in some other activity and were often away from a desktop computer. I learned that I had to design a solution that would work for users in whatever context they happened to be in while using the product.

For the listener on a mobile device, the interactions and content of Gatefold are toned down in favor of responsive artwork that is integrated into the lockscreen of the mobile device. This allows them to enjoy some of the key features of the product while working, going for a run or cooking dinner.

The Booklet Design Tool
Great experiences and products aren’t designed in a vacuum. As designers, we need to consider how what we are designing works as part of an overall system. This is what prompted me to not only embed Gatefold within an existing streaming platform, but to consider how the front-end experience would actually be created.

From a business perspective, there is motivation for the musical artists and their partners to create Gatefold booklets to accompany their albums. In theory, a better experience equals more listens. More listens equals more money. If these are the users that would be creating the booklets, the tool for creating those booklets would need to be simple, intuitive and accessible. I quickly iterated a critical screen of the back-end booklet design tool. It utilizes templates that non-designers can populate with imagery, lyrics and other content while computer algorythms create unique animations out of static artwork.

RETROSPECTIVE

What Worked
I was very excited about the experience that I got to bring to life with this concept. In the time since this project was completed, I have got to watch Spotify experiment with some of the same features that were part of Gatefold: real-time lyrics, kinetic lock-screen artwork and messages from artists to listeners. I believe that all of the time dedicated up front to research helped frame the problem correctly and work through some high level design challenges, which led to such an experimental concept.