Open Police
The design principles behind the open government
platform of the Belgian Police.
www.openpolice.be
@OpenPoliceBE
Open Belgium
29 February 2016, Antwerp

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

On any internet enabled device near you.

www.openpolice.be/sites/
Local Police websites
Used by 75% of Local Police zones & Federal Police

Sessions and Pageviews from 2010 till end of 2015

1. Start with user needs
https://flic.kr/p/eQtasQ

People come to our sites to
accomplish tasks and fulfil needs
Not just to hang out

What does the user need?
without Social Media acquisition
+75% visitors for Contact & Questions

Use case
District officer search

Use case
Your district officer, contact info & office hours

2. Do less
https://flic.kr/p/bwHCXU

Re-use existing resources (like APIs)
Don’t reinvent the wheel every time

http://www.openpolice.be/blog/2014/09/12/streets-database.html
CRAB - AGIV
Flemish streets database

http://www.openpolice.be/stack/
Open Source stack

3. Design with data
https://flic.kr/p/cpzHPw

Don’t make assumptions
Watch and learn from real user behaviour

analytics.google.com

Heatmaps, Recordings, Funnels, Forms - www.hotjar.com

User testing

4. Do the hard work to make it simple
https://flic.kr/p/qhd2dh

Making something
look simple is easy ...
… making something simple to use is much harder

https://twitter.com/Paul_Framp/status/467398108985692160/
Before

https://twitter.com/Paul_Framp/status/467398108985692160/
After

5. Iterate. Then iterate again.
https://flic.kr/p/byypYZ

+400 closed development tickets since September 2013.
Start small and iterate wildly
Add features and refinements based
on feedback from real users

http://www.openpolice.be/blog/2014/09/10/schedule-a-news-article.html
Schedule a news article

6. Build for inclusion
https://flic.kr/p/faH5Lt

Accessible design is good design
Make it inclusive, clear and readable

http://www.dekamer.be/flwb/pdf/53/3403/53K3403001.pdf

http://bradfrost.com/blog/web/mobile-first-responsive-web-design/
Mobile First Progressive Enhanced

Old browsers?
They’ll get the most basic version:
single column layout & not enhanced with Javascript.
It’s that easy!

7. Build digital services, not websites
https://flic.kr/p/gtrSxL

schema.org
JSON Linked Data

http://jsonapi.org/
Provide Open Data
Accessible, machine-readable standardized data
that others can use.
Downloadable spreadsheets or CSV files

http://www.lokalepolitie.be/5388/nieuws.json
RESTful API
The platform is designed around the HTTP protocol. All data is available
through a level 3 JSON REST API.

8. Understand context
https://flic.kr/p/o3ZQHn

Understand the circumstances
Nuisance at night

9. Be consistent
https://flic.kr/p/9KR59t

Same design patterns and language
So users will have a reasonable chance of guessing
what they’re supposed to do

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.

10. Make things open
https://flic.kr/p/nDzaE3

http://www.openpolice.be
Sharing helps

Try it yourself
www.openpolice.be/demo

https://gds.blog.gov.uk/about/
Design Principles inspired by UK’s
Government Digital Service

We build things for the web
www.timble.net
Thank you
www.openpolice.be - @OpenPoliceBE