Future Flood Forecasting System
FFFS : 2017

Redesigning the system

Product design

Worked closely with the Product owner and stakeholders in guiding the redesign of the product to the correct standards, by allowing the product to develop further in assisting their most pressing needs at the time.

Interaction design

Reviewed current plugins to visualise the data in an interactive manner where appropriate; as well as creating interactive prototypes for the stakeholders and team

UI Design

Improving the current workspace by introducing customisable options for better production under stressful conditions.

Current UI of the system

The system’s UI was rather basic; resembling an old Windows 94 look and feel about it. Information was everywhere and the screens would very quickly become overcrowded and cluttered with info that could lead to further mistakes if not presented in an orderly manner.

The research had been done when I joined the project so my role was to work with the stakeholders in understanding their primary needs as forecasters and aleviate the potential errors due to a less than ideal system at the time.

The business opted to use Power BI as their BI tool for reporting and visualising data. This was a further issue as the graphs in particular were very difficult to customise as metric elements were presented in blocks of code as opposed granular X or Y metric data code when viewing graphs in particular.

Redesigning the Content space

Introducing navigational search

This prototype showcases the layout for multiple search results returned when it pre-populates whilst your typing.

The example shows an instance where a location had two entries returned from the search.
The search results are designed to show the Site name in black with the Site ID below that in a grey colour.

This would be the default search results dropdown layout for the Site name & ID search moving forward.

Building a model

There was a complex issue where forecasters were able to build models they’d like to run on the system.

There were eight types of models that could be built and they were all pretty laborious.

My idea was to quicken the process in combining many elements together in making the process more automated and intuitive.

This was an example where I was able to utilise the different content screen widths depending on the choices available per screen; thus making use of the content space.

Icon designs

Threshold icon iteration testing

First iteration

Second iteration

Final designs

Graph redesigns

Redesigning the forecast player

The video player which was introduced by a third party was not very intuitive in determining the days nor speeds for example, but the most obvious error was incorporating the play control buttons as part of the map toolbar menu on the far right of the screen away from the frame rates and date details as well as the slider.

Forecast player redesign iterations

The player console was positioned at the base of the screen by default. The playing controls are on the far LH side with the player slider centered together with the option of changing the date. This would be the default calendar/date picker. The frame rate per second selectors were clickable blocks at the top right of the slider, whilst the colour ramp was on the far RH side and horizontal with the measurement readings clearly visible inside the coloured blocks.

There was an additional option of minimising the player console controls, as well as being able to undock the player toolbar.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Consent to display content from Youtube
Consent to display content from Vimeo
Google Maps
Consent to display content from Google