Creating a Graphical User Interface for KriseSIM

The KriseSim project aims at developing an interactive tool intended for emergency management training, particularly the decision-making and resource management when the responders face a series of events occured in certain scenarios such as extreme weather or fire. The tool is created as a 3D virtual tool using Unity Technology.

My task in this project was to design a Graphical User Interface (GUI) for the KriseSIM tool using Adobe Illustrator. The main goal were to design elements for players so that they can select resources, show and hide notifications, weather information elements, and more.

We conducted a workshop to elicit requirements for the GUI of the KriseSIM tool. The meeting resulted in a general agreement on the GUI requirements:

• The icons and design should be vector objects.
• The GUI should not occupy more of the screen than necessary as we did not want the GUI to take away the focus from the game.
• At the same time, we wanted the icons to be simplified and easy to understand, and still look professional.

The result is shown in the picture added to this blog.

This picture shows the GUI, with only the essential elements that the user can not hide, and it is only occupying a little part of the screen. At the bottom of the screen, we have the four main action-buttons making it possible for the player to do various things. When one of the buttons is pressed, a menu with more choices will become available.
At the bottom-left side, the player can see how many of each patrol (police, ambulance, firefighter) that is available.

In the upper part of the right corner, there are the minimap, a clock and the weather. The weather icon will change depending on the weather in game, and the background will change between light blue and dark blue as well as sun and moon to simulate the day/night cycle.

I’ve been lucky to take part in this project. It have been very fun and educational.