TOP

OurHome.NYC

An interactive map showing health-related, tract-level data of NYCHA developments,
for Measure of America.
For economic considerations, the client wanted to tweak their previously published interactive map Data2go.NYC to fit the needs of a new product, OurHome.NYC, a similar interactive map that shows different data sets. Usability refinement and new features adaptation are 2 major components of the project. I transferred insights from usability research to design solutions, prototyped and refined them to make sure they truly solve the problems. Along the process, I communicated with the client team frequently to keep their opinions in the loop.
Duration
6 weeks
Design Team
Humantific
Client
My Role
Usability Research, Ideation, Wireframing, Prototyping, Client Communication
Goals

How might we refine the original website to make users easily access and compare data of different NYCHA developments?

Parallel Products Analysis
1/
Smooth transition between "map view" and "detailed view"

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.

2/
A well-designed introduction page

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.

3/
Distinguished data mapping area

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.

Usability Testing
1/
Methods

2 paths of heuristic evaluation and 5 user testing sessions were conducted to identify usability problems.

Heuristic Evaluation
Usability Testing
2/
Major Global Usability Issues

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.

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.

3/
Major Local Usability Issues

All 3 major issues are related to the information architecture of the website. They were problems caused by the mislocation of information.

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 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.

New Features
1/
Major differences

The number and size of the mapping area are two major differences between the old website and the new one.

Data2go.nyc(old website)'s mapping area:
50+ community districts
large on the map
OurHome.nyc(new website)'s mapping area:
200+ NYCHA developments
small on the map
2/
What does it mean?

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.

Develop
1/
Refined Information Architecture

We began the development process with the redesign of the website's information architecture.
5 major changes are listed below, color coded.

  • Reorder the navigation tabs. Cluster the tabs with similar function.
  • Move Features of Interest from the navigation bar to the main view of the Maps page.
  • Add a new tab on the navigation called News, move News and Community Portraits links
    from Welcome to the News tab.
  • Add Tutorial to the main views of the Maps, Dashboard and Connections page.
  • Remove Stay Informed tab and move the subscription form to the Contact tab.


Before


After

2/
Prototype & Iteration

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.

Internal Communication
External Communication (with the client)
Final Design
Main function 1: Maps

map view (top)
detailed view
(right)


Major Refinement 1: Search bar

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.

Major Refinement 2: Tutorial

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.

Major Refinement 3: Feature selector

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.

Main function 2: Connections
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.
Main function 3: Dashboards
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 axises.