BIRD UX - Beyond Interfaces, Real delight

Get in touch

hello@birdux.studio

Phone Berlin 0171.12 45 07 3
Phone Mannheim 0177.71 38 208

Martin Luther University Halle-Wittenberg

Playing surface and pieces of the energy transition game

GrowFlowFly – Understanding the Energy Transition Through Play

Services
Experience Design . UI Design and Design Systems . UX Strategy

Link

How can playful approaches make complex topics like renewable energy tangible and accessible to everyone? By designing a computer game that connects science and society in a pretty cool way!

The Challenge: Exploring Acceptance of Renewable Energy – With Fun!

Imagine being able to design your own energy-neutral landscape. Sounds exciting? That’s the idea behind GrowFlowFly! Citizens were invited to explore what a sustainable landscape could look like while also assessing if their vision resonated with others. It wasn’t just about creativity but also about education: Which technologies work together? What does climate-neutral planning entail? How does the community evaluate your ideas?

Four Partners, One Mission

Martin Luther University Halle-Wittenberg, Technical University of Munich, RWTH Aachen University, and aratall GmbH joined forces to create a game that involves citizens early in renewable energy planning. The goal? Strengthen acceptance of the energy transition—with fun instead of boredom. Together with Claudius Brodman, we focused on user-centricity and designed the gaming experience for the GrowFlowFly prototype.

The Challenges

GrowFlowFly presented us with some tricky challenges:

“This ain’t Pong”: Simple Gameplay in a Complex 3D World
Games like Pong or Candy Crush are easy to understand. But GrowFlowFly operates in a realistic 3D environment, which can be overwhelming for players unfamiliar with gaming. The challenge was to create intuitive mechanics that cater to both gaming veterans and newcomers.

“This ain’t Super Mario Land”: Reality Meets Fun.
Unlike Mario, there are no magical leaps or defied laws of physics here. Players must navigate a real-world geo-information-supported landscape (“Die Passage” developed by aratall GmbH) and solve real tasks, without losing the element of fun.

“This ain’t The Sims”: Learning Made Easy.
Unlike life simulation games such as The Sims, GrowFlowFly has a clear goal: designing an energy-neutral landscape. Players gain knowledge about challenges and rules in landscape planning. Sounds dull? Not with the right dose of motivation and fun!

Two rows of three scribbles each for the Energy Landscape Design process. Post-its with feedback on the scribbles are attached to the scribbles.

From the online sketchboarding session with a total of six participants: Two scribbled journeys, which, based on the jointly developed "opportunity" ideas, show rough solution proposals for the current step in the user journey. The journey: a design process for an energy landscape that also explains the setting principle in an understandable way.

Our Solution: Process & Key Features

 Co-Creation for Breakthroughs

To reconcile these contrasts, we relied on a transparent co-design process. In multi-stage workshops, we defined clear goals with project partners and developed a vibrant primary persona: Silke Wefig-Knoll. Her journey was mapped, anti-personas were defined, and initial ideas were visualised through sketchboarding sessions.

Problems Solved:

  • Alignment with the individual goals of project partners
  • Sensitivity to the needs and questions of the primary persona (Silke Wefig-Knoll)
  • Knowledge-driven idea generation
Persona Template showing the name, profession, a quote, needs and pain points in German and English from the primary persona Silke Wefig-Knoll.

The needs and pain points of the (proto) primary persona Silke Wefig-Knoll while playing GrowFlowFly.

User Flow for Clarity

Using a user flow, we outlined the game’s scope and content requirements without having to focus on specific functionalities (the “how”). This ensured players would enjoy themselves while learning.

Problems Solved:

  • Visualisation of required processes, interaction options, and functions
  • Clear onboarding and tutorial design
Wireframe of the energy building landscape and three statuses of the technology toolbar.

The user flow helped us identify the sequences of the game phases and the necessary tutorial content (blue) without having to think about the design.

Minimalist Gaming Interface

Our wireframes visualised multiple processes: onboarding, landscape design, landscape evaluation, and landing pages, as well as the backbone of the tutorial phase: the game instructions.

Toolboxes and counters were strategically placed to avoid obstructing the view of the landscape, keeping the focus on what matters most: designing an energy-neutral environment.

Problems Solved:

  • Engaging knowledge transfer through gamification
  • Intuitive game mechanics
  • Alignment between researchers’ requirements and persona needs with the existing technical implementation (Die Passage by aratall GmbH)
Wireframe of the energy building landscape and three statuses of the technology toolbar.

During the wireframing process, each toolbox and counter was examined individually and optimised so that the most important elements were available and visible, while the landscape remained the focus.

All badges that can be earned at GrowFlowFly. Created from the Chakra UI design system and OpenMoji icons.

Who doesn't like to level up?! Players can collect badges for game experience, energy landscape, and rating. Game Cards are designed with Chakra UI elements and OpenMoji icons.

Scope-Fitting UI Design

While visual aesthetics impact usability, overly polished designs can be resource-intensive. The project aimed to develop a prototype for nationwide workshops rather than a market-ready product.

Our approach: maximise impact within scope by using a design system of an established framework enhanced with a unique GrowFlowFly colour palette and iconography.

Problems Solved:

  • Visually appealing yet scope-fitting design
  • Creation of GrowFlowFly’s unique identity
UI Design: Energy Landscape design process with open view tools bar and active room movement tutorial hint.
UI Design: Evaluating Energy Landscapes with an open information panel containing details of the technology used.

When evaluating the energy landscape, players receive a lot of information, e.g. on the technologies used, their distribution and energy yield. Does the performance of the technologies increase social acceptance? This can currently be tested individually on growflowfly.de.

Let the People Play

Participation Through Design

GrowFlowFly demonstrates how science and society can come together effectively. Thanks to its co-design process, we developed a prototype that not only explores acceptance potential for renewable energy but is also well-received by its target audience.

By making complex knowledge accessible in an engaging way, GrowFlowFly fosters genuine dialogue between citizens and researchers. Best of all? The balance between fun and education leaves players wanting more!

Ready for the energy transition? With GrowFlowFly, it becomes an experience! Try it now at growflowfly.de.

What our client has to say:

The daily work with The Geekettez/BIRD UX has always been characterised by an extremely positive atmosphere. The working environment was always constructive and appreciative due to the direct and fast communication and meetings at eye level.

The Geekettez/BIRD UX have reacted flexibly to the different requirements of the research team and unforeseen developments, making them an important anchor point within the network.

Materials were provided in a comprehensible and reliable manner. Overall, they are a very reliable partner with whom we would be happy to work again!

Katharina Dropmann | Research Associate | TUM School of Engineering and Design

Articles on GrowFlowFly

Do you have similar challenges?

We can support you in developing ideas and concepts, and advise on complex UX challenges or frustrated users. Let’s discuss how we can best support you in a non-binding initial consultation!

Further case studies

taz, the daily newspaper

taz, the daily newspaper

taz, the daily newspaperUncover problems before implementation with UX testing.ServicesLinkstaz App in the iOS App StoreLinkstaz App in the Google App Store Even before the technical implementation began, we carried out a combination of expert review for the new taz app with...

Cookie Consent with Real Cookie Banner