Website Development

IOD Parc online portal

IOD Parc logo

IOD Parc works closely with the Australian Government to support projects to help the poorest and most vulnerable groups in the Ganges. Working on behalf of IOD Parc, Hive IT designed and built an online portal for the Sustainable Development Investment Portfolio (SDIP). The portal helps to communicate vast amounts of information in an effective, accessible way. It has resulted in an improved understanding of the progress of the SDIP from all those involved.

the challenge

Supported by the Australian Government, the Sustainable Development Investment Portfolio (SDIP) targets the three major Himalayan river basins and is focused on the impact of projects targeted at the needs of the poorest and most vulnerable, particularly women and girls.

On behalf of IOD Parc for the Australian DFAT, Hive IT provided the design and development stages of an online portal to support the monitoring and evaluation of this complex piece of work. The tool needed to help to communicate large amounts of information in an accessible way and enable improved understanding of the progress of the SDIP.

the result

The final system is a robust, fast and secure online portal, featuring an intuitive map based interface to the projects, analysis and evidence. By progressively revealing further levels of complexity it encourages deeper exploration and understanding of the programme as a whole.

iterative process illustration
1.

approach

It was essential that the portal be based around a map to allow users to explore the projects undertaken and view an analysis of progress at any time. The project analysis needed to be accessible in a variety of visual formats and partners needed to be able to upload and tag their evidence so that it could be explored by other members of the portfolio.

We followed an agile, iterative, user-centric design approach throughout this project. This approach ensured that the core project aims were met and that changing and emerging requirements were incorporated.


workshop layouts photos
2.

workshops

To start, we facilitated workshops with IOD Parc to gather and understand their requirements for the portal. During these workshops, we created user personas and worked together to sketch out interface ideas.

website with an active mouse pointer illustration
3.

interactive prototype

Following the workshops, we iteratively developed an interactive prototype based on our sketches. We then demonstrated the working prototype and visual design to the project stakeholders in Kathmandu and were able to incorporate their feedback into the final designs.

javascript and ajax valve box connected to monitor illustration
4.

platform development

When everyone was happy with the visual designs and the functionality of the prototype, we moved into the development of the portal. We followed agile scrum principles enabling us to continuously demonstrate the portal to multiple stakeholders in various countries and iteratively incorporate their feedback.

We built the portal as a bespoke system consisting of a single page application framework where Javascript and Ajax were used to provide a seamless experience for the user. We did this by minimising data sent to the browser and reducing page load times. We overlaid filterable geographical data onto a detailed map to allow exploration of the evidence uploaded by partners. The finished system provides a guided, step by step process to add evidence to encourage accurate and complete tagging, ensuring minimal input from the administrators.

5.

the finished product

The finished product is a robust, fast and secure online portal, featuring an intuitive map based interface to the projects, analysis and evidence.

Technical Notes

Single page application framework 

Javascript and Ajax were used to provide a seamless experience for the user. Minimised data sent to the browser, thus reducing page load time. Lazy loading of large map data sets as required

Filterable geographical data overlays on a detailed map at project level

Including custom code on top of a leaflet.js map libraries and only loading data as the user requires it. Grouped geographical data sources on a second map version to allow exploration of evidence uploaded by partners, Ajax calls to expose additional information as the user explores the map data. Visualisation and dependent data view on key focuses for the SDIP (Domains of Change).

Upload and view of documents, videos, images by authorised users

Using Jackrabbit storage to provide a search and a permissions model, Viewer.js to display documents to the user in the browser and Html5 to play embedded media. Complex tag hierarchy sequence made user friendly on evidence upload (editable by authorised users). Administration of tags in dynamic tree hierarchy. Permissions based document viewing with permissions stored directly in the Jackrabbit repository where the documents are stored. User management, creating accounts, login, user details and role management by customisation of an initial appfuse template.

Individual Content Manageable Partner Pages restricted by User Type, CKeditor for rich content and wysiwyg and save as you type. Calendar management and display functionality using Fullcalendar.IO. Overall build in Java 8.

SDIP desktop mockup photo
get in touch

related case studies