Overview
I wanted to design an app that had more socially dynamic aspects. Most music apps are only for music and lack social connectivity. The primary objective of this app is to create more in-depth social interactions between people with similar musical tastes. Music Player app will allow the user to leave comments, create playlists and follow the musical endeavors of fellow users.
Goals
Enhancing user experience
Encouraging social engagement
Providing a consistent and responsive experience
Increasing interaction
Encouraging engagement
Figma | Sketch | Invision
Researched competitors
Researched Successful User Friendly Apps
Preliminary sketches and ideation
Created detailed wire frames in Figma
Designed Logo, icons and artboards in Sketch
Established brand identity and design solutions
Wire Frames
After doing research on similar music apps I decided to sketch up what screens I think would be important to have in the app. My idea was to have a login screen, home screen, discover screen and profile screen. I also sketched up other ideas for a screen like how a friends list would look. For the wire frames I used Adobe fresco to draw some rough sketches.
Detailed Wire Frames
After doing more research on my target audience and what other apps do that is successful I decided to add detail and finalize my screens. I narrowed down my screens to 4 so that I can spend more time on what I want each individual screen to accomplish for my user. I created the screens using Adobe XD and created annotations to show some functionality.
Inspiration
When I was coming up with the colors for the app I wanted them to be associated with something that reminds me of music. The first two things that came to mind were the 70s which was a huge era of music and the second one was summer. During the summer I feel like is when most people play music for example, BBQ s, Graduation Parties, Vacations, Camping, Road trips and Summer Holidays. What reminds of summer is the warms colors and this ended up working well with the 70s inspiration because most of the fashion trends in the 70s used warm colors.
Final Design
For the final design I used sketch to create the logo, Artboards and icons. I used the warm colors as the main color scheme and added a cool color as an accent to compliment the warm colors. I ended up refining the layout a bit more by adding a background image and some opacity to some of the sections. One issue that I ran into during this process was trying to figure out a way users can listen to music while they are on different screens than the audio player. I decided to add a mini player at the bottom of the screen on every page which has some of the same functionality as the main music player.