Nostalgia UI: Soundcloud Walkman Widget

30 UIs, 30 Days: Day 21

Sipping my morning coffee, I felt the warmth of nostalgia. I was talking to my roommate about Aretha Franklin when I was suddenly transported back in time to my parents tiny apartment.

I was the wee-age of 5. My mother was sitting next to me, and I had her Sony Walkman playing Prince cassettes (her choice not mine). That walkman was the gateway to my never-ending fascination with music composition and it’s beautiful affect on everything it touches.

I listened to everything from Minor Threat to Jackson 5 Greatest Hits on that bad boi—I needed a way to repay it for it’s service. I was then transported back to the present with an idea planted in my head…

An ode to Soundcloud AND Walkman

Before I explain the newly planted seed and it’s harvest, here’s a quick summary of my experience with Soundcloud, the music platform:

From my love for music later came an affinity for audio production. I spent countless hours creating remixes and original albums under the alias REverb Rock.

Here’s my first remix. it has over 22k Plays!

I then started using Bandcamp and Soundcloud to post my music.

First Album Art. Listen here

Soundcloud eventually lead to a record deal with Emerald & Doreen Records, a boutique label based in Germany. I do it strictly for fun and I’m still actively producing, writing lyrics, and sing under the alias Charles Bordeaux.

Listen Here: https://soundcloud.com/emerald-and-doreen-rec/sets/charles-bordeaux-no-more

As a thank you to the intimate history I have with the Sony Walkman and Soundcloud, I began on a concept idea for their desktop experience.

The Walkman Widget: Wireframes

The walkman widget would be a redesign of the current music player widget, using all the same elements, minus the waveform viewer. I got started in Sketch 3.

Initial Sketch
Sketch #2

I placed the button at the top of the widget to resemble an original Walkman, with a long play button.

The tape real also would also move to show how far along you are in the song, starting with a full real on the left, and an empty reel on the right, ending in the reverse scenario.

Sketch 3
sketch 4

To further mimic the walkman, when you press play, the button goes down into the widget. I kept the orange color as feedback indicator for the user.

Final Thoughts

There’s a couple usability issues with this design right off the bat, main one that the buttons resemble tabs. One way to fix that could be to make the icons on the walkman top buttons float above the button. This will make it less likely to be mistaken as a tab.

Thanks for reading! Comment, Clap, and Subscribe!