vibe music

Vibe Music is a web app imagined for your daily dose of music. The design is thought to be intuitive and engaging, while keeping accessiblity in mind. Its goal is to have users enjoy the platform by quickly finding the right music for them, for their mood, in just one click.
ROLE
TOOLs
timeline
Research
Visual Design
Interaction DEsign
adobe xd
INDESIGN
August - september 2022
User Experience
User Interface
Digital Design
Visual Identity
Branding
Vibe web app screens presentation

the challenge

How can I quickly discover new music, to my taste?

Have you ever tried to look for new songs but ended up waisting time scrolling and swiping with nothing matching your mood? For a lot of people, music should be effortless and is part of day everyday life. Yet, a lot of us fails at quickly finding the perfect playlist for the day! This sparked a question: how can I design the perfect music web app?

understanding

context

In order to understand the users’ pain points about their music experience on the current solutions on the market, I interviewed different people from various background. Their problems and concerns helped me discern 2 areas of improvement:

01

Navigation

Available music websites are overwhelming, with busy pages, which leads to confusion and discourage from navigating further

02

Experience

Current solutions don’t provide easily accessible new songs/artists/playlists fit to the users tastes

goals

Simplifying what already exist. Vibe Music needs to accommodate to those who want to discover new artists and songs, and to those who want to a quick and effective navigation. I want the user to experience an enjoyable, stress-free moment on the platform, which actually align with the sole purpose of music itself!

01

Strategic IA

A clean Information Architecture is key to a smooth and enjoyable website navigation

02

Clarity

Clean designs for each page will allow a quick, easy and pleasant navigation

03

Web App

Creating a website and app version of the platform will be another challenge that will improve user experience

researching

competitive audit

I began by doing some research on the existing music websites to identify the key features I envisioned Vibe Music to have. I was able to know what solutions the users already prefer and dislike.

users interviews, personas and problem statement

I wanted to grasp a better understanding of the users pain points. I conducted users interviews which allowed me to empathize with them and create personas and problem statement. These will be the common thread to make more strategic design decisions as well as identifying areas of improvements.

key takeaways

The pain points are significant! Users expect a music website to have an intuitive and stress-free navigation.

List of competitors logos who made it to the competitive audit
Persona used for Vibe Music

designing

sitemap & wireframes for both screen sizes

To kick-start the ideation, I first planned out a basic user flow then mapped out a sitemap to assure a clear and easy navigation. Then, I’ve scoped a number of wireframes I would have to build and started making low-fidelity prototype for desktop. Once done, I iterated the exercice for a phone screen size.

Sitemap for Vibe Music

usability study and iteration

I conducted an unmoderated usability study on users from all ages and background. This study allowed me to pinpoint a couple of improvements axes, which I applied to my high-fidelity prototype for a second unmoderated usability study.

Vibe carousel iteration
01

interactive carousel

Most users were distracted by the carrousel, due to its size. I switched the design for a more minimalist (less images) and modern one

02

color palette didn't meet expectations

Some users weren't confortable with the white background, as they are used to music website being dark

Vibe color palette iteration from light to dark

final product

A final usability study demonstrated the pain points were adressed: to users, the design is intuitive and pleasant to navigate, with a clear and neat design, making the website and its purpose more engaging and appreciated.

reflection & growth

With this project, I realized how the smallest details have their weight in creating a smooth user experience. Always putting the user first-and-center is the best way to quickly design clear and concise solutions!

That being said, I wish to apply these ideas to next iterations:

Light mode

In consideration for those with limited vision and more confortable with high contrasted colors, I'd create a bright version of the website

Customisation AI

Adding a "like" feature on albums and artists would improve the quality of suggestions made by the AI

Scrolling on homepage

To improve navigation speed furthermore, I'd work on the homepage design on both devices to prevent the user from scrolling on the page

Community

Creating a page where people could share their favorites songs, artists or playlists would also improve the website organically

Let's create together!

For work inquiries, or to chat a bit, please reach out to me through hakimi.cassandre@gmail.com