top of page

MoodToon

Translating a record player into a digital mood-based music streaming app.

01. Background Information 

The Challenge

The focus of this project was to identify the components of a physical interface and translate their purpose into a digital UI. I decided to use a record player as my physical object and translate it into a music streaming app designed to help users discover and enjoy music based on their current mood or the vibe they want to cultivate.

 

The Objective

I planned to have the app's core feature revolves around mood-driven digital records and recommendations that adapt to the user's desired emotional state.

02. Research

Benchmarking

I began by finding three additional instances of an interface that could accomplish the same goal as the record player I had chosen. I considered several questions such as:

  • How are these interfaces similar or different?

  • What affordances, constraints, signifiers, and feedback do they offer?

  • What different behaviors do these interfaces facilitate?

​

These were my findings:

  1. iPod

    • Similarities - Both allow music playback and selection of tracks.

    • Differences - Digital players are often portable and can hold numerous songs, unlike a record player.

    • Affordances - Compact size, easy navigation through menus

    • Constraints - Battery life limitations; storage capacity may vary.

    • Signifiers - Clear buttons for navigating menus and controlling playback.

    • Feedback - Display shows track information and battery life.

    • Behaviors Facilitated - Portable listening, organizing music libraries.

  2. Bluetooth Speaker

    • ​Similarities - Both allow playback of music, often from multiple sources.

    • Differences - Can stream directly from various devices.

    • Affordances - Wireless connectivity, ease of use with multiple devices.

    • Constraints - Dependence on device battery life and compatibility.

    • Signifiers - Simple icons for power and Bluetooth connection.

    • Feedback - Sound quality indicators.

    • Behaviors Facilitated - Group listening and multi-device compatibility.

  3. Spotify

    • ​Similarities - Both interfaces allow users to listen to music. They provide options to select and play songs or albums.

    • Differences - Offer a vast library of music, whereas record players are limited to the user's physical collection.

    • Affordances - Easy access to playlists, search functions, and recommendations.

    • Constraints - Requires internet connection; may have subscription cost

    • Signifiers - Play, pause, next track buttons are clearly indicated.

    • Feedback - Visual indicators

    • Behaviors Facilitated - Discovering new music, creating playlists, sharing songs.

​​

​

Hunch Sketches

After benchmarking, I quickly sketched out 10 unique ideas for a digital interface of the record player. â€‹â€‹

​

​​

​​

​​

​​

​​

​​

​​

​​

​​

​​

​​

​​

​​

​​

​​​

​​

​

​

​​​​​​​​​

03. Ideate 

Site Map + Workflows

Using the information I gathered from my research, I began developing the structure of the mobile app focusing on the main workflows. 
 

​

​

​

​

​

​

​

​

​

​

​
 

​​

​​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​​
​
​
​​​
​
​Wireframes

Following the workflows that I had created, I hand-sketched some wireframes to conceptualize the UI design of my app. I then transformed these sketches into low-fidelity digital wireframes. 

​
​
​
​
​​
​​
​​
​​
​​
​​
​
​
​​
​​​
​​
​​
​​
​​
​​
​​
​​
​​
​​
 
Critique

After creating these wireframes and turning to peers for suggestions, I found that the most common feedback I was receiving was "What makes it different from Spotify besides the design?" Reflecting upon this, I realized I had lost the original "mood-based" music streaming aspect that I had initially centered the app around. I then committed to making some changes. ​​​​​​​​​​​​​​

04. Prototype

First Iteration

Using a workflow that began with selecting a mood, I created mid-fidelity wireframes of my app. 

 

 

 

 

 

 

 

 

 

 

 

 

​

​

​

​

​​​

​

Critique

I performed user testing, analyzing which heuristics were missed and which were demonstrated. While watching my participant navigate through my screens, I noted what I would look to change in my final deliverables.

 

  1. Clarifying song information

    • Feedback: ​Participant said she knew what the song was because of the title on the image, but wouldn’t have known otherwise​

    • Adjustment: I would illustrate definitely include the song name and artist, and further add information such as time/length of the song.

  2. Labeling mood circles

    • ​Feedback: ​Participant didn’t understand what the circles were. What do they do? What do they mean? Are those the moods of that specific song?

    • Adjustment: I would add a card attached below the song image and include a title of “mood tags” to indicated what they are.

  3. Adding mood button​​​

    • ​Feedback:​ Participant was confused as to where to go from here. Asked how she could accomplish the task of adjusting the moods.

    • Adjustment: I would add an icon that would indicate where to go to remove/add moods to the record. Maybe a smiley face?​​​​​​​​​​​​​​​​​​​​

​​
​
Final Designs

​​

​

​

​

​

​

​

​

​

​

​

​​

​

​

​

​

​​

​

​

​

​

​

​

​

​

​

​

Conclusion

With analogs, one feels a tangible, physical and nostalgic feeling. In terms of the record player, a sense of ownership and personalization is thoroughly exhibited. On the opposing hand, a digital music streaming app is easily accessible and convenient, rich with features. Due to the lack of interaction and warmth with an interface, I wanted to give a more personalized sense to a digital app, giving a user the chance to call music truly theirs.

​

bottom of page