open city, smart city - tom janssens
TRANSCRIPT
![Page 1: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/1.jpg)
Open Police
The design principles behind the open government platform of the Belgian Police.
www.openpolice.be@OpenPoliceBE
Open Belgium29 February 2016, Antwerp
![Page 2: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/2.jpg)
Who are we?
www.timble.net
● I’m Tom Janssens (@janssenstom)
● Multidisciplinair and fully remote team, 15 strong
● Lead by Joomla co-founder Johan Janssens
● Deep roots in Open Source
● Developing the Open Police platform since 2010
![Page 3: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/3.jpg)
On any internet enabled device near you.
![Page 4: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/4.jpg)
www.openpolice.be/sites/
Local Police websitesUsed by 75% of Local Police zones & Federal Police
![Page 5: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/5.jpg)
Sessions and Pageviews from 2010 till end of 2015
![Page 6: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/6.jpg)
1. Start with user needshttps://flic.kr/p/eQtasQ
![Page 7: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/7.jpg)
People come to our sites to accomplish tasks and fulfil needs
Not just to hang out
![Page 8: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/8.jpg)
What does the user need?without Social Media acquisition
+75% visitors for Contact & Questions
![Page 9: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/9.jpg)
Use caseDistrict officer search
![Page 10: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/10.jpg)
Use caseYour district officer, contact info & office hours
![Page 11: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/11.jpg)
2. Do lesshttps://flic.kr/p/bwHCXU
![Page 12: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/12.jpg)
Re-use existing resources (like APIs)
Don’t reinvent the wheel every time
![Page 13: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/13.jpg)
http://www.openpolice.be/blog/2014/09/12/streets-database.html
CRAB - AGIVFlemish streets database
![Page 14: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/14.jpg)
http://www.openpolice.be/stack/
Open Source stack
![Page 15: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/15.jpg)
3. Design with datahttps://flic.kr/p/cpzHPw
![Page 16: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/16.jpg)
Don’t make assumptions
Watch and learn from real user behaviour
![Page 19: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/19.jpg)
User testing
![Page 20: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/20.jpg)
4. Do the hard work to make it simplehttps://flic.kr/p/qhd2dh
![Page 21: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/21.jpg)
Making something look simple is easy ...
… making something simple to use is much harder
![Page 22: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/22.jpg)
https://twitter.com/Paul_Framp/status/467398108985692160/
Before
![Page 23: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/23.jpg)
https://twitter.com/Paul_Framp/status/467398108985692160/
After
![Page 24: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/24.jpg)
5. Iterate. Then iterate again.https://flic.kr/p/byypYZ
![Page 25: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/25.jpg)
+400 closed development tickets since September 2013.
Start small and iterate wildly
Add features and refinements based on feedback from real users
![Page 26: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/26.jpg)
http://www.openpolice.be/blog/2014/09/10/schedule-a-news-article.html
Schedule a news article
![Page 27: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/27.jpg)
6. Build for inclusionhttps://flic.kr/p/faH5Lt
![Page 28: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/28.jpg)
Accessible design is good design
Make it inclusive, clear and readable
![Page 29: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/29.jpg)
http://www.dekamer.be/flwb/pdf/53/3403/53K3403001.pdf
![Page 30: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/30.jpg)
![Page 31: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/31.jpg)
http://bradfrost.com/blog/web/mobile-first-responsive-web-design/
Mobile First Progressive Enhanced
![Page 32: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/32.jpg)
Old browsers?
They’ll get the most basic version: single column layout & not enhanced with Javascript.
It’s that easy!
![Page 33: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/33.jpg)
![Page 34: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/34.jpg)
![Page 35: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/35.jpg)
7. Build digital services, not websiteshttps://flic.kr/p/gtrSxL
![Page 37: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/37.jpg)
http://jsonapi.org/
Provide Open Data
Accessible, machine-readable standardized data that others can use.
Downloadable spreadsheets or CSV files
![Page 38: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/38.jpg)
http://www.lokalepolitie.be/5388/nieuws.json
RESTful APIThe platform is designed around the HTTP protocol. All data is available
through a level 3 JSON REST API.
![Page 39: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/39.jpg)
8. Understand contexthttps://flic.kr/p/o3ZQHn
![Page 40: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/40.jpg)
Understand the circumstances
Nuisance at night
![Page 41: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/41.jpg)
9. Be consistenthttps://flic.kr/p/9KR59t
![Page 42: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/42.jpg)
Same design patterns and language
So users will have a reasonable chance of guessing what they’re supposed to do
![Page 43: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/43.jpg)
http://en.wikipedia.org/wiki/Digital_divide
Digital divide
The gap between those who have access to information and the skills to make use of it and
those who do not have the skills.
Average digital literacy decreases when digital audience increases.
![Page 44: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/44.jpg)
10. Make things openhttps://flic.kr/p/nDzaE3
![Page 47: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/47.jpg)
https://gds.blog.gov.uk/about/
Design Principles inspired by UK’s Government Digital Service
![Page 48: Open City, Smart City - Tom Janssens](https://reader033.vdocuments.site/reader033/viewer/2022042708/58ad755b1a28ab2a768b50e3/html5/thumbnails/48.jpg)
We build things for the webwww.timble.net
Thank youwww.openpolice.be - @OpenPoliceBE