Design of Open Budgets India portal

Repository for the architecture, task flow, sketches, wireframes and iterations of the UI/UX of the portal

Key Research Area

• Understanding the budget basic and the whole ecosystem
• Understanding the Budget Documents and terminologies
• Exploring multiple styles of analysis to make it easier to consume by the users
• Knowing more about the machine readable data

Design process followed

For building the intuitive user interface of Budget portal, this iterative process was followed which is like revised framework for visual thinking:

Goal of this process

To augment the trust of the user with the visual aid and thereby move the analysis forward in an intelligent manner

Better understanding of the problem

We conducted interviews of users who were mostly researchers or analysts from CBGA. Existing visualisations on budget and tools were researched upon such as:

• Singapore Data Portal
• Data USA
• VisualBudget.org
• USA Facts
• Open Budget portal of Ukraine

Creating Ideas

While brainstorming, following questions about nature and purpose of this process were considered:

• who will see?
• What do they want to see?
• What idea do I want to convey?
• What could be shown?
• How could it be shown?
• Is it conceptual or data-driven?
• Am I declaring something or exploring something ?

Refining Ideas

The user feedback for the rough prototype of the tool was measured based on the metrics of effectiveness and ease to understand. From the surveys, the three keywords stood out from the analysis:

Structure and hierarchy, focus on design clarity and simplicity

The story generator tool was divided into four phases and further refined to impress and persuade the users.

Presenting and Practicing

We added delightful interactions and animation to the tool and the portal to create captivating visual storytelling. This attempt was taken so that users can create a new understanding of the data, change minds and affect policy change.

We are in the process of continuous iteration.

Visual Exploration

Explorations were done in terms of colours, layout and style of illustrations while considering the governmental constraints.

Sector icons exploration

These are some of the styles which were explored:

• Multiple colours and multiple elements specific to sectors
• Monochromatic and multiple elements specific to sectors
• Dual colours and single elements specific to sectors
• Further exploration based on the colours of the portal

Levels of governance icons exploration

A map-based approach is taken to represent visually the governance level.

• Union Budget: Depicting the importance of Delhi and how all budget are handled from the center of the country
• States Budget: Different shades of green is used to highlight the state
• Municipal Budget: Pin locations of different districts depicting the municipal levels
• Combined Budget: Overall country along with the world map picture

Colours used

Blue represent stability and major colour scheme used in data portal. This colour works in association with grey, hence creates an overall balance and increases the integrity and credibility of the portal.

Tools used

Adobe Photoshop, Adobe Illustrator, Sketch, Mapbox

Versioning of design explorations

All the explorations of the designs are divided into folders of:

1. Icons

• Levels of Governance (Each with versioning as draft number)

  • Union Budget
  • Combined Budget
  • States Budget
  • Municipal Budget

• Sectors (Each with versioning as draft number)

  • Agriculture and allied activities
  • Drinking water and sanitation
  • Education
  • Environment and Forests
  • Food and Supplies
  • Health
  • Urban Development and housing
  • Power and Energy
  • Public Works
  • Rural Development
  • Social Justice
  • Irrigation

2. Portal Pages (Each with versioning as draft numbers)

• Homepage
• Dataset page
• Levels of governance page
• Sectors page

3. Logo OBI

• Logo Types (Each with versioning as draft numbers)
  • Dark Background
  • White Background
• Favicon (Each with versioning as draft numbers)

4. Budget Wiki

• Overview Design
• Graphs and charts used

5. Budget Explorer WIP

6. Information Architecture

License

The Design repo is licensed under the Creative Commons Attribution-ShareAlike 4.0 International Public License, see the LICENSE file for details.