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 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. Through the short but intense experience, players get to experience firsthand why its harder than one might think to get a system in place that is future proof.

Project summary

Behind the scenes // process

Behind the scenes // process

The problem
The power grid and it's current & future sustainability challenges are hard to explain given its complexities and how it's intertwined in society as a whole. Scientific studies are great at communicating facts, but can often be hard to digest, dry and don't let you deal with its potential intricacies and effects first-hand. 

The goals

  • Create a engaging & informative solution that lets users experience how complex the power grid and its sustainability challenges are, while teaching them about directions that science, politics & the free market are exploring to tackle these issues.
  • Users should be able to make mistakes, see its consequences and learn from it instead of being told what to do / follow a linear path.
  • Ensure that the solution is an easily accessible experience for a wide audience in terms of both story & hardware accessibility. 
  • The experience should be limited in duration (30-60 min) to prevent high drop-off and get the crucial info across fast.
  • 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. 

My role

As one of three designers on this project, I was primarily responsible for creating directions, concepts & execution plans for the overall visual treatment, UX, video- and technical development. I worked hands-on in creating all prototypes, videos, graphics & other assets, getting it in the game and testing it with end users.

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

The process

  • Pre-production for scripting, storyboarding & prototyping to capture the story, it's branching paths and rough estimates of production costs before video production would start.
  • Mutliple day video shoots on location with actors and crew.
  • Agile development, two-week sprints for product development.
  • Continuous user testing with both the target audience and clients. Incl. journey mapping, (paper) prototyping and usability tests.
  • 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. 

The outcomes

  • We developed a engaging interactive documentary-style game with multiple branching storylines based on the user' choices.
  • After launch, it was quoted as insightful, helpful and inspiring by politicians, local authorities and entrepreneurs in the industry.
  • Winner of the 2019 Energy Institute award.
  • 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. 
Floating game interfaces on phone

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

Winner energy institute award

Balance of Power was the winner of the Energy Institute Award 2019 in the Public Engagement category. 

Balance of Power was the winner
of the Energy Institute Award 2019
in the Public Engagement category. 

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 big energy-consuming appliances like electric vehicles are putting incredible pressure on the energy grid. We want to 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. 
  • Should be playable on both desktop
    & mobile without installing any app. (Limited to standard web-conventions and its limitations).
  • Should be highly immersive & 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.
Windmill animation
Overview of documentary sketches

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.

Documentary scene sketches
Documentary scene sketches

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 .

Typography sheet
Grid graph
Sustainability goal graph
Power grid map
Grid status power grid
Country map energy grid
Personal note overview
Question screen UI mockup
Documentary frame mockup UI
Question menu UI
Question menu UI
Abstract timeline illustration
Abstract timeline illustration
City with electric grid abstract
USEF after effects overview
USEF after effects overview
White cross

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.

Abstract energy grid map

A &ranj production

Ranj logo

Wow, you made it all the way here!

Wow, you made it down here!

If I can help you with a similar project, let's talk.

Other projects

Branding Zero Emissions WorldGamifying an impactful climate NGO

Saving Lives with Mixed RealityImmersive CPR, firefighting & medical courses

Covid-19 RapidpassAlleviating the Philippines' medical system

Molecules to MedicineAn AR journey through innovation

Managing the GridInto 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

LinkedIn
Medium
Dribbble