harmon.ious
Dash Challenge: Design an app to create playlists and share them with friends.
Read more
Have a bit of time? View the story.
Overview
In an effort to gain a bit more design experience, I signed up for the Dash Challenge (dash.careers) where participants are sent a design challenge by email every 2 weeks. Once submitted, veteran designers and product managers review the work and provide feedback. From there the top designs are sent to their network that may be hiring.
I felt this would be the perfect opportunity to receive a prompt from someone other than myself and a great opportunity for feedback, providing a more realistic experience. I also thought the deadline would reflect some constraints I could see in the real world.
The Dash Challenge:
The scenario: "Everyone loves sharing music with friends. No matter how good an algorithm gets, your friends know your music taste best! You are tasked with designing an app for creating playlists and sharing them with friends."
Task: Present 3-6 visual designs of screens from the playlist app.
Research
For this project, due to the limited time frame & trying to juggle multiple projects with the same deadline, I chose to start off with some desk research and a competitive analysis, which allowed me to:
-
Get a better idea of the potential users of my app,
-
Understand their current pain points with competitor apps and,
-
Understand users' positive experiences with those apps.
These are some of my initial notes:
Competitor Notes (Click to enlarge.)
Here I was shocked to find that only 15% of users used Apple Music, while Spotify had 31% and Amazon Music had 13%. This was shocking because Apple makes up almost 50% of smartphone users but only a small percentage use its dedicated music service. I took this into consideration throughout the duration of my research.
Moving forward I gathered the strengths and weaknesses from the top 2 apps (Apple Music and Spotify) and based on those I got better idea of some of the features that I could implement in my app design. I was able to organize all the information using figjam:
Competitor Strengths and Weaknesses (Click to enlarge.)
Branding
Once I had a better understanding of what I was going to design, I started off with a bit of branding. I came up with the name harmon.ious for the app, which the word itself is pretty self explanatory. The “.io” is a reference to the connection of multiple users, all providing an input and output. Here is a simple logo I created as well:
Wireframes
After quickly brainstorming a logo and app name, I was able to come up with some wireframes for a few different screens. Here I had a few different ideas and used my roommate as a tester as they fit the target demographic. These are some wireframes that tested well and I moved forward with:
Low Fidelity Wireframes (Click to enlarge.)
When creating these wireframes, I made sure to take into consideration previously discovered pain points and needs with current music apps to ensure that harmon.ious puts the user first with it's design.
Testing
With limited time there wasn't room to test as much as I wanted, but I was able to complete some testing through my roommate. This was more beneficial than not testing at all, as it pointed out loose ends and discrepancies that I missed.
To test, I had my roommate "complete" various tasks within the screens, for example creating a new playlist or leaving a comment on a playlist. I also had them look at some of the variations of the music player and tell me which was preferred and why.
.png)
.png)
Low Fidelity Wireframes (Click to enlarge.)
Through this testing, I discovered that I didn’t include a search feature (which wouldn’t have been good) and received feedback on which music player to move forward with. The option that was chosen was “easiest to navigate” and “similar to other music apps” so it was easy to pick up and use.
Final Design
After validating ideas through testing and removing the ideas that didn't test too well, I was able to spend the last 2 days working on the final design (with the last day being used to wrap up my presentation deck).
High Fidelity Wireframes (Click to enlarge.)
While I really enjoy how harmon.ious came out, I wish I had more of an opportunity to test and research since the timeframe and other constraints didn't leave as much time as wanted. Something I do look forward to though is hearing feedback from the senior designers, as it will only help me become a better UX Designer.
One thing I learned throughout this project is the importance of prioritizing. As mentioned, this project had the same deadline as other projects/assignments so for each one I worked on I had to prioritize and figure out what I had time for. I feel this will be very helpful for the times I may have to work on multiple projects at once.
Feedback
UPDATE:
I received feedback through Loom (which I recently started using and find super cool). One thing that was mentioned a lot was the structure of my presentation deck (which I submitted), as they put more emphasis on the text rather than my visual designs. It was also mentioned that my version of the active state icons on the tab bars at the bottom can be refined by maybe making them one solid color rather than 2.
Because of this awesome feedback, I now know to put more emphasis on my design with my contextual callout slides the next time around. I am also now aware of some ways to make tab bars more efficient, which will be very useful as I do a lot of mobile designs. Overall, I'll be utilizing all this feedback for my next Dash Challenge and any other upcoming projects!