Project Goals
CHALLENGE
Build an interactive visualization that utilizes a dataset of Boston restaurants
ROLE
Designer/Front-end
TIME
1 Week
DELIVERABLES
Storyboard, design report, live web server
TYPE
Class-Project
TOOLS
Figma, JavaScript, CSS, HTML, Visual Studio Code, Github
GOALS AND STORYBOARD
When choosing the perfect restaurant for a date, we consider key factors: ​
Location
Rating
Cuisine
Knowing this, I wanted to give users the ability to filter based on these factors. I designed the following storyboard to show how users should interact with the final visualization
DEVELOPEMENT PROCESS
After creating an initial visualization based on the storyboard, I realized that the map and the filters should be horizontally stacked to reduce the amount of scrolling required by the user.
Additionally, I recognized that the number of reviews a restaurant has on yelp could contribute to a user's trust of the establishment and should be included in the filters.
ADDITIONAL TRADE-OFFS
1. To limit overcrowding, we had to reduce the amount of restaurant information displayed to location only
2. A hover feature would offer more restaurant details, but would be overburdening so we limited this to restaurant name
FINAL DESIGN
