IBF.png

IBF
Sprints

Overview

 Type of project   Iterations (part-time)

 Duration   Sprints of 1-3 weeks 

 Role   UX UI Designer

 Tools   Figma, User testing, teams

The Impact Based Forecasting (IBF) Portal is an operational decision-making support tool that displays and disseminates early warning notifications for an incoming disaster. It visualizes relevant information to support disaster managers in decision-making following the country's early action protocol.

You can read more about it here. And here.

The IBF portal supports the triggers for multiple hazards & is currently being deployed with the support of 510 in the following 8 countries:

  1. Zambia (Riverine floods & Droughts)

  2. Kenya (Riverine Floods & Droughts)

  3. Uganda (Riverine Floods & Droughts)

  4. Ethiopia (Riverine Floods & Droughts)

  5. Philippines (Typhoons)

  6. Malawi (Riverine Floods)

  7. Zimbabwe (Droughts)

  8. Egypt (Rainfall induced floods)

As the portal is an iterative product, user testing and redesign are done by the Human-Centered Design team at 510. I, together with a team of amazing designers, got to produce UX and UI solutions for different parts of the portals. We've run user testing rounds with disaster managers, product clients, aid works, and other incredible humans that are actively trying to better their community's lives with the help of science and data. 

RCCC-Impact-based-forecasting-Guide_V2-1193x600.jpeg

Zambia - Floods
Halfway design

We were asked to come up with halfway design solutions for Zambia's floods IBF portal. The brief explained that when the portal is in the triggered state the portal has to show the difference in a clear way, the map will become very "colorful" as the user opens the layers from the drop-down on the left. We worked on this re-design with a group of volunteers and an intern. The goal was to design suggestions of the triggered and non triggered states of the portal while taking into consideration the brand's colors and design logic, making sure to maintain accessibility, readability, and hierarchy of the text and elements. 

Original screens:

IBF ZAMBIA.png

Explorations:

Final suggestions: We decided to use Navy and shades of Navy in 10% and 30% opacity for the non-triggered state to keep true to the brand colors of 510 and the red cross while also creating a simple and elegant portal. For the triggered state we used the same principles we developed with the non-triggered screen but used the color purple which was chosen to represent preparation - while during a disaster the screen will light up in red, IBF is meant to help disaster managers prepare for disasters and we must differentiate between predictions and disasters. these design suggestions were handed over on 09.06.2021.

NON TRIGGERED.png
TRIGGERED.png

Ethiopia - Floods and malaria
User testing release and DevOps

In this quick fixes sprint a Strategic Design intern and I were asked to conduct user testing of the staging server version of Ethiopia's Floods and malaria IBF portal in order to catch possible mistakes and make final design changes as the product is being released to be used by disaster managers in Ethiopia.

User testing  We conducted 6 user test sessions with disaster managers, aid workers and other stakeholders and future users of this product from Ethiopia, the test was done over video call on Microsoft Teams. After an inteduction of ourselves and the test process, in which we explained that we are testing the product and not the user and encoreged the users to "think aloud" and share with us their honest opinions and thoughts, we played the video menual for them and then, asked them to share their screen while completing different tasks on the portal.

 

DevOps  After the user testing we read over our comments and created a file for the development team with design solutions and corresponding incuiry number on DevOps. Some of the fixes that were made were - adding missing X mark to pop-ups, changing font wight for readability and information architecture and adding extra information to some of the layers so they are more clear to users. 

Screenshot 2021-11-02 at 14.02.26.png
Screenshot 2021-11-02 at 14.02.46.png
Screenshot 2021-11-02 at 14.01.42.png

Zimbabwe - Droughts
Interface redesign and user testing

(Coming soon​)

screens zambia.png