Allegra
UX designer

soundtrack

ROLE: Concept creation, UX/UI
PROJECT: General Assembly course
DURATION: 10 weeks

Image alt tag

BACKGROUND

This project was for General Assembly's boot camp capstone. I'm passionate about music so I wanted to create an app that encapsulated my interests. What inspired me to develop this app was questions from friends such as, "where do you find your music?" "who is this artist, can you send them to me?" and "I can never seem to train Spotify to send me music that I enjoy."

THE CHALLENGE

A person needs a method to discover new music easily in an engaging way.

THE GOAL

By developing the app, soundtrack, the socially interactive experience will encourage everyday music listeners to discover music easily without feeling overwhelmed.

USER RESEARCH

At this phase of my project, I conducted user interviews in order to get a better understanding of the problem. I conducted eight virtual user interviews, ages 18-28, getting a feel for their music consumption and how they use existing music apps.

Research Goals:

  1. Understand user’s needs with music subscription services

  2. Identify the pain points while discovering music

  3. Explore the social aspect of music

User Questions:

  1. Tell me about your music habits

  2. Tell me about your music taste

  3. Can you walk me through how you listen to music? 

  4. How do you discover new music?

  5. How do you share music that you find with others?

  6. What tools do you use?

Quotes:

“I would like to send a friend a song I find through Spotify

without having to text it to them.”

“There are too many options to choose from. I get overwhelmed

and it takes too long to find new music that I actually like.”

soundtrack

SYNTHESIZING RESEARCH

I organized my insights discovered from the user research into an affinity map to group ideas together based on similarities. This technique helped me distill ideas into organized data.

soundtrack

COMPETITIVE ANALYSIS

I conducted a competitive analysis to separate my assumptions, to look outside my case, and take in the market as a whole. It helped me inform my design process while knowing the strengths and weaknesses of my competition.

PERSONAS

Based on the interviews, I set up two personas. I referred to them throughout the entire product development process.

I wanted to create reliable and realistic representations of my key audience segments for reference. A deep understanding of my target audience was fundamental to creating the designs moving forward. By thinking about the needs of a fictional persona, I would better be able to infer what a real user might need. Utilizing my affinity mapping method, I was able to distill the information into basic info, behaviors, channels, pain points and motivations.

soundtrack

PRIORITIZING FEATURES

I developed a 2x2 matrix to narrow down the scope and to find the low-hanging fruit that was needed to help simplify the design process.

The matrix diagram is a simple square divided into four equal quadrants. Each axis represents a decision criterion, such as cost or effort. This makes it easy to visualize the options that are low cost and effort, and low cost and high effort.

After prioritizing, I found that the MVP or minimum viable product means that I can test the app at an early stage, helping me iron out problems and gain feedback for future iterations.

The MVP

  1. Profiles

  2. Music library

  3. Search music bar

  4. Music art


USER FLOW

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals when opening the app.

I decided to create a user flow for the users' steps when first opening the app. I wanted to prioritize this user flow because it sets me up for future design iterations. The process of building this user flow starts with understanding the user’s needs and wants. The goal that the user is trying to accomplish is to discover new music easily.

I created the user flow in Miro.

soundtrack
soundtrack

SKETCHES

I usually start the design process with low-fidelity wireframes. This is the way I iterate through many design options quickly.

The main purpose of sketching was to brainstorm layout ideas with the design features that I mapped out in my 2x2 matrix. I sketched 5 different versions before deciding on a final sketch to design. I chose this sketch because it incorporated all of the 2x2 matrix features that were crucial to helping users reach their goals of discovering new music and sharing the music with their peers.

soundtrack

USER TESTING

Before launching the product, I did a testing round in order to reveal possible usability problems.

I was aiming to uncover any navigation pain points during my usability testing. I conducted the testing through Maze. I tasked the same eight users who I had interviewed for my user interviews to conduct the user testing. I wanted to stay consistent with my 'users' and I had limited time and resources to otherwise find different users.

My mission statement told testers to navigate to the home page, find the new music recommendation and send it to their friend, Simone.

Out of eight testers, only 25% of testers completed the mission successfully. The heat map helped uncover some pain points that I was not aware of before testing. I discovered that I needed to make the mission less leading. Also, that I should experiment with changing the navigation icons.


User insights:

  1. Need to include a back button for navigation

  2. Make the discover page easier to find

  3. Reduce and clean up homepage features

After seeing the mass failure of users completing their mission, I came to the conclusion that I tested too early in my wireframe fidelities. I need to up the fidelity of the wireframes so that my users can identify through navigation icons and images.

I leveled up my fidelity in Figma

USER TESTING 2.0

I needed to retest my designs after leveling up my fidelity so my users could have an easier experience navigating through the app.

After retesting my eight users in Maze for the second time, I was able to uncover more pain points:

  1. I needed to reformat the app for mobile specs because users were complaining that some features such as the toolbar were cropped out

  2. I needed to focus less on the user profile features and more on the music discoverability features first

soundtrack
soundtrack

UI DESIGN

Once I tested out all usability mistakes, I started designing the final screens in Figma.

I followed a fresh, minimal dark visual style. I followed iOS guidelines and researched mobile design constraints. I'm proud of the flow of the app.

My final designs reflect that my users are impatient, quick to judge and want immediate results.

LEARNINGS AND NEXT STEPS

  1. Users will need more information than block-level (keywords, icons) so users can navigate independently to perform tasks while testing.

  2. Eliminate leading mission statements while testing wireframes.

  3. Identify the rationale behind the ‘why’ - the biggest pain point of the problem statement.

Next steps:

  1. Test the hi-fi prototype and make another iteration

  2. Desktop wireframes

  3. Link social media accounts

  4. Artist bios

  5. Create a ‘social circle’ music feed

  6. Re-test!