"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.
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!
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.
Artist profile page - before (left) and after (right)
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.
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!
