Music App Redesign
This music app prototype was designed with 2 others in a Cognitive Science class at University of California, San Diego. The main goal for this project is to create an UI of a easy to use, user friendly, playlist focused music application for mobile platforms. The primary target users are students. Because the time is limited, we are only giving a newly designed workflow for browsing and managing the playlists but not a whole new music application. As a computer science major student, by doing this process, it will help me in a great deal to work with UI/UX designers in the future professional life and it makes me a better developer.
Week 1 — Interview the User
To understand how users listen to music through their mobile devices, we interviewed nine users who used music apps regularly. We prepared a set of questions that mainly asked user when and where they would listen to music and how would they use their app to achieve that. The questions examples:
- What were you doing when you use a playlist last time?
- When was the last time you made a playlist and why did you make it?
- How do you choose which kinds of songs to add to the playlists?
- Can you remember any specific occasions or things that you tried to do in music app that made you frustrated?
The findings:
- Most users haven’t create their own playlist for a long time because of the online playlists.
- Some users experience inconvenience finding the music they liked.
- Most users played Non-genre playlist more often than genres.
In addition to asked questions, we asked user to demonstrate how would they use the music of their choice. We recorded their process for the further analysis.
Week 2 — Comparative Analysis and Competitive Analysis
After the interview, we had some rough ideas for the music app, now we need a more close look of the competitors. We have chosen three most popular apps: Spotify, Apple Music and Pandora. The comparative analysis focus on how users perform the same scenario in different music apps. We carefully chosen five common use cases from previous nine interviews:
- Create Playlist for Exercising.
- Create Playlist for Party.
- Delete Song from Playlist.
- Delete Whole Playlist.
- Find Popular Songs and Play.
For each scenario, we made a excel sheet that compares each step of action with screenshots side by side. Here is an example of a scenario:
We also need a more comprehensive analysis for the content of each of the music apps. There are three general aspects that we are interested in:
- Genre Names
- Non-Genre Playlists Classifiers
- Album/Track
For each of the Competitive Analysis, we created an excel sheet that compares those apps’ elements side by side. We also took the screenshots for each of the ways to get to the content to display. Here is an example of “Non-Genre Playlist Classifier” analysis that we did:
After we have these analysis, we are confident we understand how should a good music app perform for the users. However, these processes are painful and can take long hours to finish, but it worth it. Personally, I am not a regular mobile music app user, there are some features that I don’t even know before I dive into these complicated analytics. After I finish these process, I have a very good understanding of how these app works, what it should looks and what users are looking for. Without the knowledge above, it’s very hard to design anything good out of the box. I am appreciate that I learned this valuable process.
Week 3 — Prototyping
Now comes to the part we actually start to design, but first of all we need a list of features that need to be achieved. The features that are required are “Create Playlist” and “Manage Playlists”. We also need to design some entry points such as home screen and music library screen to connect the features together. Additionally, we want the app to be easy to use and less navigation levels from home to actually deliver what users needs.
At first, we can just go to Sketch or Photoshop directly, we need a low fidelity design to start with. We meet up and brainstorm together to get a general look of the music app.
By the time we got the initial design, we start to try out the tools. We tried both Axure and Sketch, we found Axure is kind of out-dated and hard to use for amateurs like us. So we decided to use Sketch to create screens and connect the screens using Invision.
However, using Sketch turns out not much easier, as the elements build up in our design, it get very messy. We straggled at each step of creation, find image that fit the size, create global layers, move around element with pixel precision with touchpad, export screens together without mess up the design, tried very hard not to change things across multiple pages… But in the end we all learned the lesson and got better in Sketching.
Each of us created a few pages based on our own understanding in the first few days. Then we had a meeting that we talks the detail and make the whole design more consistent. We also found a few missing pages in the workflows and finalized those together.
Week 4 — Final Implementation
After we got all the screens we need, we started to debate some design decisions because some features that came out from our first version does not looks any better than other apps and it has usability issues. These hard decisions are:
- Where to put create button exactly?
- What to display on the home screen exactly?
- Whether go deeper in navigation or stay to finish things in current level?
- Should we have Artist tab or not?
We had to discuss and change the design over and over again at time we were trying to solve those questions. However, in order to get the best result, we updated Comparative Analysis with our own apps and trying to see if our design is more effective or not. The result is good, our design is always shorter or same with the shortest steps compare to other apps. Only one scenario was one step more than the shortest.
Final Design:
Thank you for reading!
