This is the most impressive UI skill

One fine day I stumbled across a YouTube video of Design Course channel of #RandonUI challenge. I will recommend watching his video to know what it is about, as the challenge seemed interesting, I chose to start designing using the requirements.

This will let new users experience how real-life ideation process would look like and create an end-to-end quick project for their portfolio. While on the other hand designers who are just looking to explore new challenges like me will also have fun designing something new aside from their usual daily work.

Design Course YouTube video:

My try on RandomUI

I used Google's random number generator and received the following requirements for Colors, Fonts, and Idea.

Gradient:

The above gradient is a combination of # 6A82FB and # FC5C7D. I kept the gradient throughout my design but also using the individual colors of the entire gradient in between to create a visual color balance.

Fonts:

I received Abril Fatface for Medium headlines and Lato Regular for body copy. Since Latos had different styles, I used Black and Extra Bold of Lato font styles along with Regular.

Since Abril Fatface Regular font was harder to read in lighter backgrounds with bright colors. So, I had to use different styles in order to keep the balance of visual representation of information.

Application Idea:

I got #78 – Song Finder App

A song finder app that will let users find the title of a particular song on the basis of the tone or any words provided by the user. It may also provide a link to download the song or listen to it online.

Utilizing all the requirements in the app idea, I skipped the option to provide a download journey for the users on purpose. Since now a day most of the users prefer using music apps like Spotify, iTunes, Google play, and so on. That has reduced the volume of users downloading a song on their phone. Also, it has become difficult to download music and there are a number of other platforms where they can download in an unethical way. To avoid copyright policies of music industries and keeping the app on an ethical route is what I chose. That is why I only provided an option to listen to music online on other apps, this will let the app collaborate with the giants of music streaming platforms.

DESIGN PROCESS

Ideate

During the ideation stage when I received all the requirements mentioned above, I started working on scope of this project which is a Song Finding App. Then I laid out all the solutions I will need in order to design this app. Once the Skelton of the entire process was laid out, I moved to actually researching and designing.

Research + Design

Wireframing - I started with a wireframe for the Hero page which will be the home page of the application. This gave me an idea what I should be looking for when converting into a Hi-fi design.

Since I was trying to create a simple interface which will not overwhelm users and provides user control. To understand that I needed to know how the competitors have created something similar to what I want to approach.

Competitive Analysis - That is when I started my competitive analysis on Google researching all the different song finding apps there are in the market. I saw Shazam, Sound Hund, Musixmatch, and BeatFind had pretty similar layout which I was trying to implement. That was helpful for me to now analysis the icons of those layouts and see what they are missing which I can try to implement in mine.

I noticed none of the top music finding apps had an actual music symbol on their hero page. Taking a note of that I thought if I can combine the search and music symbol together. That is when I found two of my best picks among all I researched. After trying to play with the animation in my head and creating several different prototypes to see which fits the best, I finally chose the first Icon to be my finder UI in the app. Though I changed the blue music symbol into white and added grey/white transparent circles behind the finder. I also reviewed Figma community for some icon ideas and music app designs to visualize how I want to approach the design for the Spotter app.

User Flow - Once I had all the information, I needed to begin the actual UI design. I created a quick user flow to understand how the interaction I want the users to flow in. This allowed me to give user control on the interface and experiment with the usability of my flow in form of prototype along the way. User flow can be viewed on my Figma community page.

UI Designs - Referring to the user flow I started designing one page at a time when I finished designing and prototyping the hero pages my next challenge was to show the users the song that the app found. With the simple layout which lets the user know "Here is the song you were looking for!", that is what I wanted the users to feel.

In the picture above the left design is what I created first. Then reviewing the layout and asking myself "what do you feel?" it did not call out to me "YES! look here. So, it seemed it was missing something and then I tried filling the space between header and the first element with "SPOTTED" text. With this little change it made a huge difference in the design.

For the next page once the user clicks on 'Listen here' assuming they don't have an account will be navigated to 'Sign in' page where they have a choice to login or create an account. When the user logs in they will be navigated to the song's trailer playing for 25-30 sec. For this page I used Lino A.A.C's design layout and customized it to fit my branding.

Since this design was missing the key element of navigating the users to other music platforms if they want to listen to the full version of this song. That is when I tried implementing Spotify's Ad design which forces user to listen to the Ad and does not provide control except where they wanted the users to click which is 'Learn more' CTA button.

This is when the actual research and design ended and I moved towards implementing my own ideas in terms of navigation. As you can see there is footer navigation provided which has three functionalities.

Users can check out the Artist information
Users can see the Album of this song
Users can look at all the songs and albums they have found using Spotter.

Final Designs

Comment?

Don't forget to leave feedback since this was a fun project I got to work on. I would like to hear any suggestions you may have and I will try to implement further in my designs. Last but not least check out my simple prototype in 'View the Demo' button below that was created for usability testing.

View the Demo