Project Goals
CHALLENGE
Redesign an existing data visualization using the same dataset from the original
ROLE
Designer/Developer
TIME
1 Week
DELIVERABLES
Storyboard, design report, live web server
TYPE
Class-Project
TOOLS
Figma, JavaScript, CSS, HTML, Visual Studio Code, Github
GOALS AND INSPIRATION
The main goal of this project was to create a new visualization inspired by a pre-existing one by reimagining how we could use the same dataset from the original design
The visualization above from The Pudding was the inspirational visualization that we aimed to redesign. The dataset used by The Pudding included 5,000 best selling books and their covers, clustered together by their visual similarity to one another.
We analyzed this visualization and located several design trade-offs that we aimed to change in our redesign:
-
Emphasizes minimalism at the cost of visibility for the filter features
-
No additional details for a cover pop-up on-click
-
As a mosaic display, visualization appears more passive than engaging
-
Pinch-zoom functionality increases burden load on user with so many books together
DESIGN RATIONALE
Based on our analysis of the original visualization, we decided to include the following additions in the redesign:
-
Added a filter bar at the top of the visualization
-
Users can sort through books by genre, or author gender, or both!
-
Search bar brings up all books for a specifically types author
-
Included autocomplete functionality on search bar typing
-
Pop-up view of each book cover on-click yields specific book details
FINAL DESIGN
CHALLENGES
The loading time involved with generating images for each of the 5,000 books was a serious challenge. By splicing the data set, and utilizing heavy pre-processing, we were able to reduce this interval but the site still requires a significant amount of time to generate our interface.
We hoped by adding famous author quotes during the load time, we could help viewers pass the time