top of page
iPhone-XS-isometric-onfloor-Mockup.png

Loop music UX/UI Project

A 4 week classroom project focused on using user centric design methods to discover, analyze and design for the discovered opportunity areas 

My role

  • UX Research

  • Wireframe & Prototyping

  • UI Design

Results

  • Discovered gap areas present during the time of consuming/discovering music 

  • Developed Low/Hi fidelity wireframes

Overview

With the growth of digital music streaming services, consumers now have a huge variety of options to

choose from.

It has become clear that streaming services (or probably anything related to content consumption for that matter)

has become the primary source of how we access music. 

As an avid music listener, curator and having interest in UX, I wanted to dive a little deeper and explore

how consumers of these services from the age of 18-25 discover, consume & maintain their music.

Phase 1

Research

Research is an integral part of the user centered design process. Not only does it help in identifying patterns and trends across users but also guides in discovering pain points and gap areas which are turned a blind eye to.

Surveys

The first step in understanding how users discover & experience music was, well asking them about it. Conducting an online survey with a group of 25 users  helped me figure out unique observations which I could later use in the 

ideation phase. 

Insights

  • Mood plays a dominant role in influencing the consumption of music at any certain point in time. 
    (Metal for gyming? Count me in!)

  • While a lot said that they like using their own playlists, they tend to gravitate towards recommendations made by these services to discover new music too.

  • Users who are passionate about curating music often correlate album artworks to the brand value of the artist. If done right, it establishes a connection with the consumer which helps the artist to get more listeners and fans onboard. 

A few screenshots from the survey results

Contextual Models

One thing where surveys fall short are in giving us the chance of observing user and passively understand their ideas and problems. Contextual Inquiry (let's call it chai pai charcha, shall we?)  gave me the perfect opportunity to do one-on-one casual music listening session to passively understand how they use these services.

 

Casual conversations gave me more organic insights against interviews. The conversation passively covered

topics like:

  • How does the user use these services (Efficiency?)

  • How do they discovers music (Effectiveness)

  • Keep themselves updated with their favorite artists (Couldn't find anything for here...)

  • How mood affects their choice of music at any given time ( It's raining outside! Anyone for some Lo-Fi beats?)

  • Exchange music among their friends (Share your audio wisdom, here's some from me)

Contextual models made after the casual conversation

Insights

ICONS-01.png

Social media is influential

Users heavily rely on social media sites to keep themselves updated with new artist/tracks 

ICONS-03.png

Sharing is caring

Tracks/artists shared by friends carry equal importance to the user if they have the same taste. 

ICONS-02.png

Curators switch more

Users who use multiple platforms tend to switch apps a lot more to keep playing music of their interest to find relevant tracks

ICONS-05.png

Collaboration is fun

Collaborative playlists is assumed as a fun thing among curators as it gives them an opportunity to constantly share music and probably create hot mixtapes too?

Untitled-1-04.png

Get-set-go

Users enjoy interfaces which do the heavy lifting 

for them. It should add into the experience rather than complicating it

Personas

Making personas is like filling in a 16personalities.com form, but only for someone else. Persona's are quick way of visualizing groups of people with similar goals, needs & pain points & behaviours.

Persona 1

maksym-zakharyak-FNeU95sOjY8-unsplash.jp

Sunny, 21

University Student

Being a creative individual, he spends most of his time listening to music while working. His friend circle also consists of people who

enjoy discovering music, hences he always has something new to listen to. He has an extensive library of his own across all possible 

platforms available as one can't do it all

Goals

  • Be updated with new music and keep his friends in the loop too.

  • Wants to spend less time on social media 

  • Finding for something new everyday

Frustrations

  • Hates it when he cant find out a track which is on the tip of his tongue.

  • Finds himself switching apps a lot to keep his music flowing

Persona 2

Alexa,25

Product Manager

Alexa commutes everyday to work using public transport and

listen to music when commuting. She considers herself as the

lean backed one when it comes to listening to music. She listens to premade playlists as she's busy to make her own playlists. She occasionally enjoys sharing music on social media.

Goals

  • Doesn't want to do the heavy lifting here. 

  • Doesn't prefer searching alot.

  • Play and go along is the motto here

Frustrations

  • Finds herself confused about what she wants to listen to when presented too many options

guilherme-stecanella-_dH-oQF9w-Y-unsplas

Phase 2

Ideation

With all this research done, I had a clear idea where my design was going to focused. The research let alone set the style for the UI. 

INSIGHTS-06.png

Be bold

Emphasize artist's visual language. Help user connect to a brand 

INSIGHTS-08.png

Keep them aware

Keep users informed about social posts about their favourite artists

INSIGHTS-09.png

Make it seamless

Connect apps together to give a seamless listening experience across all platforms

INSIGHTS-07.png

Let them play

Allow users to collaborate in realtime to make seamless playlists

Phase 3

Wireframing

I started out by creating paper wireframes to explore layouting options. I wanted to emphasize on the visuals while keeping the layout simple to follow through

IMG_20191112_091834.jpg
IMG_20191112_091942.jpg

Paper wireframes

Asset 7_3x.png
Asset 9_3x.png
Asset 8_3x.png
Asset 5_3x.png

Low fidelity Wireframes

Asset 4_3x.png
Asset 6_3x.png

Phase 4

UI design

iPhone X Mockup.png
iPhone X 3.png
iPhone X 1.png
iPhone X 4.png
iPhone X 5.png

Thank you for reading till the end!

bottom of page