In 2023 I worked with Prosumio, an environmental education start-up based out of Berlin as part of a UX Bootcamp. Prosumio aims to teach teenagers about environmental activism and sustainable behaviours.
Project type
UX, UI, Game design, AB testing
Role
UX/UI Designer
Tools
Figma / FigJam
Illustrator / Photoshop
Duration
2 weeks
When we started working with Prosumio, the basic interface was created, but the meat of the app, the educational of the app was underdeveloped. The "game" section just opened a series of pdfs, which isn't very fun.
We wanted to create a fun, interactive quiz about a range of topics to engage teenagers and challenge them to learn and create change in their lives.
We came up with the idea of adding a simple micro-learning quiz section to the game section with a leaderboard to increase competition and encourage play.
We conducted basic feature analysis of immediate competitor apps to understand how Prosumio fit in the market.
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.
Our interviews were incredibly illuminating, and we took away the following insights, ready to apply them to our new 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.
And we started creating wire frames to imagine how we wanted the app toflow.
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.
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.
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.
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.
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!
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.
.png?hash=af9a5c90e2fe0a8b1c6f3feda48832bc160cc7b0&shop=leigh-german-testshop&width={width}&height=2560)
