Nostalgia UI: Soundcloud Walkman Widget

Charlie Walsh
Sep 20, 2017 · 3 min read

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

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

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

Thanks for reading! Comment, Clap, and Subscribe!

Charlie Walsh

Written by

UX/UI Designer From Brooklyn, New York. 30 Days, 30 UI Designs. https://Charles-uxdesign.com. https://www.linkedin.com/in/charles-a-walsh-7b25a373/.