MUSIC BOX

UI/UX DESIGN

Focused on creating a renowned app through researching and collecting data from our user’s experience in rounds. Working through phases, we applied all aspects of UI fundamentals learned throughout the semester. For my app, I decided to design a Music App that addresses issues across multiple widely used music apps, such as Spotify and Apple Music.

By the end of the semester, I developed a fully functioning prototype through FIGMA. Amongst 25 classmates, I was one of four students who were selected to present our creations to Spotify’s Design Team. It was a pleasure to introduce and explain my discoveries, as well as receive critical and helpful feedback.

SOLUTION

PHASE ONE

RESEARCHING SPOTIFY + PERSONAS

Narrowing down key aspects and flows through analyzing user flows of Spotify and Apple Music.

After interviewing three individuals from ages 15 to 25, I noticed a common recurrence of frustrations that they experience when using their favorite music apps. There is a lack of spark curiosity when loading their apps, difficulty sharing music with friends who use other apps, and discovering new music that aligns with their interests. When designing a music app, I would like to improve the layout of the app and its usability.

I would like to ensure that my design is highly intuitive to navigate and make it easy to discover and understand the tone of the song they’re about to listen to. Music is universal for all, everyone should be able to listen to their favorite songs through their devices without difficulty. I would like for my app to target a large audience, and make it intuitive and straightforward to use. This app that I am designing should allow all users to share and stream music easily, encourage and appeal to listeners to discover new music, and let users see what their friends are listening to.

  • Easily discover new music and artists. Be able to search for music and albums efficiently.

  • Share a wide variety of music with friends within and outside of the app.

  • Encourage users to create playlists. Visually excite users to explore and listen to new music.

PHASE TWO

DEFINING PERSONAS + WIREFRAME SKETCHES

After researching and gathering data from other Music Applications, the process of defining Music Box’s user personas began. Above are three user personas of different ages, personalities, and identities.

From the information gather and testing other Music applications, I began to distinguish which features in each app, Apple Music and Spotify were favored or disliked by their users. This was done in order to begin basic wire-framing.

LANDING/SIGN IN

TOP NAVIGATION

BOTTOM NAVIGATION

HOME

LANDING/SIGN-UP

DISCOVER SEARCH

FAVORITE/MY LIBRARY

PHASE THREE

LOW-FIDELITY TESTING + INTERVIEW ANALYSIS

The users I interviewed were both college students in their 20s, interested in music, and have experience using music applications on their mobile devices. The main challenges that the users encountered were the buttons on some screens being unnecessary or too small, and the overall layout when listening to music. They also wished to see what the library aspect of the app would look like. I was surprised at how fast they were able to navigate through the app. I was also surprised at the feedback I received regarding the buttons.

It was helpful to understand and see how the app was being navigated and what features were unnecessary. To improve the overall experience, I plan on fixing the margins within the app and as well as creating new icons and buttons that are intuitive. Also, I plan on creating the other flows and connecting all the navigational buttons together. Yes, these improvements will benefit the other flows of the app because they will make the app cleaner and define the hierarchy within the app. It will also make navigating the app easier for the user.

  • How did it feel to navigate through the app? Was it easy and intuitive, or confusing?

  • Is there any flow that caused you to question what to do? What did you like and dislike?

  • What did you think of the layout of the content? How are the icons, the text size, etc.?

PHASE FOUR

PROPOSITION + MOOD BOARD

MusicBox is a music app seeking to create a fun and engaging listening experience for all its users. Musicbox seeks to make it easy for you to share songs, albums, playlists, and artists that you discover and love with your friends easily and efficiently. Musicbox allows you to create a profile, and see what others are listening to!


Musicbox aims to solve getting lost or bored while browsing and searching for songs and integrates a Music Finder as well as a unique color scheme design. With Music Finder, the app listens through your microphone and instantly finds the song. Musicbox is a box for all ages, introducing a unique look through a Retro-Futuristic Layout Design.

PHASE FIVE

HIGH-FIDELITY TESTING + INTERVIEW ANALYSIS

When it came to users to interview, I was able to come in contact with two of the original testers, and one new user to test on. My demographic is ranging from ages 16 to 24, giving me an 8-year difference between the generations. 16-year-olds seem to be more tech-savvy as compared to 24-year-olds, who had a few issues. All users that were tested have had experience with using music apps, whether it was daily to weekly usage.

The main challenges the users experienced weren’t because of the app itself, but rather the prototype experience they had on their phones. Not being able to meet in person, but rather over a phone call, I wasn’t able to control this factor since I could not share my phone with them to experience the app with the full screen. However, with a new feature in Apple’s iOS update, FaceTime allowed for “screen sharing” allowing me to observe their movements and talk to them in real-time. I noticed some trends when it came to how they navigated through the app. Most were immediately attracted to the colors and clicked the colorful icons. There was a struggle when it came to button sizing, the text was adequate but the outline of the button itself was too small. I was surprised by the way the users navigated through the app. Since I was the one who created it, I have a specific way of going through the app.

  • How intuitive and easy is it to use when navigating through the app? What would be one thing you’d change that you believe was challenging or confusing?

  • What do you think of the context layout and usability, are you able to understand all the icons? Can you tell me what you think of the process to add a song to a playlist?

  • Would you download this app? What do you think of Music Finder Feature, would it be a feature you’d use to help you discover music?

Being able to see a fresh perspective made me become aware of some prototype flow issues that need to be addressed. Through this experience I was able to learn and analyze the different behaviors of users of varying ages, discovering patterns in their behaviors as well. It was interesting and insightful to hear from them and discover issues in my designs, as well as successes.

If I were to continue working on this app, there are multiple things I’d like to improve on. Especially after the meeting with designers from Spotify, who are knowledgeable in UI/UX design and product experience, I would like to improve on the overall aesthetic and ensure that it is timeless. I would also make sure to include features that are used across all music apps that I have failed to include. Overall, I had a great experience creating MusicBox and have grown more comfortable with UI design and I am excited to improve.

FALL 2021 — FIGMA Software — Adobe Illustrator — UI/UX — Music Box