Conducted parallel product analysis, heuristic evaluation and usability testing to understand the usability issues in old-version interactive map.
Redesigned the interface to address issues identified in the research.
Selected color palette, typography and defined the visual style of the interactive map.
Where I got Started?
Scope and limitations
What I learned from other similar products?
When entering Data2go.NYC, a district is selected and the box on the right corner shows the detailed data of that district, which distracts the user 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.
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.
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.
What I learned from analyzing the previous product?
.jpg)
Poor Readability: Text-heavy pages are not very readable.
Poor Consistency: There are a lot of minor-to-moderate aesthetic inconsistency issues throughout the website.
Some tabs in the navigation bar are ordered randomly.
Tabs with similar functions are not placed together, which creates extra recognition work for users when accessing these functions.
Tutorial, News and Community Portraits are not accessible elsewhere beside the Welcome page.
It will create difficulties for user to find this information when they need it later.
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.
How did I translate research insights into product features?
.jpg)
The original information architecture
.jpg)
Refined information architecture
Initial Analysis & Sketches
Low-fi prototypes
What I came up?
Check it out here!
Overview View - allows user to have a general understanding of data distribution.
Detailed View: user explores one specific neighborhood.
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: 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: 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.
Major Refinements
1. Resized the bar chart to contain more data sets.
2. Redesigned the module selector to make it follow the same logic as the one on the Maps page to achieve consistency.
3. Increase the area of the map selector.
Major Refinements
1. Redesigned the layout of this page to emphasize the question and the value selector to help user better navigate this page.
2. Redesigned the style of the chart to draw stronger relation between the dot and the axis.
