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.
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.
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.
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 .
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.
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.