Bydelsfakta: Visualising demographic statistics

tl;dr

Bydelsfakta (English: ‘District facts’) is a responsive web application that allow you to examine, discover and filter through various data sets regarding population, living conditions and housing in the municipality of Oslo.

My role

My roles in this project were varied. In some ways this is ‘my baby’ as I was the initial and core team member working on this project. Initially helping to define the boundaries and scope of the project, my role also involved being a main contributor to major design decisions throughout the course of the year.

In addition to leading the research and design, I also wrote the visualisation scripts (custom d3.js graphs) and contributed with developing HTML, CSS (SCSS) and Vue code.

Summary of my key contributions

• User research and discovery
• Wireframes and prototype
• Visual design
• Specifying data structures for front end visualisations
• Design and development of custom visualisations
• Support front end developer with CSS and Vue.js code
• Usability testing
• Tracking and analysing usage

Context

Our client for this project was the Planning and Strategy Department (POS), who initially approached us (Oslo Origo) to assist with digitizing their fact sheets on population, living conditions and housing in the municipality of Oslo.

The original fact sheets were time-consuming to produce and as such, resulted in a low publication frequency (about once every two years). This meant that their readers would often end up with outdated statistics at hand.

Brief

The brief was simple, but not easy:

Digitize the fact sheets into an interactive and accessible web application.

POS would be providing raw data in Excel format, and we were to build a visualisation application consuming and presenting this data.

The PDF fact sheets, which contained various graphs, tables and descriptions, were subject to minor changes both in data and presentation in order to create this application.

Discovery

During my discovery I identified the target groups and interviewed users within these groups. In parallel to building a complete understanding of the user needs, I explored the data sets in order to experiment and figure out the limits and possibilities that lies within them.

Various prototypes were developed – both static and interactive – in order to carry out some visual exploration. These prototypes later turned out to be very beneficial when communicating our concepts with the client.

The top tasks were identified as:

• Comparing statistics between various city districts
• Print and/or screenshot specific graphs for presentations and reports
• Extract raw data for further exploration and transformation
• View historical data for a specific topic
• View statistics on a map

Design, prototype and testing

About a month into the project the first digital sketches were created. This first iteration was used in rapid prototyping loops where each iteration was tested on two or three users before making the most obvious changes.

Various visual styles were tested:

Some visualisations went through more design iterations than others. This one (below) in particular became impossible to implement because of the available data and our data architecture changed later on.

The dark menu bar on the left was later changed to a different design.

Each prototype was tested on users, and we were in continuous dialogue with the client who was providing valuable feedback on the design and features.

Developing the application

In January 2019 I was joined by a front end consultant to help build the application. During the first few weeks we managed to set up a solid app structure in Vue.js, and while I put my main focus on developing the visualisations in d3.js, the other developer worked on the main application code.

At that time we didn’t have access to the actual data, mainly because our data platform was at its infancy and the data transformation scripts weren’t created until later in the year.

Categorizing the raw data sets, the topics and the data visualisation templates was a time consuming and tedious task, and proved to be subject to change frequently for the entire duration of the development process. However, this allowed us to early on loosely define the data structures for each visualisation template which helped me keep momentum when developing the visualisations. Knowing what format and structure the data would be in was crucial when developing custom graphs in d3.js without having a functional backend for data.