Chartmetric's Design Overhaul and Why It Matters

At Chartmetric, we've made it a top priority to make the user experience on our platform more efficient, more enjoyable, and more clear.

Chartmetric's Design Overhaul and Why It Matters
"Design is not just what it looks like and feels like, design is how it works." Steve Jobs

In the past few months we've begun refreshing Chartmetric’s brand identity; unveiling a new logo and redesigning the interface to symbolize our renewed vision for music & data. As we introduce new tools such as Playlist Journeys and A&R Prediction; we made it a top priority to make the user experience on Chartmetric more efficient, more enjoyable, and more clear. To do that, we rely on user-research to evaluate the usability of Chartmetric’s interface to uncover areas of opportunity as we move forward.

From Artists to Management to A&R Reps looking to spot the next rising star; the use-cases of Chartmetric are varied and specific. To better understand these roles, we conduct customer interviews and observational walk-throughs. While I've spoken to many of you; for those of you I haven't met, I'm Adam– a product designer here at Chartmetric. Design research allows our team to prototype rapidly and ensure we aren’t making assumptions about what tools you need.

You may have already noticed some changes to Chartmetric over the past few months; a direct result of listening to our users and implementing their feedback. Let's take a look at a few updates you may have missed.

Increased Legibility

Chartmetric has a lot of data, one of the challenges the design team faces is
maximizing the legibility of that data so it is accessible and easily understood. To achive that, the page was stripped down to the basic elements and reworked in grayscale to focus on balancing the layout without getting caught up in the details of the color palette and visual aesthetics.

Low-Fidelity Wireframe

Improved Navigation

To increase screen real estate, the navigation tabs have been slimmed down. The busy icons have been removed, displaying only the primary tool used; the search. While the secondary functions; Add Data, Advanced Search, Account Settings and Logout have been nested into the 3-dot drop down menu. Additionally, our refreshed logo with the green/blue gradient has been introduced on the lefthand side!

The navigation bar change - before (top) and after (bottom)

Minimizing Distraction

In this updated layout, you'll notice the secondary navigation bar has moved up and paired with the primary nav bar. Color has been introduced conservatively; the interface is unified by shades of blue derived from our new logo, reserved for hover states and primary interactions. See the image below. Upon page scroll, a block matching the gradient of our logo serves as a clear visual cue of your location on the page.

Previously the color wasn't contributing to the functionality and more so, made it difficult to discern interactive components from ones that are static. The refined layout has a stronger sense of alignment which increases the scannability of the information and the additional white space allows the page to breathe. Here are two screenshots - before and after. The difference is very clear.

Dashboard Hover Menu

After observing folks navigate between artist profiles by either manually searching or repeatedly returning to their dashboard to select an artist they follow– we implemented a dashboard hover menu; a more efficient way to access your favorite Artists, Tracks, Albums et cetera... without having to return to the dashboard page.

Dashboard hover menu for quick access to the favorite artists, tracks, and albums

Fixed Table Header Row

To allow comparison between artists, our tables are packed with data; both vertically and horizontally. Although, once the table header is scrolled past the metrics can be difficult to keep track of. Kicking off with the Artist List page, we began testing headers that are fixed upon scrolling; keeping them in sight. After receiving encouraging response from the Chartmetric community, we'll be refreshing the rest of our tables with this improved functionality.

Add Data to Chartmetric

While there is a way to add to our database via the primary navigation, we had to rethink the user flow after receiving insights from folks unable to figure out how to do so. Realizing users discovered missing information during the search process, we've recently built "Add Data" functionality directly into the search box. Enjoy!

Thank you to everyone who has responded to our design research requests, the insights gained during our conversations are paramount to the success of Chartmetric.

If you'd like to participate in the next round of user research, all opinions are welcome; positive or negative. Your feedback really helps us progress.

You can reach me at [email protected] or [email protected]