×

DURATION:

August 2 2019 - August 14 2019

ROLE:

Project Lead, UX Research, UI Design

TOOLS:

Adobe XD, Adobe Illustrator,

The Vision

Vibrato is an all-in-one place for indie heads, hip-hop fanatics and everyone in between to post about music in creative ways using the rating, commenting and sharing features while sparking conversations with friends new and old.

Project Display Image

Challenges

Getting Started
Brainstorm phase
To get things started we interviewed five participants to see if there would be any buzz or interest in our idea. We asked what they would like to see from the application, and also some basic questions about they’re lifestyle. This information set the groundwork for some of our personas as-well as early concepts.

From there we began to think about some key questions we should ask ourselves before making any critical decisions on the project.
Illustration of people brainstorming

Key Questions

Brainstorm phase

?

Who are our competitors? How can we stand out from the crowd in this saturated market?

?

Are people interested in a music discovery app that can be used for daily use (will it pass the toothbrush test) ?

?

Who is the target audience? Does our target audience want something like this?

?

What is in it for the users? What are they getting from this application they won’t be getting anywhere else?

?

How can we spark interesting conversations on our platform that isn’t happening anywhere else?

?

What sort of challenges do we need to look out for that could come up in process?

Analysing Competitors
Research phase
There is an abundance of music apps on the market with varying degrees of purpose. Proper analysis of music apps alike was a key step in our process for 3 different reasons.

1.) By analyzing the success and failures of these apps we could save ourselves time by avoiding similar hurdles and taking the correct steps to innovate in places competitors were lacking

2.) Understanding the users wants and needs of these applications would help us to develop some our own personas overall helping us design for the users needs

3.) We wanted to know what made a good user experience in these applications so we could adapt and stand out from the crowd.

Public Survey

Research phase

When searching for direct competitors we could not find any current applications with a focus on personal music reviews. Although Vibrato appeared to be unique in this aspect, we still knew that Vibrato shared similar functionality to other music applications that could cause conflict when entering the market. With this in mind we targeted Last.fm as our main competitor and looked to see what they were doing.

We set up a Google survey and reached out to Last.fm users and asked them what they liked and disliked about the current state of the application

We received a near 500 responses to the survey. Below you can see some of the interesting data we collected.

A graph that shows 194 particpants voted that they search for new music everyday
When we first started developing the idea for Vibrato we theorized that a majority of users would be interested in using a music discovery app for daily use. This data confirms our theory.
A graph that shows 75% of particpants voted that their preffered mehtod of listening is by streaming
This data isn’t shocking by any means but confirms that most users would be able to connect there preferred streaming service to Vibrato.
A graph that shows most users stream there music
Here we can see that users are using a variety of different methods to discover music. After viewing this data our goal became clear. We wanted vibrato to be the centre application for music discovery, encompassing all of these other methods.
A graph that shows most users are unsatisfied with the current state of last.fm
Just over 90% of last.fm users are unsatisfied with the current state of the application. We believe Vibrato would have a real chance at redirecting a large sum of their traffic.
A graph showing most users want the application to focus more on user collected data
Some of the users wants from last.fm will prove as useful information that will be considered when designing Vibrato’s user experience and interface.

Developing Personas

Research phase

Using the research that we gathered from our interviews and survey, we created some personas that we thought matched our data.

Brainstorming and Sketching

Once we felt like we had collected enough research we decided it was time to start laying the ground work for the project.

My team and I had a long discussion on how we wanted the interface of the application to work. We began a brainstorming session which resulted in some early sketches and notes that would be integral to the next design phase.

Early sketches of the project
Information Architecture
Design Phase
image of sitemap

User Experience Design

Once the sketches were complete and the overall ideation was set, it was time to wireframe our ideas.

It was important to be very carful with this step as it would be the basis for the final project. We spent a lot of time tinkering and changing how certain functions would work so we could get it feeling just right.

he profile page was the biggest challenge during this section as we wanted to display a lot of information about the users listing habits and reviews all while keeping the interface clean and familiar.

Early sketches of the project

User Testing

With our new wireframes ready we selected a group of users that we thought resembled our personas

We watched our users test the app via the Adobe XD application for iPhone. We instructed them to try accessing certain features of the application and to verbalize their thought process.

We took notes on their feedback and asked them what they would change.

Feedback and Implementation
Design Phase
Our users gave us some great insight into the design. We found that there were a few issues that would affect the user experience of the application. The four main areas of critique were:

1.) When searching for a song or album, users wanted to see a variety of recently played tracks to speed up the post process

2.) In the discovery section, users preferred to see music suggested to them rather than reviews.

3.) On the review tabs, users preferred to see the album cover with the score next to it, instead of just the score.

4.)Users struggled to find the album discussion section, we created less taps, and added a new tab that would be easier to access

image of phone running application

Interface Design

With user testing and our wireframes complete, it was time to start our high fidelity design. We made appropriate changes based off our users feedback and created a concrete style guide to keep our design flow consistent.

High fidelity mockup of the project
A picture of the style guide
high fidelity images of the application

Key Takeaways

This project is still a work in progress. Currently we are still developing new features for Vibrato as new ideas are still coming to us. One thing we know for sure is that there is a user base for this product. Looking to the future we will continue working to better Vibrato and eventaully find the funding to help us fully develop this project.

Return Home 🏠 Next Project