Peter is a web application that provides users with real-time charts, playlists and social data of Korean musicians at their fingertips. It provides actionable music data in real time, which makes users aware of how their songs are consumed on SNS and the web. I focused on creating data visualizations that help musicians who are not familiar with numerical data to understand their data more easily.
- Brand Design
- Product Design
To start the project, it was important to understand the origins of my client's business. Space Oddity, a music entertainment company, found that musicians and their agents wanted to keep track of music consumption and musicians’ popularity. To solve this problem, Space Oddity gathers online data related to musicians and provides valuable consultation to their clients based on the analysis of massive amounts of music-related data. Peter provides real-time monitoring of six charts, social profiles, radio, TV, and several other websites in real-time.
Peter offers actionable data to help users stay informed and make better decisions. The most important task was to organize the data by update period.
There are so many crawling lists, of which have diffrent update period and they needed to be diffrently displayed in the UI.
Organizing Content
Content should be organized in a way that encourages user interaction, easy skimming, and accessible entry to other menus.
Visualizing Data
Since understanding numeric data takes a lot of effort, data should be visualized clearly and simply.
Branding
The UI style should be modern enough to entertain users. The original version looked like an old-fashioned, typical analytic solution tool.
Peter's former UI had several iterations on information architecture. It had several sub-menus of their sub-menus, which made the menus too difficult for users to navigate. I suggested that the menu should be simpler with only one sub-menu. As a result, the last version of Peter’s architecture became much more effective and easy to navigate.
There are so many crawling lists, of which have diffrent update period and they needed to be diffrently displayed in the UI.
Our biggest challenge in this project was designing the navigation of the data from various sources. The sources of our content were: SNS (Facebook, Instagram), music streaming services (Melon, Bugs, Mnet, Naver Music, Genie, Soribada), and search engines (Naver, Daum etc). To organize the content, we categorized the menu into two main sections. The first one was updated every time the user pushed the renew button, and the other one was crawling data within the range that users manually set.
Before committing to a single UI design concept, carefully studying data-related UI design allowed me to suggest the most effective design to my client.
My client and I decided to go with the light, uncluttered, accent-focused color scheme seen in Version A. This UI would help users easily visualize sentiments through the use of a light background and two contrasting colors.
My client were given the choices between 3 UI concepts and they were satisfied with their final decision.
The home screen is designed to encourage user interaction. Swiping left and right allows direct access to other data. The segmented bar has all categories, which allows artists to reach the other data easily by swiping left and right.
Soundcharts in Peter monitors six music streaming services in real time. It provides an overview for quick reporting, as well as an in-depth view, where users can choose to dive in to hourly rankings status and their rank in the service.
One of the key features Peter offers is that it gives information about how people react to artists' songs. Peter's line graph, pie chart, and scatterplots should help users to detect positive, negative, and neutral reactions. Visualization of sentiment analysis helps musicians and agencies to easily understand positive and negative reactions to their content.
The goal was to make it easier and more comfortable for musicians to access their data. We wanted to eliminate the awkwardness and clumsiness they felt when using the old data analysis tool. Since it was my designing a data analysis app, it required a lot of research and case study. Through this process, we were able to produce good results.
