Prototyping | UI | UX

Cassette Mixtape App

A mixtape app for the future and the past

Main Project Image

My Role

Market research (shared with Keven Thompson)
User personas
Wireframes (shared with Keven Thompson)
Prototyping (shared with Keven Thompson)
User testing

Overview

Cassette is the modern interpretation of the nostalgic experience of the making a mixtape to share with friends. Using images, videos, sketches, and your music you can create unique and personalized mixtape experiences.

In an increasingly tech-focused world peoples’ music listening habits have become increasingly drag and drop and music lovers feel the desire to be able to curate custom mixes for their friends. Existing music applications allow you to listen and even compile playlists but beyond that they do not allow for the personalization and storytelling that the user desires.

Music lovers want opportunities for creativity when compiling and sharing music and in a fast-paced, always-connected world.

Cassette is an app powered by Spotify that allows you to use and access all of your Spotify content. Within the Cassette interface you can create custom mixtapes audio transitions, voice overs, and sound effects. In addition to the audio curation, you can build a corresponding visual experience using still images, video, or sketches that you create on your phone or tablet within the app. You can then share your mixtape with individuals or the Cassette network. 

Through market research, user interviews, and a survey we defined the features that would be incorporated into the app.Using the data from our market research, one-on-one interviews, and survey developed user personas to help us better understand the Cassette user and to explore how various users would experience the app. 

cassette_titles-userprofiles

cassette_users

Once we had defined our user we built a feature list and transitioned that into the app structure. We brainstormed on the white board working through various iterations of the app structure in order to meet our various use cases.

process

cassette_titles-prototyping

As we developed paper protoypes, wireframes, and ultimately visually designed screens we continued to test the various iterations to find the best solution for the user. We found that a lot of the user experience was in the micro-interactions in the interface. Using Pixate and After Effects we built an animation that expresses how the interactions would work within the screen.

paper-pts

cassette_titles-usertesting

The paper prototypes were tested on five users and they were unclear about the menu structure and were not particularly interested in the method for creating the mixtape. We knew our users wanted to craft something but through the first round of user testing we found that they really wanted to feel a tangible interaction with the media.

In the second round of user testing we started building the visuals while incorporating the user feedback. We simplified and consolidated the menu and incorporated a “timeline” build feature that allows the user to drag and drop their content to the mixtape.

cassette_wireframes

This tested very well with users so we built the visuals out further into our final screens for the mobile interface. The interface incorporates hand-drawn lines to reinforce the elements of nostalgia that the users wanted to feel. In addition we built out the audio and visual timelines that give the user the ability to drag and drop, crop, and manipulate their media and they create their mixtapes.

cassette_screens