How might we refine the original website to make users easily access and compare data of different NYCHA developments?
Good interactive map designs allow the user to smoothly switch between
the "map view" and the "detailed view".
When entering Data2go.NYC, a district is selected and the box on the right corner shows the detailed data of that district, which distracts theuser from seeing the whole view of the map.
A good example is Breathe London, it provides the user with a large picture view of the city with colored dots showing air pollution sensors across the city, without any unnecessary details before the user having any further action.
Most interactive maps have an introduction page that gives a brief of what this map is about, data source and how to use, etc. For maps about social justice, the intro page is a great place to indicate the impact and meaning of this work.
The introduction page of data2go.nyc contains contains too much unnecessary information and is not organized in a clear hierarchy.
Drug Overdose Deaths in Appalachia interactive map has a clearly structured introduction page illustrating the causal relationship between Opioid overdoes and life expectancy. It helps raise awareness around this issue.
Good interactive maps all make the data mapping area strongly contrast with the rest of the geographic area.
Data2go.nyc has a lot of details on both inside and outside of the data mapping area, which make the map pretty messy and distracting.
Life Expectancy by ZIP Code in Texas does a good job of distinguishing Texas from the surrounding areas. The map is minimal but has enough details for theuser to have a sense of the location of Texas to the whole country.
2 paths of heuristic evaluation and 5 user testing sessions were conducted to identify usability problems.
Problems below are repetitive on the website, they are not severe independently, but they collectively show a breach of these usability principles and hugely affect user experience.
Text-heavy pages are not very readable.
There are a lot of minor-to-moderate aesthetic inconsistency issues throughout the website.
All 3 major issues are related to the information architecture of the website. They were problems caused by the mislocation of information.
It will create difficulties for user to find this information when they need later.
Some tabs in the navigation bar are ordered somewhat randomly.
Tabs with similar functions are not placed together, which creates extra recognition work for users when accessing these functions.
Features of Interest tab is not obvious for
user to be aware.
It's highly possible that user will ignore this feature while using the this page.
The number and size of the mapping area are two major differences between the old website and the new one.
These changes will influence the design of 3 major pages, the Maps and Dashboards page need adjustments most.
Search bar will become the main way to find a specific mapping area instead of clicking.
1. It becomes difficult for user to find and select mapping areas by clicking on the map directly.
2. Be careful about the color choice: small shape with a light color might have a bad visibility on the map
The size of the chart bar needs to be enlarged and the layout requires a redesign.
1. There will be 200+ data for each bar chart, the current size doesn't fit any more.
2. The current selector doesn't work any more due to the tiny size of NYCHA development. Instead, a resizable map will be the solution together with a search bar.
We began the development process with the redesign of the website's information architecture.
5 major changes are listed below, color coded.
We used various prototyping techniques along the process to fulfill different needs: For internal brainstorm and communication purpose, we used quick drawings to share ideas and build on each other's design; while communicating progress and results to the client, we made more real-looking prototypes to better engage the client in the conversation.
map view (top)
detailed view (right)
Old website | combined and confused
On the old website, there is only one search bar for both districts and indicators without clear instruction of what user should use it to search for.
New website | split, redesigned and relocated
I split the search bar into two, one for indicators and another for districts. They were also redesigned and relocated to create a more intuitive user experience. The indicator search bar is now inside the indicator selector and the district search bar is larger and located in a more obvious location because it will be the major way for searching a district.
Old website | a wordy explaination with poor accessibility
Tutorial is a document-like webpage with a lot of text and user can only access it from the introduction page.
New website | 3 interface overlays
On the new website, the tutorial is redesigned as an overlay of the interface, introducing how to use the interface in an engaging way. User can easily turn it on and off on 3 major pages.
Old website | located in the navigation bar
The feature selector was a tab in the navigation bar, which is a wrong level of hierarchy for this function to be. User ignores this function easily as the result of this mislocation.
New website | embeded in the main view
This function was relocated to the main view to draw a stronger connection with the map. It was also renamed as "what's in the area?" for easy understanding, especially for NYCHA residents.