USEF - Balance of Power

USEF - Balance of power

USEF - Balance of Power

UI/UX, ANIMATION, VISUAL DESIGN, VIDEO EDITING

UI/UX, ANIMATION, VISUAL DESIGN, VIDEO EDITING, 2018

UI/UX, ANIMATION, VISUAL DESIGN, VIDEO EDITING

The consortium of ICT Group and other Dutch energy market players, USEF Foundation, launches ‘Balance of Power‘, a serious game to promote better understanding of future energy market challenges and potential solutions. The interactive documentary-based game is aimed at people with a non-technical role in the energy transition such as politicians, local authorities and entrepreneurs.

The storyline evolves as players are tasked with making difficult choices that dictate how cost-effective, sustainable and secure the resulting new energy system will be. Curious if you would be able to control the energy grid? Try it yourself by pressing the button below and see how well you manage.

Balance of power screens in an isometric view connected by lines

20 minutes

20 minutes

to play the interactive game

 

25 decisions

to keep out energy system safe

20 minutes

to play the interactive game

 

25 decisions

to keep out energy system safe

20 minutes
to play the
interactive game

25 decisions
to keep our
energy system safe

20 minutes

to play the interactive game


20 minutes

to play the interactive game

 

25 decisions

to keep out energy system safe

20 minutes

to play the interactive game

 

25 decisions

to keep out energy system safe

20 minutes
to play the
interactive game

25 decisions
to keep our
energy system safe

to play the interactive game


25 decisions

20 minutes

to play the interactive game

 

25 decisions

to keep out energy system safe

20 minutes

to play the interactive game

 

25 decisions

to keep out energy system safe

20 minutes
to play the
interactive game

25 decisions
to keep our
energy system safe

25 decisions

To keep our energy system safe

20 minutes

to play the interactive game

 

25 decisions

to keep out energy system safe

20 minutes

to play the interactive game

 

25 decisions

to keep out energy system safe

20 minutes
to play the
interactive game

25 decisions
to keep our
energy system safe

To keep our energy system safe

Behind the scenes // process

Behind the scenes // process

Behind the scenes // process

Behind the scenes
Iteration process

Goal
The increasing demand for electricity, renewable energy and the rise of things like electric vehicles are putting incredible pressure on the energy grid. Facilitate learning and discussion by presenting real-life energy system challenges and future scenarios. Let users experience the different roles within the system and the implications of different decisions. 

Challenges

Goal
The increasing demand for electricity, renewable energy and the rise of things like electric vehicles are putting incredible pressure on the energy grid. Facilitate learning and discussion by presenting real-life energy system challenges and future scenarios. Let users experience the different roles within the system and the implications of different decisions. 

Challenges

  • Should be playable on both desktop & mobile without installing any app. (Limited to standard web-conventions and its limitations).
  • Should be highly immersive and create a sense of urgency with the user.
  • Should show different scenario's, including its positive and negative complexities, and have the user make decisions within it that could lead to multiple outcomes.
  • Comply with established guidelines and be aware of anything
    that can reflect negatively on the organisation' reputation.
  • Ideally use the established color palette, art direction & tone of voice.
  • The game should be playable in both English and German.
  • The game should be playable within ~1h by 3 to 6 people in a relaxed
    setting while still providing a clear take-away of info & understanding.
  • The physical element should be easy to (re)produce, resist
    basic scratch damage and lends itself to be dismantled for storage.
  • The game should be playable in different settings & environments,
    with various lighting conditions that can affect object tracking. 
Windmill-Usef
SketchesUsef

Creating the outline

With a team of designers & writers we created multiple iterations of the story & script. This took a few tries due to the complexity of the branching storylines and having to cover the possible scenario's with logical outcomes. On shooting day, some lines and scenes weren't coming out as expected so this took some on-the-spot alterations to make sure the story came through as intended.

With a team of designers & writers we created multiple iterations of the story & script. This took a few tries due to the complexity of the branching storylines and having to cover the possible scenario's with logical outcomes. On shooting day, some lines and scenes weren't coming out as expected so this took some on-the-spot alterations to make sure the story came through as intended.

To get a better feel for the scenes, establish the camera movement/ angles and define what else we needed to create, we used very rough sketches to make prototype videos. This helped a lot to derisk the shooting day itself, as delays or reshoots can be rather costly, but also enabled us to align properly with the client on which direction we wanted to take it and spot any gaps.

Panel2
Panel1

Shaping the identity

Creating an interactive documentary, we drew inspiration from documentaries, action films, and news reports. We used key visuals as a foundation for experimentation, blending them with the client's brand colors. Ultimately, we chose a contrast-rich video style with a touch of minimalism and a futuristic look to ensure readability on all devices.

Our UI underwent multiple iterations & user tests to identify the best interaction patterns, prioritizing multi-device support & readability.

Creating an interactive documentary, we drew inspiration from documentaries, action films, and news reports. We used key visuals as a foundation for experimentation, blending them with the client's brand colors. Ultimately, we chose a contrast-rich video style with a touch of minimalism and a futuristic look to ensure readability on all devices.

Our UI underwent multiple iterations & user tests to identify the best interaction patterns, prioritizing multi-device support & readability.

These foundations were also used to find the right type of color grading, video pacing, audio, transitions & effects used while editing the videos during post-production. To facilitate all the branching paths, we ended up creating over 100 videos & animations that connected seamlessly based on the choices the user made.

All of them were rendered in multiple resolutions to facilitate dynamic streaming for users with low bandwidth .

These foundations were also used to find the right type of color grading, video pacing, audio, transitions & effects used while editing the videos during post-production. To facilitate all the branching paths, we ended up creating over 100 videos & animations that connected seamlessly based on the choices the user made.

All of them were rendered in multiple resolutions to facilitate dynamic streaming for users with low bandwidth .

USEF identity drafts 15
USEF identity drafts 14
USEF identity drafts 13
USEF identity drafts 12
USEF identity drafts 11
USEF identity drafts 10
USEF identity drafts 9
USEF identity drafts 8
USEF identity drafts 7
USEF identity drafts 6
USEF identity drafts 5
USEF identity drafts 4
USEF identity drafts 3
USEF identity drafts 2
MakingOff1 (1)
MakingOff2 (1)
USEF small white cross for a memorial to Basiel Jaspers

In Memory of Basiel Jaspers, fellow
designer on this project. I miss you.

In Memory of Basiel Jaspers, fellow designer on this project.
I miss you.

MapIdentity

A &ranj production

Ranj Logo

Other projects

Molecules to MedicineThe journey captured in a augmented reality boardgame

Saving Lives with Mixed RealityImmersive CPR, firefighting & medical courses

DCTxHelping Philippines' frontliners during Covid-19

Managing the GridA deepdive into the future of rail logistics

Infectious FanaticsDedication as an understatement

Daily RendersCadence of Pixels

Daily UIInterface exploration

3D PlaygroundExploring polygons

Tangible LettersFont vibes visualized

Fading BoundariesHumans x Digital

© Mathijs Sterrenburg / All rights reserved.