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



www.geoweb.dnv.org/properties



CONCLUSION

• Very successful development process• Very successful beta application

Fast Lightweight Mobile friendly Single code base

• Confidence for future development



AGENDA

SOME HISTORY CHALLENGES DESIGN &

BUILD

SUCCESSES &

DIFFICULTIES

WHAT’S NEXT

For context Why? The worldImportant!Not just nerdy stuff

QUESTIONS

Crickets?



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



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



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



CHALLENGES

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



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



GOALS

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

proof



USABILITY

LUKEW Ideation + Design | www.lukew.com



USABILITY



USABILITY

LUKEW Ideation + Design | www.lukew.com



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



DESIGN & BUILDPHASE ONE – CONTENT



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

DESIGN & BUILDPHASE ONE – CONTENT



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



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


Popular!Keep these!

Ditch these.




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


BasemapPopular!Keep these!




DESIGN & BUILD

• Improve the content & look of our maps

• Clear symbology• Clear typography, better labelling

PHASE TWO - MAPS



DESIGN & BUILDPHASE TWO - MAPS



DESIGN & BUILD

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

PHASE THREE – TECH RESEARCH



DESIGN & BUILD

Many well supported libraries:

Map Engines

Esri Javascript API

Leaflet

Mapbox

OpenLayers




DESIGN & BUILD


HTML5 Frameworks

Bootstrap

Foundation

Boilerplate




DESIGN & BUILD


Javascript Architecture

Ember

Backbone

Angular JS




DESIGN & BUILD



Javascript Architecture

Ember

Backbone

Angular JS



DESIGN & BUILD

Javascript

Angular JS

Map Engine

Leaflet

HTML5

Bootstrap

PHASE FOUR – ALL TOGETHER NOW



DESIGN & BUILD

Javascript

Angular JS

Map Engine

Leaflet

HTML5

Bootstrap

Foundation


ArcGIS forServer

ArcGIS for MobileCollector for ArcGIS

ArcGIS forDesktop



Esri Leaflet on

DESIGN & BUILD

Javascript

Angular JS

Map Engine

Leaflet

HTML5

Bootstrap

Foundation


ArcGIS forServer

ArcGIS for MobileCollector for ArcGIS

ArcGIS forDesktop



GOALS

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

proof

HAZARDS & SOLAR



PAUSE, REGROUP

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

• Ready to build an app



DESIGN & BUILD

PRODUCT BACKLOG

SPRINTBACKLOG

CODE AND TEST

RELEASE PRODUCT INCREMEN

T

SCRUM DEVELOPMENT MODEL

Repeat every two weeks

Daily stand-up meeting



DESIGN & BUILD

SIX WEEKS



PROPERTY VIEWER BETA



WHERE WE’RE AT

• App was launched in beta in July 2014

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



USER FEEDBACK

• Very positive; always includes helpful criticism



USER FEEDBACK



DIFFICULTIES

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



SUCCESSES

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



WHAT’S NEXT

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

• Integration into dnv.org• DNV on GitHub



GEOweb PROPERTY VIEWER

QUESTIONS?

Andrew [email protected]

@durnin@nvandistrict

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY GEOweb PROPERTY VIEWER...

Documents

Transcript of DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY GEOweb PROPERTY VIEWER...