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.
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.
The team came with the following objectives:
- 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.
- Align visual identity with the Sustainable Development Goals (SDGs) and modernize look and feel.
- 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.
- 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.
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.
We gathered key insights from our users:
- United States Mission — “We appreciate how organic and up-to-date the Gateway, this needs to be highlighted more.”
- 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.”
- Australia Mission— “We want a redesign of the charts. Some of the charts and graphs used are not readable or irrelevant.”
- 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.”
- 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.
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:
- Is useful? If it’s not, can we remove it?
- Does it make sense? If it doesn’t, how do we redesign it to make sense?
- How can we simplify this?
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.
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.
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.
The final designs are below:
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.
The new MTPF Gateway is currently in development and is due to launch in October 2019.