Synthy

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 and 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?

Best 80s Music from THISOTHO DEV

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 handdrawings 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 into a direction, I should at least take a look at a map to define my position. North, east, south or west?

Damned, these 80’s 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.

ddsads

Mood Board

Colors, colors, colors!!

So I designed and researched about 80’s typical album covers, fashion styles and contemporary technology.

The mood board really helped me to later define my project and design it with the ressources 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 toohed 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 80’s.

So why not choosing 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 chosen as 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 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 80’s retro feeling inside the app!


Hands on mentality: Let’s start the real 80’s design!

Finally, it becomes 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 act 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 60’s. 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 to 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 helping 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 reasearch that both ‘groovy’ was a linguistic term that don’t represent the 80’s exclusively. It was heard amongst jazz musicians in the 1920s, but is widely associated with the hippie era of the 60’s. It was in the 80’s not predominantly used anymore and already considered an outdated term.

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 all of these components without taking notice of it. The melancholic feeling of being born in the wrong decade emerged stealthy 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 80’s 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 Bowies face. Depending on the digital image and brightness, it might not be as accurate as 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 to alienate 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 it 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 download 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 for 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 wait and know 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 always available to adjust later on.

Home screen

Three very horizontolly 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 a colorful overkill for users. Thus, I discarded it it went for the more artistic (v1) to prefer no colors and b/w.

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 meta data.

3rd screen: Lyrics of my selected song.

4th screen: LP cover to convey some more 80’s feelings.

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 spaceholder for 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 increasing performance level and more functions.


Get in contact

• Did you like this project?

• Do you have any questions?

• What would you do different?

• Can you relate to the ideas?

• Are you interest to find out more?

• Would you like to collaborate on a solution?

Tell me!

You can also leave a message in the comment section on the bottom of this page!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.