Genre’s across generations.
The design.
Genres across Generations was a one-month design project within a 'Data Visualization' course at Sydney University. Our challenge was to transform existing online data into an engaging interactive interface. Although the course didn't emphasize user-centric processes, we took the initiative to conduct a series of usability tests guided by heuristics to ensure the interface's usability.
Design team: Eden.G, Harrison.K, and Khaveer.N. My primary role in the team was the UI and UX design and research.
The bubble chart - size indicates popularity within that year
The data - we provide a colour legend and a list of the top 5 songs.
The range - users can view and manipulate data from 2019 to 1960’s
Our design choice centered on a bubble chart, which we found to be harmonious with the vinyl backdrop and lent a playful touch to the interface. To stay true to the music theme, we structured the UI to mimic a vinyl player. The left-hand side of the interface serves as the genre legend, with additional information about the top songs within each genre for a given year. To ensure the usability of our design, we conducted more than 10 usability tests, with a particular focus on whether the interface met our goal of feeling ‘playful’.
The process.
-
Our design journey began with a succinct brief: 'Create an engaging interactive data visualization.' We started with finding an extensive dataset tracking music trends over the years. Then, we embarked on a competitor analysis, scrutinizing various music genre visualizations. We engaged in interviews with passionate music enthusiasts, which served as a springboard for our creative ideation on how best to bring this data to life
-
Following a 'Crazy 8's' brainstorming session, we compiled a comprehensive wishlist of features and touchpoints we aimed to provide our users. Our vision encompassed a genre legend, the core data visualization, a range slider, a search bar, and additional delightful nuggets of information about popular songs. We refined the overall design through two iterations, subjecting it to 10 rounds of usability studies to align with design heuristics.
-
We translated our design into a functioning website, adapting it as necessary to fit within the assignment's time constraints.