top of page
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.
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.
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
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.
User Profiles
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.
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.
Wireflow
Final Screens
Login
Login - dark mode
Profile - Settings
Login
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.
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.
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.
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