Contributors

Josel Canlas – Graphic Designer

Goal

Create a social media app that specializes in sharing music.

Narrative

The app I made was a social media app where users could share their favorite songs through Instagram-like posts. These posts would contain the album cover and a short caption from the user. On Groove, there is a feature that lets users paste a link to their favorite song when posting that would fill out the song information automatically. All the user would have to do after that is to write a caption. Without the link to the song, users would put in the song name, artist(s), and caption manually. With the information about the song (song name and artist), Groove would search popular music apps (Spotify and Apple Music) to find a song with the same information. This song would be displayed to the user. If it is the correct one (according to the user), the album cover will be displayed along with an audible preview of the song. If it is not the song the user was looking for, Groove will prompt the user to paste the link to the song. This would make the process of posting easier than any other app since it is so simple.

Proposal

Before designing, I created a proposal to approve the app. This defined the app and provided a competitive analysis. I chose to analyze Spotify and SoundCloud. SoundCloud does have a sharing feature by reposting songs, but the overall site is mostly used for music listening. Spotify has the “Spotify Clips” which are short videos with music, like TikTok. Groove stands out from these apps since it is specifically a social media app that focuses on short sentence posts.

Low Fidelity Wireframes

Included in the proposal were 5 mobile screens made in Illustrator. These screens were home, Expanded post view, User page, and two user post screens. I started by making a 4-column guide for each screen. I used these guides to ensure consistency in my designs. No color had been implemented into these yet. I had the idea of keeping it black and white since most album covers include many colors.

Mockups

Then, it was time to implement color and imagery. The posts were all the same for hypothetical purposes. The main Illustrator tools I used were the True Type Rotate and perspective grid. True Type Rotate creates a rotation on each individual letter. This supported the fun mood of the app. Perspective grid was used to create the speakers of the wordmark. The speakers ended up looking like eyes though since I kept them in a circle shape. It works either way if the user views them as eyes or a speaker.

* Album cover used is from "FALL ON ME" by DizzyEight feat. Errol Allen, Musicality