district of north vancouver geoweb property viewer designing for simplicity geoweb property viewer...

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

GEOweb PROPERTY VIEWER

DESIGNING FOR SIMPLICITY

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

www.geoweb.dnv.org/properties

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

CONCLUSION

• Very successful development process• Very successful beta application

Fast Lightweight Mobile friendly Single code base

• Confidence for future development

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

AGENDA

SOME HISTORY CHALLENGES DESIGN &

BUILD

SUCCESSES &

DIFFICULTIES

WHAT’S NEXT

For context Why? The worldImportant!Not just nerdy stuff

QUESTIONS

Crickets?

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

The DISTRICT of NORTH VANCOUVER

• Around 85,000 Residents• GIS Section = 3 Analysts + 1 Coordinator + 1 Manager (Biz Systems

& GIS)• Dev Team = 2 Application Developers + 1 Manager

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

HISTORY

• GIS launches GEOweb (geoweb.dnv.org)• P.I.E., Plans & Drawings

2001ArcIMS

• New web mapping paradigm• GEOweb rebuild, launch of five specialized

apps• Open Data

2009Flex/Flash

• Dedicated GIS Application Developers• Backend updates• Launch of GEOtools (internal)

2011Flex/Flash

v2• GIS awareness is ubiquitous• Need for mobile support, a better experience• Mature technology

2014HTML5

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

CHALLENGES

• Evolving user needs• Flash• Applications have deviated• Better integration needed with DNV

web• Dated• Need a plan for future development

PROPERTIES HAZARDS PROJECTS SOLAR HISTORY

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

CHALLENGES

• Evolving user needs “Why doesn’t this work on my phone?”

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

CHALLENGES

• Evolving user needs• Flash• Applications have deviated• Better integration needed with DNV

web• Dated• Need a plan for future development

PROPERTIES HAZARDS PROJECTS SOLAR HISTORY

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

GOALS

• Device Agnostic• Fast• Better maps• Clear and Concise• More property-related info• Easy to maintain, scalable, future

proof

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

USABILITY

LUKEW Ideation + Design | www.lukew.com

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

USABILITY

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

USABILITY

LUKEW Ideation + Design | www.lukew.com

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

USABILITYConway’s Law

“Organizations which design systems ... are constrained to produce designs which are copies of the communication structures of these organizations.”

— M. Conway, 1968

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

USABILITYConway’s Law

“Organizations which design systems ... are constrained to produce designs which are copies of the communication structures of these organizations.”

— M. Conway, 1968

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

USABILITYConway’s Law

“Organizations which design systems ... are constrained to produce designs which are copies of the communication structures of these organizations.”

— M. Conway, 1968

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILDPHASE ONE – CONTENT

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

• Not starting from scratch• 5+ years of user metrics– Basemaps– Layers– Tools– Search Methods

DESIGN & BUILDPHASE ONE – CONTENT

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

DPA Strea

mside P

rotec

tion

DPA Slope H

azard

DPA Creek H

azard

DPA Wild

fire Haza

rd

Storm

Network

DPA Natural

Envir

onment

Sanita

ry Netw

ork

Wate

r Netw

ork

DPA Form

and Chara

cter

DPA Energ

y/Wate

r/GHG

Public Tra

ils

Surve

y Monumen

ts

Bus Stops

Fibre

Network

Sidew

alks

Parks

Crime (

2000-2005)

Bike Routes

Points of In

terest

Population Den

sity

0

2000

4000

6000

8000

10000

12000

Flash Properties App: times layers were added in 2013

PHASE ONE – CONTENT

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

DPA Strea

mside P

rotec

tion

DPA Slope H

azard

DPA Creek H

azard

DPA Wild

fire Haza

rd

Storm

Network

DPA Natural

Envir

onment

Sanita

ry Netw

ork

Wate

r Netw

ork

DPA Form

and Chara

cter

DPA Energ

y/Wate

r/GHG

Public Tra

ils

Surve

y Monumen

ts

Bus Stops

Fibre

Network

Sidew

alks

Parks

Crime (

2000-2005)

Bike Routes

Points of In

terest

Population Den

sity

0

2000

4000

6000

8000

10000

12000

Flash Properties App: times layers were added in 2013

Popular!Keep these!

Ditch these.

PHASE ONE – CONTENT

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

Ditch these.

DESIGN & BUILD

DPA Strea

mside P

rotec

tion

DPA Slope H

azard

DPA Creek H

azard

DPA Wild

fire Haza

rd

Storm

Network

DPA Natural

Envir

onment

Sanita

ry Netw

ork

Wate

r Netw

ork

DPA Form

and Chara

cter

DPA Energ

y/Wate

r/GHG

Public Tra

ils

Surve

y Monumen

ts

Bus Stops

Fibre

Network

Sidew

alks

Parks

Crime (

2000-2005)

Bike Routes

Points of In

terest

Population Den

sity

0

2000

4000

6000

8000

10000

12000

Flash Properties App: times layers were added in 2013

BasemapPopular!Keep these!

PHASE ONE – CONTENT

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

• Improve the content & look of our maps

• Clear symbology• Clear typography, better labelling

PHASE TWO - MAPS

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

• Improve the content & look of our maps

• Clear symbology• Clear typography, better labelling

PHASE TWO - MAPS

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

• Improve the content & look of our maps

• Clear symbology• Clear typography, better labelling

PHASE TWO - MAPS

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

• Improve the content & look of our maps

• Clear symbology• Clear typography, better labelling

PHASE TWO - MAPS

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILDPHASE TWO - MAPS

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

• One Developer, three months• Client-side only; Server is all good –Maps–Map APIs– Frameworks

PHASE THREE – TECH RESEARCH

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

Many well supported libraries:

Map Engines

Esri Javascript API

Leaflet

Mapbox

OpenLayers

PHASE THREE – TECH RESEARCH

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

Many well supported libraries:

Map Engines

Esri Javascript API

Leaflet

Mapbox

OpenLayers

PHASE THREE – TECH RESEARCH

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

Many well supported libraries:

HTML5 Frameworks

Bootstrap

Foundation

Boilerplate

PHASE THREE – TECH RESEARCH

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

Many well supported libraries:

HTML5 Frameworks

Bootstrap

Foundation

Boilerplate

PHASE THREE – TECH RESEARCH

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

Many well supported libraries:

Javascript Architecture

Ember

Backbone

Angular JS

PHASE THREE – TECH RESEARCH

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

Many well supported libraries:

Javascript Architecture

Ember

Backbone

Angular JS

PHASE THREE – TECH RESEARCH

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

Many well supported libraries:

PHASE THREE – TECH RESEARCH

Javascript Architecture

Ember

Backbone

Angular JS

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

Javascript

Angular JS

Map Engine

Leaflet

HTML5

Bootstrap

PHASE FOUR – ALL TOGETHER NOW

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

Javascript

Angular JS

Map Engine

Leaflet

HTML5

Bootstrap

Foundation

PHASE FOUR – ALL TOGETHER NOW

ArcGIS forServer

ArcGIS for MobileCollector for ArcGIS

ArcGIS forDesktop

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

Esri Leaflet on

DESIGN & BUILD

Javascript

Angular JS

Map Engine

Leaflet

HTML5

Bootstrap

Foundation

PHASE FOUR – ALL TOGETHER NOW

ArcGIS forServer

ArcGIS for MobileCollector for ArcGIS

ArcGIS forDesktop

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

GOALS

• Device Agnostic• Fast• Clear and Concise• Better maps• More property-related info• Easy to maintain, scalable, future

proof

HAZARDS & SOLAR

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

PAUSE, REGROUP

• Identified problems• Set our goals• Researched our users’ needs• Built better maps• Researched the technology

• Ready to build an app

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

PRODUCT BACKLOG

SPRINTBACKLOG

CODE AND TEST

RELEASE PRODUCT INCREMEN

T

SCRUM DEVELOPMENT MODEL

Repeat every two weeks

Daily stand-up meeting

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DESIGN & BUILD

SIX WEEKS

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

PROPERTY VIEWER BETA

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

WHERE WE’RE AT

• App was launched in beta in July 2014

• Promoted feedback!– Online survey– Twitter– Emails– Phone calls

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

USER FEEDBACK

• Very positive; always includes helpful criticism

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

USER FEEDBACK

• Very positive; always includes helpful criticism

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

USER FEEDBACK

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

USER FEEDBACK

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

USER FEEDBACK

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

USER FEEDBACK

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DIFFICULTIES

• Browser compatibility• Consistency on all form factors• Printing• Dealing with Open Source projects– Things change quickly– Bugs

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

SUCCESSES

• Single code base• Confidence in development plan• Happy users– Realtors– Roofers– Assessors– DNV Utilities– DNV Construction

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

WHAT’S NEXT

• Measure tool• SEO• GEOtools HTML5• Additional focused apps– Developers app is up next

• Integration into dnv.org• DNV on GitHub

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

DISTRICT OF NORTH VANCOUVER

GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY

GEOweb PROPERTY VIEWER

QUESTIONS?

Andrew Durninadurnin@dnv.org

@durnin@nvandistrict