DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING

DISTRICT OF NORTH VANCOUVER 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 For context Why? DESIGN & BUILD SUCCESSES & DIFFICULTIES WHAT’S NEXT Not just nerdy stuff Important! The world 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 2001 Arc. IMS 2009 Flex/Flash 2011 Flex/Flash v 2 2014 HTML 5 • GIS launches GEOweb (geoweb. dnv. org) • P. I. E. , Plans & Drawings • New web mapping paradigm • GEOweb rebuild, launch of five specialized apps • Open Data • Dedicated GIS Application Developers • Backend updates • Launch of GEOtools (internal) • GIS awareness is ubiquitous • Need for mobile support, a better experience • Mature technology

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY CHALLENGES PROPERTIES HAZARDS PROJECTS SOLAR HISTORY • • • Evolving user needs Flash Applications have deviated Better integration needed with DNV web Dated Need a plan for future development

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 PROPERTIES HAZARDS PROJECTS SOLAR HISTORY • • • Evolving user needs Flash Applications have deviated Better integration needed with DNV web Dated Need a plan for future development

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 USABILITY Conway’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 USABILITY Conway’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 USABILITY Conway’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 & BUILD PHASE ONE – CONTENT

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE ONE – CONTENT • Not starting from scratch • 5+ years of user metrics – Basemaps – Layers – Tools – Search Methods

DP e sid am re St A Pr GEOweb o Slo tect io DP p n A e DP Cre Haz a A e W k H rd ild az fi ar DP A St re H d Na or a tu m zar Ne d ra l. E n tw Sa vir ork o ni ta nm r en y DP A Wa Net t Fo te w DP rm r N ork e A a En nd two C er r gy har k /W ac at ter er Su Pu /GH rv ey blic G M Tra on i um ls en B t Fib us S s t re o Ne ps tw Sid ork ew Cr al ks im e (2 Pa 00 rk 0 - s Bi 200 Po ke 5 in Ro ) t Po s o ut pu f In es la tio tere n s De t ns ity A DP DISTRICT OF NORTH VANCOUVER PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE ONE – CONTENT Flash Properties App: times layers were added in 2013 12000 10000 8000 6000 4000 2000 0

DP e sid am re St A Pr GEOweb o Slo tect io DP p n A e DP Cre Haz a A e W k H rd ild az fi ar DP A St re H d Na or a tu m zar Ne d ra l. E n tw Sa vir ork o ni ta nm r en y DP A Wa Net t Fo te w DP rm r N ork e A a En nd two C er r gy har k /W ac at ter er Su Pu /GH rv ey blic G M Tra on i um ls en B t Fib us S s t re o Ne ps tw Sid ork ew Cr al ks im e (2 Pa 00 rk 0 - s Bi 200 Po ke 5 in Ro ) t Po s o ut pu f In es la tio tere n s De t ns ity A DP DISTRICT OF NORTH VANCOUVER PROPERTY VIEWER 10000 8000 6000 4000 DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE ONE – CONTENT Flash Properties App: times layers were added in 2013 12000 Popular! Keep these! Ditch these. 2000 0

DP e sid am re St A Pr GEOweb o Slo tect io DP p n A e DP Cre Haz a A e W k H rd ild az fi ar DP A St re H d Na or a tu m zar Ne d ra l. E n tw Sa vir ork o ni ta nm r en y DP A Wa Net t Fo te w DP rm r N ork e A a En nd two C er r gy har k /W ac at ter er Su Pu /GH rv ey blic G M Tra on i um ls en B t Fib us S s t re o Ne ps tw Sid ork ew Cr al ks im e (2 Pa 00 rk 0 - s Bi 200 Po ke 5 in Ro ) t Po s o ut pu f In es la tio tere n s De t ns ity A DP DISTRICT OF NORTH VANCOUVER PROPERTY VIEWER 10000 8000 6000 4000 DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE ONE – CONTENT Flash Properties App: times layers were added in 2013 12000 Popular! Keep these! Basemap Ditch these. 2000 0

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE TWO - MAPS • Improve the content & look of our maps • Clear symbology • Clear typography, better labelling

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE TWO - MAPS • Improve the content & look of our maps • Clear symbology • Clear typography, better labelling

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE TWO - MAPS • Improve the content & look of our maps • Clear symbology • Clear typography, better labelling

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE TWO - MAPS • Improve the content & look of our maps • Clear symbology • Clear typography, better labelling

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE TWO - MAPS

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE THREE – TECH RESEARCH • One Developer, three months • Client-side only; Server is all good – Maps – Map APIs – Frameworks

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE THREE – TECH RESEARCH Many well supported libraries: Map Engines Esri Javascript API Leaflet Mapbox Open. Layers

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE THREE – TECH RESEARCH Many well supported libraries: Map Engines Esri Javascript API Leaflet Mapbox Open. Layers

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE THREE – TECH RESEARCH Many well supported libraries: HTML 5 Frameworks Bootstrap Foundation Boilerplate

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE THREE – TECH RESEARCH Many well supported libraries: HTML 5 Frameworks Bootstrap Foundation Boilerplate

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE THREE – TECH RESEARCH Many well supported libraries: Javascript Architecture Ember Backbone Angular JS

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE THREE – TECH RESEARCH Many well supported libraries: Javascript Architecture Ember Backbone Angular JS

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE THREE – TECH RESEARCH Many well supported libraries: Javascript Architecture Ember Backbone Angular JS

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE FOUR – ALL TOGETHER NOW Map Engine Leaflet HTML 5 Bootstrap Javascript Angular JS

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE FOUR – ALL TOGETHER NOW Map Engine HTML 5 Javascript Bootstrap Leaflet Angular JS Foundation Arc. GIS for Server Arc. GIS for Desktop Arc. GIS for Mobile Collector for Arc. GIS

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD PHASE FOUR – ALL TOGETHER NOW Map Engine HTML 5 Javascript Bootstrap Leaflet Angular JS Esri Leaflet on Foundation Arc. GIS for Server Arc. GIS for Desktop Arc. GIS for Mobile Collector for Arc. GIS

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY GOALS • • • Device Agnostic Fast Clear and Concise Better maps More property-related info HAZARDS & SOLAR Easy to maintain, scalable, future proof

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER PAUSE, REGROUP • • • Identified problems Set our goals Researched our users’ needs Built better maps Researched the technology • Ready to build an app DESIGNING FOR SIMPLICITY

DISTRICT OF NORTH VANCOUVER GEOweb PROPERTY VIEWER DESIGNING FOR SIMPLICITY DESIGN & BUILD SCRUM DEVELOPMENT MODEL PRODUCT BACKLOG SPRINT BACKLOG CODE AND TEST Daily stand-up meeting Repeat every two weeks RELEASE PRODUCT INCREMENT

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 HTML 5 Additional focused apps – Developers app is up next • Integration into dnv. org • DNV on Git. Hub

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 Durnin adurnin@dnv. org @durnin @nvandistrict