United Nations Development Program: Greenhouse Gases

Project Overview

The UNDP Greenhouse Gas (GHG) Team needed a streamlined way to manage and access their data, eliminating the inefficiencies caused by navigating countless folders and files. Additionally, they required a system that could generate reports without relying on multiple software tools, simplifying their complex workflow.

Our solution was a responsive web application that allowed team members to securely access and share data, whether on-site using a tablet or in the office on their computer. The application was designed to maintain familiarity with their paper-based process while significantly improving data searchability, updates, and reporting—all within a single platform.

How Did the Project Start?

The project began with a detailed discovery phase, where we reviewed the team’s current documentation and conducted initial meetings with key stakeholders. During these sessions, we uncovered the need for varying levels of user access and a strong focus on maintaining familiarity with their existing workflows.

From this research, we identified critical pain points, such as the inefficiency of manual data searches and the time-consuming nature of creating reports. Armed with this information, we outlined a user-centered approach that prioritized simplicity, security, and usability. Wireframes were developed to visualize initial concepts, incorporating customizable dashboards based on user credentials and roles.

Project Execution

As the Lead User Interface Designer, I played a pivotal role in translating user needs and research findings into a functional, intuitive design. I collaborated closely with the UX Designer and developers to ensure seamless integration between design and functionality. Key phases of the project included:

Wireframes and Prototyping

• Designed low- and high-fidelity mockups in Figma, focusing on intuitive navigation and efficient workflows.
• Incorporated role-based dashboards to ensure users accessed only the data and tools relevant to their needs.
• Prototyped user flows and interactions using Webflow, along with custom HTML, CSS, and JavaScript for demonstration purposes.

Front-End Development

• Developed the front-end architecture based on the finalized designs before handing it off to developers.
• Addressed potential edge cases, such as error handling for data uploads, to ensure a smooth user experience.

System Features

• Implemented forms with validation to ensure accurate data entry.
• Used clear yes/no questions and organized filters to streamline user interactions and maintain data accuracy.

Tools Used

• Figma: For mockups, annotations, and collaboration with the UX Designer.
• Webflow: For rapid prototyping and interaction design.
• Custom Code: HTML, CSS, and JavaScript for additional functionality.
• Adobe Illustrator: For custom design elements and icons.

What I Learned

This project taught me the importance of iterative design and continuous user feedback. Initial conversations with users were insightful but often missed critical details, such as the need for approval steps before uploading revised reports. To address this, I incorporated user testing throughout the design process, identifying overlooked steps and improving the system’s functionality based on real-world workflows.

I also learned that designing a new system requires balancing innovation with familiarity. By closely aligning the application’s workflows with the team’s existing processes, we minimized the learning curve while introducing significant efficiencies.

‍