An 80’s music player app with a dark mode and flashy neon colors for music enthusiasts. Retro feelings guaranteed!
Initial situation
Objective
To design the UI and 2 to 3 key functionalities for an 80s music player mobile app.
Target audience
The target audience is primarily 35 to 55-year-olds.
Competitor research
In times of online music streaming such as Spotify, Deezer, and Amazon Music, I was surprised to find some competitors of 80’s music players in the app stores. Soo…what do they have to offer?
Good:
- (overall) Black main navigation, white text: Easy to read
- (1st screen) The main focus of the first three images isn’t shown, but our mind completes it ‘automatically’. These are very good examples for the ‘Law of Closure’ and I like the creativity.
- (2nd screen) All proportions seem to be work out and fit vertically and horizontally better into the scheme. All songs seem to be numbered, have artist and song name and come with the additional info of the release date.
Neutral:
- The player is too simple to use to do something wrong. Simplicity and minimalistic behaviour overrule deep design and multiple functions.
Bad:
- The app randomly lists music. As a user, I don’t have a search function which is frustrating.
- Although it’s a cool guitar in the background, it makes it too difficult to perceive.
Good:
- Well…it plays music. And it was free.
Neutral:
- The player is too simple to use to do something wrong. Simplicity and minimalistic behaviour overrule deep design and multiple functions.
Bad:
- The app randomly lists music. As a user, I don’t have a search function which is frustrating.
- Just the song title. No artist, year of release, etc. Terrible!
- Awful relation between background and front. Font is almost illegible. Too busy and hurts both eyes and feelings.
- Red as primary color in the navigation bar is too aggressive and white elements are hard to read to sensitive eyes.
- There are no functions at all. You open the player and music starts yelling at you. There isn’t any other thing to do.
The Best 80’s Hits from ELI LABS APPS
First, I was surprised about other 80’s music player apps. Later on, I was surprised about how badly designed both were. There were even many other 80’s music player apps in the app stores. But all seem to have the same approach: Just play the music and earn money with the in-app-ads. All in all, it was disappointing to see, what they were trying to do with this great decade of music. No one really tried to put dedication and appreciation into their work.
Low wireframes
After analyzing the competitor apps, it was now time to design some first steps into the app. I was brainstorming my cerebral CPU, it was now the time to design the naked skeleton that should support the overall feeling once a user interacts with the app.
I must admit, that I won’t become the next Picasso anymore and my hand-drawings can’t even compete with the ones from a 7-year-old. Still, it’s enough to comprehend, what I was trying to convey with my pen and paper sketches.
Ideation
Okay, first things first. Now I know what competitors do and have already set up a bony skeleton with my low wireframes. But I miss the essential parts that distinguish my application from other 80’s music player apps. Where should I go?
Before I decide to run in a direction, I should at least take a look at a map to define my position. North, east, south, or west?
Damned, these ’80s were really an inspiration and not for nothing considered in modern media as ‘the last decade with real style’. So much to discover, so many looks and feels, and such a variety of visuals. Where should I start?
With a good Mood Board, I suppose.
Mood Board
Colors, colors, colors!!
So I designed and researched about ’80s typical album covers, fashion styles, and contemporary technology.
The mood board really helped me to later define my project and design it with the resources I gathered during the inspirational session with my mood board. Here are the major outcomes:
Font Type
I like the font type ‘Flash Rogers’ because of its bold appearance and toothed edges. Typical 80’s, very rough and placative! But then I figured, that this would be a bad choice for mobile devices and could serve at most as a stylistic headline.
I rather selected a pretty normal font type (SF Pro Text) than this extraordinary one. Better safe than sorry!
David Bowie
Especially the flash on David Bowie’s face caught my interest. Although it comes from his album ‘Aladdin Sane’ that was released in 1973, I always think about David Bowie with this funky flash in the face. And David Bowie was always an icon that survived decades and was really successful in the ’80s.
So why not choose him and the flash as the major visual anchor?
Colors
These soft pastel shades and gaudy neon colors are somehow typically 80’s style. Miami Vice, Aerobics, video games, illuminated advertising, Glamour, and Punk Rock. But all in all too bright for apps with a white background and too much of a signal color if it was chosen as the main attribute.
With all these aforementioned typical 80’s components in mind, I thought about experiencing the dark mode for my project. I love dark modes! Having a dark background and these typical 80’s colors as a strong accent would surely make an impression!
Technology
Technology was rapidly developing and former analog mechanics were digitalized step by step. It was an interesting transition phase. But we still talk about the early phase of them. Bulky forms, big screens, heavy control mechanisms, and linear regulators represent the 80’s for me.
Maybe this can help to convey the ’80s retro feeling inside the app!
Hands on mentality: Let’s start the real 80’s design!
Finally, it is time to clean brushes and open up the paint pot. Sharpen all pens and calibrate compass and grids. You know, what I want to express: All the necessary, but time-consuming pre-work is completed. Now the real fun part starts, that every designer is looking forward to: Rolling up the sleeves and acting out the hands-on mentality!
Mid-wireframes
I wanted to call this app first ‘Gr80vy – Your favorite 80’s radio station from the golden age of music’ and designed my mid-wireframes accordingly. After doing some more intensive research, I corrected myself and gave up that idea. Here’s why:
Problem with ‘the golden age of music’
Some say that the golden age of music was from the 1960s to the 1990s. Others claim, that the golden age ended with the ’60s. I also found out that this term was used often to describe classical music as a whole. To sum it up: This term is probably too broad and every generation likes to refer in a retrospective their favorite decade as the ‘golden age’. In any event, some music genres have their own ‘golden ages’ and heydays.
Problem with Gr80vy
The double OO of ‘groovy’ with the 80 was supposed to help the user to identify quickly the right decade. It was a provoked eye-catcher to quickly gain attention. Later, I found out after some additional research that both ‘groovy’ were a linguistic term that doesn’t represent the 80’s exclusive. It was heard amongst jazz musicians in the 1920s but is widely associated with the hippie era of the ’60s. It was in the 80’s not predominantly used anymore and already considered an outdated term.
Logo
Remember the flash in David Bowie’s face? The font type ‘Flash Rogers’? A colorful mix of neon and pastels? Half analogous and half digitalized technology? I was subliminally influenced by all of these components without taking notice of it. The melancholic feeling of being born in the wrong decade emerged stealthily during my work on the designs for this application.
In any event: Please let me visually show you the outcome I was describing before. I created this logo by myself and it is not part of another font type. The word ‘synthy’ comes from the synthesizer and is purely 100% associated with the ’80s as this was one of the principal audio tools to produce music.
Synthy – Flashy as the 80’s
I was trying to use the exact same color codes as the flash in David Bowie’s face. Depending on the digital image and brightness, it might not be as accurate like the original photo quality on the album cover.
#ED1651 – Pink Red
#077BCF – Water Blue
Drawing every letter by hand was almost a side project. I wanted to incorporate the S as the flash, but couldn’t risk alienating all letters as well in the same method. Especially the two ‘Y’ were challenging to design. N and T and H are the middle of the logo and should be therefore easy to recognize and comprehend.
The Dark Mode is Pitch Black with #000000 to ensure that other hues highlight the contrast of pastel or neon colors in the best possible manner.
And by the way: From now on we talk about the iconic age of music 🎸⚡️🤘🏼
High wireframes
From low to middle to high. It is now the time to shape the user flows into their final version. This project was a real joy and I had a lot of fun with the transfer to the high wireframes to inhale some life and spirit. Here is the outcome:
Pre login experience
I wanted to create a certain feeling before a user registered or logged in for the first time. Something I always wanted to call a ‘pre-login experience’. The idea for that term came to me when I was designing the screens for this app. In my mind, I wanted to convey the 80’s feeling already after a user downloads successfully the application from an app store and before the actual set up.
A user should have the opportunity to preconfigure the application and style it as desired. Thus, I researched and decided on four iconic music styles – New Wave, Electro, Punk, and Glam Rock. All of them with appropriate neon colors.
Although technology is rapid nowadays, I wanted to include a loading screen that vertically opens up with the loading progress. People are usually impatient. But remember the target group? We talk about users of the age group 35 to 55. These people are used to waiting and knowing loading screens. It’s a compelling feature that happens only one single time and is a literal real eye-opener.
So let’s go for the Punk color and rely on purple for the rest of that simulation. I designed all screens accordingly with this color code to style the accents of the app in the same look and feel:
#D6A1F7 – Lilac
#C568A5 – Purplish Pink
Surely, a user should have later the opportunity to reconfigure his color style. It should not be an exclusive functionality during the login and is always available to adjust later on.
Home screen
Three very horizontally chosen images on top with each 410px width to offer quick actions for the user. Other than that, icons have thin lines and appear as circles with a neon sign, all with 100*100px.
(v1) – I decided you use these thematic and ambient photos on top. To improve the visibility, I lowered the saturation to 0% to make them b/w and absorb all colors. They are still visible and every image has a radial overlay of the same color characteristics as we chose before during the pre-login experience.
(v2) – Originally, I had this version in mind with the original colors of the photo. But they make the visual experience too busy and are colorful overkill for users. Thus, I discarded it it went for the more artistic (v1) to prefer no colors and b/w.
The first screen of the search function come quite empty but encourages the user to tap the search bar. A total number of search results should be always visible inside of the search bar on the bottom right to give indication about the search term. 
In this example, I want to look for the most difficult search term ‘the’. I have too many search results of different categories and should use a category filter (e.g. album, artist) to find what I am looking for. All search terms are bold and in capitals to facilitate UX. 
A click on the filter icon of the previous screen helps the user now to decide what category filter should be applied. In my example, I only want to search for artists with ‘the’. 
We can see, that all search results now have the right category icon and that the number of search resulkts decreased. I want to listen to The Cure now.
Search a song
Equipped with an extensive database, you should always have the chance to search for your favorite song and not solely have to rely on a player that shuffles randomly music. Now is a good moment to show photos in their original colors.
1st screen: Empty state.
2nd screen: Being overwhelmed by search results with ‘the’.
3rd screen: Applying a filter to improve search results.
4th screen: Reduced search results of the desired filter category.
Play a song
Before I listen to the music of The Cure, I can swipe through the top screen area to decide which LP I want to listen to. I am on the artist level and have more options to chose from. Round icons are again 100*100px to ensure an easy selection and quick tapping.
1st screen: Artist level, main overview.
2nd screen: Music player, song metadata.
3rd screen: Lyrics of my selected song.
4th screen: LP cover to convey some more 80’s feelings.
Now I am on the artist level of ‘The Cure’ and can swipe through their album (covers). Icons below are again in round neon signs. A user has quick access to decide what to do now. 
I am listening now to one song of the previous selected album. This screen shows you the music player and the song meta data with all necessary information. The horizontally organized arrows allow more visuals for the music player. Icons have changed again. 
Instead of the generic meta data, I can also simply read the lyrics if I want to. 
If I like to see the the original LP cover to get some more 80’s feelings, I can select that as well.
Tired of ads? Go full version!
I felt reminded about the competitor apps. Both of them showed below the bottom navigation bar advertisements for mobile users. Somehow you have to finance these applications and want to get reimbursed for your efforts and the expensive licensing costs to stream the music. In my designs, I spared out the ads because I wanted to of course design very clean and neat screens.
You can see on the bottom of all screens an ad placeholder for the mobile leaderboard (320*50px). I would like to give users the option of a full version without seeing advertisements during the usage of the app. Thus I developed three different bundles where users can benefit from an increased performance level and more functions.
Get in contact
• Did you like this project?
• Do you have any questions?
• What would you do differently?
• Can you relate to the ideas?
• Are you interested to find out more?
• Would you like to collaborate on a solution?
Tell me!
You can also leave a message in the comment section at the bottom of this page!
www.traphil.com 