Musitube
1. Introduction
Musitube is a music, podcast, and video streaming service. Music can be browsed or searched for via various parameters, such as artist, album, genre, playlist name, or record label. Users can create, edit and share playlists, share tracks on social media, and make joint playlists with other users.
Role:
Product Design
Company:
HDApps, 2016
2. Problem
Our design challenge was to simply “design a music player app for iPhone only.”
No instructions, no guidelines, nothing. It was up to me to decide what problem or concept I want to build the app around. Some limitations that I had to deal with:
Technical restriction: no ideas. Try to work with an idea that doesn’t require rocket science.
Time: I had few days to brainstorm, wireframe, and build mockups before I had to present my ideas.
3. Approaches
I first started tackling this challenge by looking at current music players: Spotify, Apple, and SoundCloud.
Features they had in common were: curated playlists, song radios, and some sort of recommendation feature based off an algorithm using user preferences. Most designs followed standard iOS protocol
4. Objective
After discussing with my design leader,The task was definitely clearer: to create the music application enabling users to deal with music on their mobiles devices. According to this purpose, there were distinguished the following basic functions:
-
To download and syncronize media-files from other online platforms such as YouTube, SoundCloud, Spotify etc.
-
To upload the files from the desktop library of media files
-
To generate playlists in fast and easy way
5. Solution Exploration
Information architecture
After clarify our scope, we listed all function in each feature based on information architecture. The diagram helps me think about the structure and how information display. Based on the problems, this App concludes three main functions, which are “Home”, “My Library”, and “My Playlist”, to solve the problems. Its list style recommendation will be the first thing displayed. The search function will appear in the menu, which is universal.
Persona
Using the results of information architecture, I created a persona that embody the traits of the target audience.
User Journey Mapping
After I scoped out the experience, I documented the challenges I wanted to address for each section. I also documented possible solutions for each challenge to get a sense of the work ahead of me.
Mapping out the user experience helped me discover where design should be focusing efforts, and where the bulk of the work would land.
It was clear that figuring out where each feature should live within the architecture of the app, and creating the right product story were going to be two of our main challenges.
6. Wireframe
Based on our information architecture and user journey map, I created wireframes to fully describe interface of our application in black and white lines. Next move, My design leader and me discusses together the color, style guide and final visual design before we presented our mobile application for development team and director.
Wireframe flow
The features of the adding and listening songs were accessible through various places in the app so it was important that I laid out all of the pages so the team could visualize how each piece related to one another and how a user would access each section of the features.
7. Visual Design
Finally, we discussed about the style guide for our application based on three element Icon, typography and color:
-
Icon: we used filled color icon, because it standed out on a black backgroun color
-
Color: according to director, primary color had to be red - #C82127, secondary color should be picked to look harmonious.
-
Typography: used Sans Fransisco font family
Style guide
iOS app design
