National Open Data Portal

Role

Interaction Design, Requirements Analysis and Visualization

Client

General Authority for Statistics

Challenge

How can we create an interactive open data platform that citizens can use and make sense out of the data provided.

A position paper was published at CSCW that discusses the bigger vision and inspire the design of the platform.

Jumana Almahmoud, Anas Alfaris 2017. Position Paper: Bridging the Gap between Open Data and Data Sensemaking for more Engaged Citizens. ACM Conference on Computer Supported Cooperative Work and Social Computing (CSCW '17). ACM, New York, NY, USA. pdf

Solution

The user interface will reflect the main goal of the website and the identity of GAStat. Users will able view and access the platform from any device due to the responsive design provided. It will ensure a unified user experience across the different page and sections as will be described in the following paragraphs. In addition to the seamless user experience, the platform will provide data visualizations in different patterns to provide a better understanding to the users while navigating through the different datasets through the portal. The home page provides different views and access depending on the type of users.

Users could be data publishers or data consumers and the interface will adapt to their needs respectively. Data publishers will have a view in which it will allow them to perform the following tasks:

Datasets: Upload new datasets, view or edit existing datasets that available on the platform.
Visualization: Explore existing visualizations or create new ones based on the preference of the users and the nature of the dataset. Creating new visualization will be a dynamic function and will provide flexibility to the users to allow them to edit everything starting for the color to the axes.
Analysis: View summary of datasets, compare different datasets or filter the data.
Stories: through this function, users can create custom stories depending on the nature of the data or the type of targeted data consumers.

Screen Shot 2017-11-04 at 3.49.39 PM.png

Screen Shot 2017-11-04 at 3.13.24 PM.png

Screen Shot 2017-11-04 at 3.12.54 PM.png

Screen Shot 2017-11-04 at 3.12.46 PM.png

Screen Shot 2017-11-04 at 3.12.39 PM.png

Screen Shot 2017-11-04 at 3.12.33 PM.png

Screen Shot 2017-11-04 at 3.12.24 PM.png

Screen Shot 2017-11-04 at 3.12.17 PM.png

As for data consumers could be any type of interested users starting from a curious researcher to a more advanced type of user like a decision maker or a planner. The following paragraphs and images will describe the proposed experience of the main data visualization interface that are targeted to the general public.

The following images show wireframes of the main pages of the platform reflecting the identity of the organization and the main goal of the platform. The idea is to trigger the sense of search and exploration for the users. The search bar will allow users to search and the two groups indicate the different categories and cities the user can jump to in order to view the datasets and visualizations.

Screen Shot 2017-11-04 at 2.55.03 PM.png

Screen Shot 2017-11-04 at 2.55.22 PM.png

Screen Shot 2017-11-04 at 2.55.38 PM.png

Screen Shot 2017-11-04 at 2.55.57 PM.png

To navigation through the platform the users can choose between searching, exploring or interacting with the different components and visualizations. This will provide different routes for the user to reach the information they are looking for depending on the preference and their navigation behavior. When users identify the piece of information they are interested in, they will be directed to the visualization page. The page serves as a story consisting of different informational components and data visualization that will help users make sense out the datasets.

Different patterns of visualizations (see image below) will be used in order to support the compatibility of the datasets: treemap, line chart, bar chart, network, geographical, heatmap etc. Also, components that allow the users to interact with the visualizations will be provided e.g. filters, compare, sort etc. The sections will always start with a general view and sparklines to give an overview of the dataset before diving into the visualizations.

Adaptive Visualization Templates

To speed up the visualization process for all datasets for the different domain and city, I have used templates for creating the visualizations to be filled in JSON file specifying the following: Title of chart, type of chart, dataset, description etc. The json file then runs through the visualization engine generating different interactive visualizations for all the datasets available. For the visualizations I have used D3 to create the library and HTML5 to generate the front end interfaces.

The work in still on going. My role is to generate the user experience for each sprint. The current sprints are dedicated to the content management system that will allow the admins from different ministries and entities to add their data to the portal. Example of the sketches are shown bellow.