This project is a theoretical UX/UI design challenge.

ROLE

UI & UX Designer

TIMELINE

3.5 weeks

TOOLBOX

WIX, InVision

GOAL

Design a music streaming app that allows users to stream music  and create playlists based on their mood.Design a 

About

MockUp3.png
COMPETITOR RESEARCH
I needed to gain an understand in the current music streaming market from big competitors (Apple Music & Spotify) and noted the following findings:

Analysis

Venn Mood.png
USER RESEARCH
In order to gain a better understanding of my potential users, I carried out an online user survey to discover the patterns of users using music streaming apps based on their moods.
Breakdown user ereseach.png

Research

DISCOVERY 
Everyone's music taste is unique and subjective -  a "happy" playlist for one individual may not necessarily be a "happy" playlist for another due to its contents. Creating a playlist is a personal experience that reflects an individual's current mood and state of mind. This is why people may not be fond of pre-created playlists as they did not share the feeling in that moment when it was created.  I must create something personal to the user where the app requests them what their current mood is and presents them with music that suitable for that mood but in line with their music taste also.
mood psd 1.png
USER PERSONAS
Based on my user research, I was able to understand the needs, experiences and pinpoints of my potential users, leading me to create 3 of the following user personas:

Personas

USER STORIES
As Karim and Aliyah are both music listeners, I've written up some User Stories to get an understanding of some features and goals of the app:
  • As a music listener, I want to input my mood so that I can listen to music relating to my mood.
  • As a music listener, I want to be recommended music of my taste so I can listen to it without skipping songs. 
  • As a music listener, I want to be be able to change my mood on the app so different songs under that mood can be recommended. 
  • As a music listener, I want to search songs and artists of my taste.
  • As a music listener, I want to create my own playlists so I can easily access it and share it with friends and family. 
  • As a music listener, I want to have a list of music for different moods so I can listen to them when needed. 
INFORMATION ARCHITECTURE
After creating all the personas and user stories, I was able to construct a sitemap for the information architecture and navigation of the app. However, I wanted to see if potential users would validate my decisions so I carried out a Closed Card Sort (using Optimal Workshop).  
 
These findings lead me to iterate my sitemap as follows:
mood mockup 3.png
LOW & MID FIDELITY WIREFRAMES
I then began to sketch out the screens of the app:

Sketching

DESIGN DECISIONS & FINAL PRODUCT
To create the high-fidelity wireframes, I needed to made a decision on: the visual design principles/trends, colours, imagery, typography, shapes & icons.

I first created a mood board which is a collection of music/mood inspiration,  I wanted to use a mesh gradient with the solid colours white and purple (purple being the most dominant colour the mesh gradient I used. The mesh gradient contains different colours; representing the many moods we all experience, i.e. each colour may represent a different mood to each individual, whilst maintaining a modern, clean and sleek look and user friendly interface. I made the following design decisions:

Create

MOODBOARD
Mood Moodboard.jpg
LOGO
TYPOGRAPHY

Header 1

Montserrat Semi-bold, 40px
Subtitle 1
Monsterrat Semi-bold, 36px

Subtitle 2

Montserrat Medium, 25px

Body 1

Monsterrat, 19px

BUTTONS

Monsterrat Bold, 22px
COLOURS

HEX:#363682

HEX:#000000

100. Chetwode Blue.jpg

Mesh Gradient

UI ELEMENTS & ICONOGRAPHY 

Product

1.jpg
2.jpg
3 2.jpg
3 3.jpg
3 3 2.jpg
4.jpg

When it comes to accessibility, I must take into account all types of users for my app, from those with visualisation problems to language. This will make the app more accessible to users of all types as well as making it user friendly. 

Another feature I intend on adding is 'Mood Radio'; this feature will allow the user to listen to FM radios that plays songs based on their mood. I will first gather user research on this to retrieve more ideas on this. 

Learnings