Repository for the architecture, task flow, sketches, wireframes and iterations of the UI/UX of the portal
- 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
For building the intuitive user interface of Budget portal, this iterative process was followed which is like revised framework for visual thinking:
To augment the trust of the user with the visual aid and thereby move the analysis forward in an intelligent manner
We conducted interviews of users who were mostly researchers or analysts from CBGA. Existing visualisations on budget and tools were researched upon such as:
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 ?
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.
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.
Explorations were done in terms of colours, layout and style of illustrations while considering the governmental constraints.
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
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
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.
Adobe Photoshop, Adobe Illustrator, Sketch, Mapbox
All the explorations of the designs are divided into folders of:
- 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
- Portal Pages (Each with versioning as draft numbers)
- Homepage
- Dataset page
- Levels of governance page
- Sectors page
- Logo OBI
- Logo Types (Each with versioning as draft numbers)
- Dark Background
- White Background
- Favicon (Each with versioning as draft numbers)
- Budget Wiki
- Overview Design
- Graphs and charts used
-
Budget Explorer WIP
-
Information Architecture
The Design repo is licensed under the Creative Commons Attribution-ShareAlike 4.0 International Public License, see the LICENSE file for details.