UN’s Trust Fund Gateway

How do you keep a heavy “data product” without sacrificing user experience?

Welcome to the Jungle

The UN’s Multi-Party Trust Fund (MPTF) office recently approached me to help redesign their Gateway. The Gateway is a transparency portal where the UN and its partners are able to report and monitor where and how pooled funds are being spent.

Image for post
Current outdated design of the MPTF Gateway.

When I first got in the website, I was completely surprised at how outdated the visual language is, considering that the Gateway has over 20k monthly users and over 500k monthly page views.

Challenge accepted

The team came with the following objectives:

  1. To communicate what the MPTF Office and its pooled funding services. The MPTF Office is the UN center of expertise on pooled funds for SDGs. This is the most important communication vehicle, both for transparency and communication purposes.
  2. Align visual identity with the Sustainable Development Goals (SDGs) and modernize look and feel.
  3. Ensure and increase the high levels of transparency, recognized by donors as one of the key features of the services provided by the MPTF Office.
  4. Advocate for UN pooled funds. The Secretary-General has called as part of the UN repositioning to double pooled funding to increase collaboration both within the UN system and outside the UN system working with partners.

Research

A combination of qualitative and quantitative research was conducted wherein we sent out a survey to power users and met with diplomats from key donor-heavy missions for one-on-one interviews.

Image for post
Key data on what the site is being used for

We gathered key insights from our users:

  1. United States Mission — “We appreciate how organic and up-to-date the Gateway, this needs to be highlighted more.”
  2. Norway Mission — “We want a clearer document center where key reports can easily be accessed. We also want to see key documents displayed on fund pages when relevant.”
  3. Australia Mission— “We want a redesign of the charts. Some of the charts and graphs used are not readable or irrelevant.”
  4. Netherlands Mission — “The Gateway needs to put more focus on the pooled funds. We just want to get into the funds and monitor the cash flow.”
  5. Italy Mission — “The user interface is very dated. We are unable to access the page on mobile.”

Getting inspiration from Fintech

I wanted to draw inspiration from some of my favorite Fintech products. Fintech industry, I think, is really doing a great job at presenting important data that is usable and understandable with elegant minimalism in mind.

Image for post
Image for post
Marcus by Goldman Sachs, Robinhood App
Image for post
Betterment UI

Wireframes

My goal was to simplify the site but in order to do that, I had to make I had a complete inventory of the important components and data that will go in the final designs.

The inventory process also had to go through a lot of user testing and evaluation. I needed to ensure that every component or data that will go in underwent the following stress test:

  1. Is useful? If it’s not, can we remove it?
  2. Does it make sense? If it doesn’t, how do we redesign it to make sense?
  3. How can we simplify this?
Image for post
Image for post
Image for post
Early prototypes

A perfect example of redesigning a particular component is the ‘Key Figures’ data. Users told us that the bar charts aren’t particularly useful in visualizing dollar amounts in linear/time-based manner.

Image for post
Key figures old version

The simple solution was to separate each attribute into a different graph and I added an interactive component where users can simply trace the line to see the dollar amounts in a particular year.

Image for post
Key figures, reimagined

Color and Style

As with any Fintech product, consistency is key, I created a local style guide so that moving forward, the developers and web producers will have a consistent and single point of truth to point to during development and page production.

Image for post
Image for post

Final Designs

The final designs are below:

Image for post
Home page
Image for post
Fund pages

Flexible components

I also redesigned all the components and graphs in a grid system so that we ensure a consistent visual language post-development. Web producers can simply use the components below, WYSYWIG ensuring consistency in both desktop and mobile.

Image for post

The new MTPF Gateway is currently in development and is due to launch in October 2019.

Written by

Minimalist

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store