district of north vancouver geoweb property viewer designing for simplicity geoweb property viewer...
TRANSCRIPT
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 [email protected]
@durnin@nvandistrict