Prototype Design Session Sharing - Mockups + Notes

[NealHumphrey]

This issue is a central place to store activity related to our two prototype design sessions.

---

Update: In addition, please post links to any inspiring websites or visualizations you've seen! It doesn't have to be housing, just anything that has some element you think we could draw inspiration from. See my starter list below.

Update 2: Here are the handouts for the 12/15 Session! Some of it is duplicated from last time, some new: 12-15-handouts-housing-insights

---

• Notes are available here
• Homework assignment before our 12/15 hacknight! Choose one of the scenarios from the list provided at the hacknight and sketch (pen and paper!) an idea for the 'perfect homepage' to solve that problem. Take a picture or scan your sketch and add it as a file in the comments section of this issue.
• Electronic versions of handouts attached below.

Summary of design criteria based on our user profiles so far: "I prefer a tool...." - what are the ~3 most important design principles for this user?

Policymaker 1) Build a narrative / story 2) Timely information - up to date more important than 100% verified data 3) Verifiable historical data - while timely info is important, 'citeable data' and analysis derived from only citeable data (i.e. excluding incomplete timely data) should be clearly distinguished 4) Summary-forward, but allow for deeper analysis

Tenant Advocate 1) Alerts me to new info instead of requiring constant review 2) Helps me be pro-active 3) Allows me to quickly asses properties on the criteria I deem important

Policy Advocate 1) Efficient with time / quick hitting 2) Lead with the story - the ability to explore the data on your own is important, but when balancing this tradeoff the story/narrative should come first 3) Make the data/findings transportable - export and embed graphs in websites and reports

[NealHumphrey]

Handouts from the session: UserProfiles.pdf interesting-data-sources.pdf ProjectSummaryAgenda.pdf

And a couple pictures!

[br-mcdermott]

I found it very difficult to think like anything but a tenant/affordable housing advocate so I started out with what I thought I would want if I could get it. I would want two main pages, one at the level of area and one at the level of building or unit. page 1 advocate_BM.pdf

Ok I re-thought this first attempt. As in the example given in mockup, we should be able to have more comparison on the first main page but still allow a user to focus on a Ward or Neighborhood. Advocates will still want to be able to ask for info on a particular building or unit without necessarily knowing the Neighbourhood it is in and I am struggling with a clean way to make that available on the first page.

[NealHumphrey]

Here's several different ideas for different sections or views of the tool that I came up with:

Single building view:

Losing buildings:

Ward-blocks homepage:

Sortable blocks homepage:

Recent TOPA notices:

[br-mcdermott]

I think this visualization by Harlan Harris is great. I shows how rents in stabilized units can rise quickly even with a low cap on increases for sitting tenants due to high turnover and vacancy increases

https://harlanh.shinyapps.io/rent-stabilization-policy-viz/

[NealHumphrey]

Interesting links to check out:

• http://www.crimeinchicago.org/ - interesting navigation technique - showing a bar graph by Ward, clicking a bar brings up a heatmap of that selection in the 'compare' section below. Clicking the resulting Ward name reveals a nice preview, and then all details takes you to an in depth ward page. Nice clean visual based navigation.

• http://nhumphrey.com/projects/myersbriggs-visualizer/ - the only thing I wanted to point out about this one is how the transitions work from one section to the next. Each dot represents a person, there are 4 pairs of categories (e.g. E vs I then N vs F). Moving from category to category uses color change and rearranging the dots to show which people in category 2 came from which spot in category 1. Could use this in resorting our buildings.

DC Office of Zoning - they just released a bunch of new stuff, great examples to draw from:

• http://dcgis.maps.arcgis.com/apps/MapJournal/index.html?appid=ae5830535a384a7f9ae40527f607b32e - uses left pane scroll to repaint a right pane map. Illustrative pictures help contextualize definitions (e.g. residential zones vs. residential flat)
• http://dcoz.dc.gov/onlineservices/changemap.shtm - left/right slider reveals the difference between old and new. Maybe we can do something similar to show neighborhood change? e.g. change in demographics, income, relative rent levels, etc.

DCPS budgets - previous Code for DC project. Top of page has toggles to filter by ward and other criteria. Especially like how the line graphs work if you toggle the 'graphs' view instead of the 'table' view. http://dcpsbudget.ourdcschools.org/

[NealHumphrey]

A very similar tool to the purpose we are trying to build: http://coredata.nyc/

[NealHumphrey]

Another idea, this one for visualizing neighborhood/ward trends across lots of metrics (demographics, rent, etc.)

[NealHumphrey]

Inspirational example from @kelshew: basic overlay of point-based data (schools) over neighborhood heatmap (income). Could be a simple view that we could replicate for buildings as points. Key design component I think is important is the classification of the point-based data (here above/below average performance).

[joawu]

http://cps.edu/ScriptLibrary/Map-SchoolLocator/index.html

This was created to help Chicago parents compare Chicago's public schools!

Without entering anything into the search field, click the magnifying glass. This will trigger a drop down with all the schools.

You can then filter this list of schools by grade level, rating, or type of school.

You can also click the checkbox next to any of the school names to add the school to a running log at the bottom of the screen that compares the schools on select indicators (# of students, rating, standardized test scores, etc.)

Next! Click on any school name —> click the “more info” button —> opens up a new page with a smorgasbord of information. This information is then organized into five tabs. Each tab has a "quick glance" section and then more details below.

I like a lot of things about this example!

• the ability to filter schools
• the ability to select schools to compare
• the blend of micro and macro level views (individual schools as well as map)
• how data is displayed in summary and detail form

[NealHumphrey]

On the schools topic, here's another one from @cmgiven: http://atriskfunds.ourdcschools.org/

Noteable design elements: -'Macro' level can yield insights by filtering (although might be better for our purposes if toggling between categories was easier, such as by using color, to show comparison between groups) -Clean integrated micro level view by hovering and selecting dots.

[NealHumphrey]

NY Times visualization of the US budget: http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html?_r=0

Notable design elements:

• Threshold-based color coding (based on % increase/cut) is useful view
• Sizing bubbles emphasizes trends between large/small categories and shows which ones are most important. -Toggling between views animates the bubbles to split into categories, e.g. mandatory vs. discretionary, connecting different views to each other.

And, a presentation (where I found this link) talking about making force directed graphs in D3: http://vallandingham.me/abusing_the_force.html

[ostermanj]

Here are some rather rough sketches of big-picture elements for each scenario.

Policy advocate #1

Policy advocate #2

Policymaker #1

Tenant advocate #1

Tenant advocate #2

[salomoneb]

http://tipstrategies.com/interactive/2014_map/

I like using a draggable slider to dynamically show changes over time. The animation when you click the play button is nice, too, but may be more useful for a policy group presentation than an advocate looking for information.

The attractive thing about a slider like this is that it can easily pair with other visuals. This sketch isn't necessarily how I think the design should look, but illustrates how we can use one variable to simultaneously change multiple displays. (Sorry about the orientation; GitHub's rotating this in the preview for some reason.)

[NealHumphrey]

Danilo from DHCD provided this link as another example tool, this one being affordable housing focused:

"Here is another tool that might provide some good or bad examples of how to treat these data." https://egis.hud.gov/cart/#

[NealHumphrey]

Also see #46

[NealHumphrey]

Closing this ticket! I've added all the design ideas to the /mockups folder in the repository for ease of browsing. Sticky-dot voted drawings will be added there as well.