Social Impact ReportingWeb app for international development projects management
UNIT4's Center of Excellence for Not-for-profit requested a web implementation of the Logical Framework approach for international development projects.
The Logical Framework approach
The Logical Framework Approach is a methodology used for the design, management and evaluation of international development projects. It takes the form of a four-by-four project table. Each row represents a target level of the corresponding project, as explained below.
The broad development impact to which the project contributes
Statement Wording: "To contribute to..."
The development outcome, i.e. the expected benefits to the target group(s) at the end of the project.
Statement Wording: "Increase, improve, etc."
The direct/tangible results (goods and services) that the project delivers.
Statement Wording: "Delivered/produced/conducted, etc."
The tasks (work program) that need to be carried out to deliver the planned results.
Statement Wording: "Prepare, design, construct, research, etc."
The main Goal of the project has several Purposes (or Outcomes) with one or several Outputs to fulfill them. Finally, for each Output there is one or several Activities that must be carried out.
The core of the Logical Framework is the "logic model" that runs through this matrix.
Traditionally, international development organisations have made use of this matrix to document and report their projects, creating huge tables and exporting them to the final report in a PDF document.
For large projects, the matrix could easily fill up to 30 pages of the final report.
Wireframes
First of all, I needed to adapt the original matrix to a web-oriented, navigable layout. Since the target levels follow a tree structure, a hierarchical navigation approach seemed ideal.
Each Purpose (or Outcome), Output and Activity would be represented as an indepentent block, showing only the most relevant information (description, KPI instead of Success Indicators, baseline, status and target).
A click on a block would expand the element. It would show all the information about the corresponding element and some data about its sublevels (in this example, how many Activities must be carried out to complete the Output, how many have been already finished and a link to those Activities).
The tree structure would work as a breadcrumb to navigate back to upper levels.
Visual Designs
Once the wireframes were accepted, I provided a final design within the UNIT4 visual standards.
A new overall view was added to easily navigate and access any level of the project trough an expandable hierarchichal structure. Each element had a link on the right side to open it in the independent blocks mode.
Since I wanted the level-sublevel structure to be a way to navigate back, I changed it to a more breadcrumb-like approach including the description of every parent element.
Finally, I proposed a visual representation of the baseline, status, target and projection of the Activities, which could also be applied for Outputs and Outcomes .