Barbara JEANDEAU(Project Manager), Arthur GUILLERMIN HAZAN (Lead Designer),
Hélène PRUVOT (d3.js developer),
Loic SAINT-ROCH (API developer), Charles TALBOT (Back-end developer), Loic PADOWSKI (Data analyst)
Profily.me is the result of a 3 weeks work in 3rd year at HETIC. The only brief we had was to use any kind of data and making something meaningful out of them. As we were all music lovers, we decided to make a live dataviz using facebook and echonest API to collect data and deliver them to the user so he could compare himself with his friends.
Music through data
We wanted the user to dive into music and data, and to make him familiar very fast with the UX. We simplified drastically the UI, and decided to alternate between a dark module, and a light module to bring dynamism throughout the navigation.
So, Profily.me is a single page experience and each module is full-height so you can switch through modules by scrolling.
To easily switch beetween modules, we wanted colours that match on both light and dark background. The red one does de job perfectly, so is the green you’ll see above.
Profily.me colour palette
The logo was the first part of the design made. The colour palette was thought wisely to match with the UI. I wanted an illustration part to be used separately if needed.
As we wanted a scrollable one-page , I chose a simple and easy way to navigate between each modules.
As a result, you can see that some part of the UI are common to each modules to help the used understand the idea.
Hover view of a selected area
Sidebar menu & scroll between modules
We made 2 sidebars colours to perfectly match
with the background of the current module.
For each module, we designed the specific chart that came along with the data we wanted to display. From a simple line chart, to a sexy radar chart, not to mention the dot chart, and the world chart.
Artist location module
Genre comparison module
minutes of listens
minutes of listens
Genre comparison details
Because a picture speaks a thousand words… Scroll down in the browser if you want to see more.
For more informations, do not hesitate to reach out to me.
Switch to next projectMusic Platform