top of page
Artist Clay Tilt.png

Personal Project

Experience new music on repeat

Timeline:

Nov 2022 - 2 weeks

Role:

Concept, Research, Design



Project Brief

Replay is a music exploration and data visualization service. It curates playlists and recommends songs, artists, and albums to users based off of their listening history and habits. 



Challenge

Current music services lack data visualization and Replay aims to fix that by allowing more transparency into a user's music listening habits.

S10 - Explore.png
S10 - Artist Similar Artists.png



Kickoff

To start off, I identified a few key questions that I wanted to answer: Who are the primary users of music apps? What are they trying to accomplish? What are the current problems in this space among competitors? How can we solve this?

I later conducted interviews and research to establish an overarching goal among users. It became clear that most people wanted to find out more about their music habits as well as have more opportunities to explore new music.



Competitive Analysis

To set the stage for Replay, I had to explore current popular music streaming services to better understand the value they provide as well as areas that customers thought were lacking. I identified several key features from user surveys and compared music applications against each other on those metrics to find areas of improvement.

I found that only one of the five competitors offered some form of data visualization - Spotify. However, this is not entirely the case as Spotify's data visualization is only available towards the end of the year when they launch their signature "Spotify Wrapped", thus it is not accessible to users year-round.  

Competitor Analysis Table.png



Evaluating the Market

Before diving further into this project, I wanted to find out how popular music streaming is and whether or not it's on the decline. According to Statista, the global annual music streaming revenue reached an all-time high of 16.9 billion US dollars in 2021. This is more than six times the revenue of 2.8 billion from just six years prior. The estimated revenue for 2022 is roughly 20 billion US dollars, whereas the forecast for 2023 is an estimated 25 billion US dollars. 

With these data and expectations in mind, it is clear that nothing will stop people's love of music and that this industry will only continue to grow.

Source: Statista

Music Streaming revenue worldwide from 2010 to 2021.png



Action Priority Matrix

With the overarching goal in mind, I came up with a list of possible features and plotted them on an Action Priority Matrix. The matrix compares features on two values: Impact versus Effort. This matrix helped me narrow down designs for delivering a Phase 1 MVP by focusing on those in the top left and top right quadrants, otherwise known as "Quick Wins" and "Major Projects" respectively. These quadrants have a high impact to users and are prioritized for the initial launch. The matrix also helped me identify features for a Phase 2 project that can be expanded on in the future.

In the end, I wanted to focus on the data visualization and music exploration features as I found those to be areas users desired the most and would have the most impact.

Action Priority.png



User Profiles

Persona 1.png
Persona 2.png



Information Architecture

Prior to design work, I wanted to set the foundation for each screen by modeling the Information Architecture. The IA will aid me in designing the screen layouts as I can organize the content and assemble the hierarchy of each page.

IA Chart.png



Wireframes

 I created greyscale wireframes to finalize the layout of content on each page and to get a feel for the core designs without committing to a brand style, color, and imagery. The digital wireframes made it easy to adjust and edit components on the page until I found a layout that I was happy with.

For the mobile designs, I opted for a 4-column grid with 16px margins and gutters to ensure visual consistency across all screens.

with redline.png
ALL greyscale.png
ALL greyscale.png



Wireflow

Wireflow.png



Final Screens

Final wireframes.png
Login
Login

press to zoom
Login - dark mode
Login - dark mode

press to zoom
Profile - Settings
Profile - Settings

press to zoom
Login
Login

press to zoom
1/12

Challenge 1

Data Comprehension

Implementing data visualization for users was one of the main goals of this project. However, it was challenging to make large sets of data legible and easy to access. It was also a challenge to make data easy-to-understand at a quick glance. I solved this issue by using familiar graphics such as line graphs and bar charts that users have previously seen. I then opted for simple designs, only showcasing one element or piece of information at a time.

most replayed white.png
Time Graph white.png

Challenge 2

Color Scheme

As a designer, I tend to lean towards a clean and simple aesthetic which often revolves around the color white, light grey, and drop-shadows. However, when I was conducting the competitor analysis, I noticed that many current streaming services opt in favor of a dark-mode aesthetic. I wanted to see if this was just a coincidence and explored some initial designs in light-mode.

I eventually conceded to the dark mode theme as it created a better contrast against the many images. My decision was further solidified by the rise in popularity of 'dark-mode' in many day to day applications even outside of the music industry.

Although I made most of the pages in dark-mode, I will continue to iterate on the designs and produce a light-mode themed version as I do prefer the light-mode splash screen.

Login.png
Login - dark.png



Style Guide

I wanted to use colors that represented technology, happiness, and a sense of modernity. Cool tones like blue and purple are often used to evoke a sense of calm and comfort and are seen in many modern day apps. The bright tag colors bring a sense of excitement and curiosity, balancing out the other calm colors.

For the app, I went with the font Karla as I felt that this typeface provided a lot of flexibility through its many typographical emphasis styles while still being legible and clean.

Style guide.png



Takeaways

As someone who loves exploring new music, working on a project like Replay was extremely rewarding. I got to experiment with many new styles and features that I've never design with before such as dark-mode. Although I was not able to incorporate all the features from my Action Priority Matrix, I will continue to iterate and hopefully release a Phase 2 Product that also includes a light-mode option.

bottom of page