Getting Started

In August 2023 I worked with the Prosumio Team based out of Berlin on a UX project as part of the Ironhack UX UI Bootcamp. Prosumio is a game teaching teenagers environmental activism and sustainable behaviours.

Our Brief

To develop a new game feature, the Knowledge Card, a micro lesson quiz game within the app.

Setting Goals

We found the following 3 elements were missing from the basic concept for the Knowledge Cardsfeature. The knowledge card feature, which consists of a mini lesson and a follow up quiz, was presented as one long scrolling page with implanted pdfs, not exactly phone-friendly. The lessons lacked a sense of gaming elements, and the mascot Erdi was not included.

Market Research

We conducted basic feature analysis of immediate competitor apps to understand how Prosumio fit in the market.

User research

Our interviews focused on validating our assumptions and on getting a sense emotional connection teenagers have with games. We interviewed German students aged 14-17, and German teachers who specialised in developing sustainability curriculum.

Research insights

Our interviews were incredibly illuminating, and we took away the following insights, ready to apply them to our new feature.

Problem Statement

But before we started ideating, we wrote down a problem statement to clarify what was the basic problem with the existing Knowledge Card feature.

The Knowledge Card feature in the Prosumio App was designed to bring education and awareness to sustainability topics. We have observed that the existing version of Knowledge Cards is not meeting its goal of providing engaging and accessible micro lessons for teenagers, which is causing decreased attention and understanding from the user group and limiting partnership possibilities with schools.

Must haves

We defined four main elements that needed to be more present in the Knowledge Card feature.

Low fi wire-frames

And we started creating wire frames to imagine how we wanted the app toflow.

Mid fi and testing

We tested the app with a few of our classmates and interview subjects who had used the Beta version, to get some feedback. We mainly got functional feedback, so we mainly focused on improving function and flow in this phase.

Visual competitor analysis

Before we started the UI, we took a look at competitors. With game apps and with this tricky age group (teenagers) we wanted to make the feature look friendly and fun without coming across as baby-ish, cheesy, or overly serious. We took inspiration from the following sites, including Duolingo, Kahoot!, and Anton.

Prosumio Style Tile

We then redefined the Prosumio style a bit, creating a style tile to see all the elements clearly together. It wasn't specifically in our brief to do a redesign of the UI, but we knew that the Prosumio team did not have a UI designer, and we felt that reimagining the app as lighter, with fewer dark backgrounds and more clear emphasis on the learning material, we would improve the overall experience and functionality of the app.

High Fi Screens

To show you what I mean, here are a few "before and after" gifs of how we modified the UI to bring more clarity and function to the app.

Generally we lightened everything up, added more hierarchy with text and titles, and added a lot of playful elements like Erdi, as well as modifying the quiz section to look like a chat. We felt the dark purple background made text difficult to read, and was distracting from the content.

Happy path / demo

Here is a little walkthrough of our revised user experience flow. We added new view filters, as well as the leaderboard, a way to show the teams or groups, as well as the entire lesson and game interface. Hope you enjoy!

Dark mode

We did have a little window to start creating a dark mode, which was fun. We actually used a Figma plug in to handle the initial conversion then modified elements afterwards, focusing on adding or reducing colour contrast where necessary. It certainly has a different feel than the original version.

Next steps

We only had 9 days total for this project so unfortunately we ran out of time to make more improvements. We had the following steps in mind though that we recommended to the Prosumio team as next steps.

Thanks for stopping by!