medienkundig

medienkundig helps adults recognise digital deception and practise how to respond. We brought research, product concept, brand and interface together to turn abstract security advice into practical learning activities.

Challenge: Make digital safety understandable and practical for people aged roughly 45 to 80.
Our contribution: User research, requirements, product concept, brand, design system and web application development.
Result: A learning product with a recognisable identity, guided onboarding and interactive exercises.

People’s experiences as the starting point

We used 32 usable survey responses and three written expert interviews to establish which situations the learning product should address. Its exercises draw on scams people had encountered, letting them practise assessing a message and choosing an appropriate response.

An introduction that explains the benefit

Before signing up, people should be able to understand and try what medienkundig offers. We introduce the exercises first and explain registration through its purpose: saving their learning progress. The visual design and mascot Tinti support this introduction.

A shared foundation for design and development

The website and exercises share a technical foundation that supports further development of the learning content. Astro serves the website, React provides the interactive tasks, and Supabase manages accounts and progress, with shared packages keeping design and functionality consistent across both areas.

From everyday experiences to product requirements

Survey participants described fraudulent texts, WhatsApp messages and calls that had left them unsure how to respond. We analysed these experiences from 32 usable responses alongside three written expert interviews. This informed medienkundig’s approach: recognising suspicious situations and practising how to handle them through concrete tasks.

Personas, scenarios and prioritised requirements translate these findings into the product. The glossary explains unfamiliar terms, while the exercises let people apply what they know and receive feedback on their decisions. The website introduces the approach before the learning app guides them through the tasks and saves their progress.

Why “Save progress” explains more than “Create an account”

Feedback on the introduction showed that some people associated the word “account” with concerns about personal data. Because the reason for signing up was not yet clear, registration was asking for trust before they had experienced the learning content.

We therefore placed the exercises before registration and explained passwordless sign-in as a way to save progress. This required more than different wording: the tasks had to be accessible without an account, and people signing in later needed to be able to continue the learning journey they had already started.

Brand and feedback in support of learning

The logo, colours and typography give the four areas of information, critical thinking, communication and protection a shared identity. Tinti appears mainly during the introduction and feedback, while each exercise keeps the task itself in focus and uses the design to support completion.

In matching exercises, lines between the cards make each choice visible. The answers remain open to changes while terms are still unmatched, and the solution can only be checked once every term has been assigned. People can review their reasoning before the app provides feedback.

Built for use and continued development

The website and learning app live in a monorepo so they can share design, content types and functionality. Supabase manages accounts, Postgres data and files, with access rules for private account data. Anonymous sessions allow people to start before signing up, implementing a central User Research decision in the technical architecture.

Our Playwright and accessibility checks follow the complete learning journey, from the website and first exercise to saved progress. This includes the transitions between product areas, helping us assess whether changes to the interface or code still support the journey people have started.

Inside the project

medienkundig · Product video

Design and technology in context.

Astro, React and TypeScript in a shared monorepo; Supabase for authentication, Postgres and files. Playwright and accessibility checks support development.

Visit website