A Case Study

2017

Greenhouse Gasses Data Management

CLIENT NAME: UNITED NATIONS DEVELOPMENT PROGRAMME

THE PROBLEM

The UNDP-GHG Team needed a way to enter data and quickly refer to older data without the hassle of going through countless folders and files.

They also requested an easier way to produce reports without having to use another group of software, further adding to their already complex workflow.

THE SOLUTION

A responsive web application that members of the team can access and share data, securely, whether on-site with a tablet, or in-office on their computer.

An application that does not veer too far away from their current process on paper, for the sake of familiarity, yet still speeds up the search process of data and updates. Everything in one space that can then create reports automatically.

MY ROLE

I was the lead User Interface Designer on this project. I also assisted and worked closely with the lead UX Designer and developers.

After the UX Designer analyzed the research of the team and history of its data collection and reports - I had the task of converting the analyses and personas into a visual format that makes sense to the end user without too much of a learning curve. After the hi-fidelity mockups were complete, I then prototyped and developed the front-end before handing it over to the developers.

• MY TASKS INCLUDED:
  
• + reviewing the shared documents FROM USERS and PREREQUISITES OF THE UNDP
• + customized dashboard designs for each user type
• + LISTING & ELEMENT design prior to building the prototype for each feature and their different states.
  
  for instance, all the different solutions for if an error OCCURRED while uploading a data template had to be accessible from design
• + WIreframes and lo-fi mockps
• + design research, ui design, High-fidelity mockups
• + style guides, and spec sheets

MY TOOLS

Figma came in handy to collaborate with the UX Designer and have us both leave annotations and comments for the other to read while making changes real-time.

I also used Figma for the Lo- & Hi- Fidelity Mockups. For the rapid prototyping, I used Webflow and custom HTML, CSS & JavaScript code for the
demonstration of interactions and user flows.

‍Adobe Illustrator was used for some design elements and icons.

WHAT I LEARNT

While users can be quite transparent in conversation as to where their main problems are, it is faulty to expect one, or any group of users, to include each step in a process; especially with only one meeting. As a user, things that get overlooked (such as needing to send a report for approval before re-uploading it to the inventory) may seem like something not to include, as it does not necessarily slow down/interfere with the current process.

However, it will probably provide a hiccup in a new system if the related option is left out. Therefore, meeting with the user more than once, and doing user tests throughout the design process helped a lot to fill in any details that were skipped thanks to some fresh feedback.