Context
For my final bootcamp project, I wanted to focus on something that I loved and found enjoyable - music. I also wanted to make a product that would solve a real-life problem.
Time Frame: 2 weeks
My Role: As both a UX researcher and UI designer, I was responsible for every phase of this project. From planning and prioritization; conducting surveys, interviews, and data-driven research; to the design, prototype, and testing of a MVP.
Phase One: Research
Design Thinking:
As a UX designer guided by the principles of design thinking, I knew that before I even began to think about any possible solution, I had to begin by truly understanding the problem.
Google Forms Survey
Research Methods
Do you happen to have 2 or more music streaming apps on your phone? Well, according to Nielsen, 60% of users ages 18-34 use 2 or more music streaming apps. As someone in that age group who has about 5 music streaming apps on my phone, I know how disorganized and crazy keeping track of your music can get.
However, I am not the user. That was rule #1 at my bootcamp and is now forever ingrained in my mind. So to find out more information, I conducted a survey (with the help of a Lean Survey Canvas) that I then sent to various music-related Facebook groups, music forums, friends, family, and colleagues in the music business. Overall, I received about 70 responses to my survey. I also interviewed about 10 people who use 2 or more music streaming apps on their devices.
Along with all of the insights I received from my research, surveys, and interviews, I conducted a competitive analysis to check out what the current market was like.
Findings
After going and analyzing all of the insights I collected through my research, I used a lean UX canvas in order to synthesize and organize all of that information. I really enjoy doing this exercise because it allows me to break down all of my information into simple steps.
Turns out, a majority of the users I interviewed and surveyed have a tough time keeping track of all of the music they have across multiple music streaming platforms. Users have music saved onto their phones, on Spotify, Soundcloud, Apple Music, Tidal, Deezer, etc. Now faced with so many choices, listening to music has become much more complicated than it was just a few years ago.
Users also expressed how their music listening habits have changed because of Covid-19. Before the pandemic, a majority of users spent a lot of time listening to music with their friends either at home, in the car, or at parties. Presently, users expressed missing that connection that they used to share with their friends.
A majority of users stated that they shared music through word of mouth before the pandemic. The way music is currently being shared is quite different. Links to music from various platforms are being shared through iMessage, Whatsapp, and social media more than ever before. Another pain point was that users often missed, forgot, or just couldn't listen to music a friend sent because they were busy at the time. Those links ended up being lost over time and forgotten.
Finally, users also expressed frustration and feelings of awkwardness when requesting music at a house party. Often, there is just one person in charge of the music at a house party. Users felt usually felt uncomfortable when asking for a particular song to be put on, or just didn't bother.
Part of the competitive analysis
Phase Two: Defining the Problem
Problem #1
Too many music choices, not enough organization.
Problem #2
Users missed connecting with their friends through music.
Problem #3
Users often missed or forgot about music links their friends sent them.
Problem #4
Requesting music at parties can be awkward and uncomfortable.
User Persona
Using a combination of the results obtained from my survey and a combination of the people I interviewed, I came up with "Sofia" as my user persona.
Sofia is a young woman whose life revolves around music. She's a music lover through and through. One of the ways she connects with her friends is through music. But since moving to a new city, it has been difficult for her to share that same experience with her old friends.
Main Pain Points:
-
She has 4 music streaming apps on her phone and it's difficult for her to keep track of all of her playlists and songs.
-
Can't listen to music with her friends like she used to back home.
-
Difficulty keeping track of the music her friends send her and vice versa.
-
Requesting music at parties in her new city is awkward because she doesn't know anyone there.
Phase Three: Ideation
Finding Solutions
Ideation is one of my favorite parts of the process. I started by creating an affinity diagram with all the data taken from surveys, interviews, and testing and categorized them into groups.
Then it was time for a brainstorming session. I gave myself around 10 minutes to think of ideas, features, solutions, and any crazy, out-of-the-box ideas my app could have.
Prioritizing
Thanks to the affinity diagram and my brainstorming session, I had a much better idea of what to include and what to not include in the app. To finalize those ideas, I used the MoSCoW method to prioritize exactly what I would be developing in the next few days.
Music platform integration would be the foundation of the application, pretty much all other features would stem from this main feature. Collaborative playlists would also be a must-have - this feature would prevent all of those music links from being buried and lost under texts and messages. Another must-have would be to be able to listen to music with your friends in real-time. As for the last must-have, users would be able to vote for what songs they want to hear during a party.
To further empathize with my users, I put myself in the users' shoes and I wrote out some user stories. This made me realize that as much as this app would be centered around music, it would also be centered around connecting and sharing with friends.
Now with the idea clear and structured, I was ready to complete the User Flow where I took user Sofia through an onboarding process, through the creation of a collaborative playlist, and through a group listening session. This also allowed me to complete the Information Architecture with a Site Map.
User Flow
Site Map
Phase Four: Prototyping
Design Sprints
To start off any design process, I like to do a Crazy 8 exercise. I find that this lets me draw out any ambiguous thought in my mind and lets it come into reality. If I start to think too much, I get stuck. Some of my best ideas have come from Crazy 8's!
For this particular exercise, I decided to draw out part of Sofia's user flow and to see how I would implement some next steps I had in mind.
Once that was done, I moved on to prototyping a low-fidelity mockup of the complete user flow. I then sent out my lo-fi prototype to about 5 people to do some usability testing. These users were tasked with completing an onboarding process and then making a new collaborative playlist. I noted down any stalling or questions the users had along the way. I was able to improve the speed of the user flow by reducing the number of taps and also improved the accessibility of the home screen.
Wireframes
Onboarding Process
Creating a Collaborative Playlist
Group Listening Session
Usability Testing
If there's only one thing I know, it's that there's always room for improvement. To find out things that I could improve, I sent out my mid-fi prototype to 10 people. The testing was conducted using Maze, a platform I find really helpful and easy to use.
On Maze, I set up 3 different tasks for users to complete. First, they had to go through the onboarding process. The results from this first task let me know that I had to increase the size of the forms and buttons because of the misclick rate.
The next task was to create a collaborative playlist which made me realize that I had to make the add playlist button bigger and more visible.
The last task, and the longest, was to start a group listening session, invite friends and to chat with them. The misclick rate wasn't as high as the other tests, so that was a plus. However, I noticed that users had the hardest time while chatting with friends. These were where most of the misclicks were. I knew I had to improve upon that for my next iterations.
The UI
Now that the structure of the app was established, it was now time to make it look as good as it could be. I started off with a Mood Board. Music is the central focus of the app, so the app's UI had to reflect that. Music is motion. The colors of the app should reflect that, so should the typography, as well as the microinteractions. What got me thinking of that motion is the turntable that sits in front of my desk. The arm that moves the needle up and down, the platter that spins the record, the target light that illuminates the strobe dots that grow and shrink.
As a music lover myself, I looked for inspiration everywhere. My headphones, my records, my mixer, my speakers, literally everywhere and anywhere. To give substance to the visual aspect of the app, I conducted a brand attribute test comprised of 12 users. The app should evoke feelings of inspiration, freedom, and self-expression.
Photography mood board
Texture mood board
Color mood board
Photography mood board
Mood Board
Style Tile
With the feeling of the brand determined, I went on to choose the colors and typography. After validating various color palettes with user testing and color accessibility tests, I went with colors that reaffirmed my brand attributes: pink, blue, and orange.
I also wanted to include the motion of music in the design of the app. From the splash page to the icon, and down to the micro-interactions - the user would be reminded of music in some shape, way, or form.
The colorful, blurry orbs that follow the user in the background throughout the app are meant to mimic the lights at a concert or club. The orbs dance through the different screens and add to the glass morphism style chosen for the app. The transparency of the app's elements are given a glassy look, to give the feeling of light and air.
Various iterations of the log in page
Designed using a
base grid of 8px
Part of the Style Guide
Cue UI Kit
Solutions
Link music streaming accounts
This feature allows users to link however many music streaming accounts they want. Once linked, songs, playlists, and any saved items will be imported into Cue. Cue uses the database of whatever music platform you link it to essentially giving you millions and millions of songs at your fingertips.
Music organization
Once in the app, the imported music can be organized by the platform it came from, artist, album, genre, etc. There will always be a small icon on the album art that tells the user from which music platform it came from.
Users will also be able to see what their friends are listening to and follow their music tastes.
Collaborate and listen with friends
Users will be able to create collaborative playlists with ease, with whomever they wish to collaborate with.
Friends will also be able to participate in a group listening session with the Listen Together feature. Users will be able to chat in real-time throughout the session.
Vote for what you want to listen to
Requesting music doesn't have to be awkward anymore. Start up Party Mode and collaborate with fellow party goers. Add songs to the queue, and vote for what you want or don't want to listen next.
High-Fidelity Prototype
Conclusions
Landing
Page
After two weeks of sleepless nights, I felt really proud of the final product. But because of the short time frame, I didn't have enough time to do all of the usability testing that I wanted to do. I would love to take this project up in the future and keep iterating on it. Another factor that was important to consider is the monetization of the app. While I didn't get a chance to flesh that out in this iteration, I do have plans for it in my next steps.
This project was a really big challenge for me, with unexpected problems and hiccups along the way. I learned to not let that faze me and to trust in the process. Somehow it all got done!
At the end of the second week, I presented my project in person at the Ironhack campus in front of all of my classmates and teachers in person. For the first time! All of our other presentations had been done remotely so it was quite nerve-wracking. I would've been terrified, but after so many presentations throughout our bootcamp, I felt pretty prepared.
The most important takeaway for me from this project though was knowing that UX/UI was definitely the path I wanted to go down. While it was hard work, I enjoyed myself every step of the way. At the end of this project, I was a graduate of an intensive full-time bootcamp. I could finally call myself a UX/UI designer. It felt great.
Next Steps
There are tons of things I want to do with Cue, but the next few features that I want to add to Cue are:
-
DJ mix feature - Realistic interface that allows you to DJ using the music in your library. Go back to back with a friend and DJ in real-time.
-
Plan and schedule Listen Together or Party Mode events.
