ABICRACK

ABICRACK

ABICRACK

02

Education

Client

Luca H.

ABICRACK brings Abitur preparation into one connected learning platform. A structured subject library, practice tools and a personal dashboard help students move from finding a topic to understanding it, testing themselves and planning what comes next.

ABICRACK brings Abitur preparation into one connected learning platform. A structured subject library, practice tools and a personal dashboard help students move from finding a topic to understanding it, testing themselves and planning what comes next.

Project showcase

The Abi 2026 interface — from the first visit to the subject library and focused study tools.

ABICRACK · 1/7

Project Focus

Learning platform · Content architecture · Study tools · Dashboard & progression · HTML, CSS & JavaScript

The Challenge

Preparing for the Abitur means working across several subjects, a large amount of material and a fixed deadline. The goal was to make that workload easier to navigate: give students a clear starting point, keep reference material close to practice, and make their next study task easy to find.

Preparing for the Abitur means working across several subjects, a large amount of material and a fixed deadline. The goal was to make that workload easier to navigate: give students a clear starting point, keep reference material close to practice, and make their next study task easy to find.

The Solution

The library forms the centre of the experience, organised into subjects, course terms and topics. Quizzes, flashcards, a searchable glossary and an operator collection support the learning material. A personal dashboard connects progress and exam dates, with AI-supported plans and social tools extending the platform around the student’s routine.

The library forms the centre of the experience, organised into subjects, course terms and topics. Quizzes, flashcards, a searchable glossary and an operator collection support the learning material. A personal dashboard connects progress and exam dates, with AI-supported plans and social tools extending the platform around the student’s routine.

Early traction

The first four weeks.

Successfully registered users

Tracked learning hours

Completed learning items

AI requests

Users acquired through Google

Source: platform figures supplied by the project owner. Reporting period: the first four weeks after launch.

What we built

The features behind the experience.

/001

A library with a clear structure

24 subjects and 1,607 topic entries are organised by subject, course term and topic. Search and a persistent subject sidebar help students find material without losing their place.

/002

Practice alongside the material

Topic quizzes and flashcards give students a way to check what they have understood. Subject tests combine question formats, while exam preparation pages support longer practice sessions.

/003

A personal study dashboard

Learned topics, subject progress, study time and exam dates come together in one place. Activity history and recent work help students pick up where they left off.

/004

AI support for the next question

The platform includes an AI tutor, answer feedback and personalised study-plan tools. Plans can be saved, edited and checked off as work is completed; availability depends on account access and usage limits.

/005

Exam language, explained

The operator collection explains what tasks such as analysing, comparing and evaluating ask students to do. Definitions, example tasks, model answers and common mistakes sit alongside filters for the different levels of demand.

/006

A glossary that does more than define

Terms can be searched and filtered by subject and course term. Subject-specific visuals, including an interactive periodic table, add another way to explore the material.

/007

Small reasons to keep going

XP, levels, streaks, badges and daily challenges make study activity visible. The progression system is connected to learning actions, giving the dashboard a sense of continuity between sessions.

/008

Space to learn together

Friend requests, messaging, study groups and shared group notes extend the platform beyond individual revision. Guest browsing offers an introduction, while account access supports saved progress and personal tools.

The approach

How the experience comes together.

01

Organise the material before the interface

Subjects, course terms and topic groups form the navigation structure. The library keeps that hierarchy visible, while search gives students a direct route to a specific topic.

02

Keep reading and practice connected

Learning pages, quizzes, flashcards and reference tools share the same subject context. Students can move from an explanation to practice and return to supporting material when something is unclear.

03

Make progress part of the product

The dashboard brings completed topics, study activity and upcoming exams into one view. Saved plans and account-based progress connect short study sessions into a longer preparation routine.

04

Carry one visual system through the platform

Reusable HTML, CSS and JavaScript patterns connect the landing page, library, account screens and learning tools. Violet accents, subject colours and restrained motion guide attention through a large amount of content.

A closer look.

06 views
01The library — subject navigation, topic search and a clear starting point for each study session.
02Subject overview — consistent cards make the breadth of the library easy to scan.
03Exam operators — definitions, levels of demand and filters explain what each task requires.
04The glossary — searchable reference material with subject-specific learning visuals.
05Account access — sign-in, registration and a guest route into the learning environment.
06A consistent finish — the 2026 landing page connects the library, learning tools and account features.
ABICRACK · 1/7
The Outcome

A connected study environment that brings content, practice, planning and progress into the same product. The interface gives a broad collection of learning material a consistent structure, with dedicated tools for individual revision and studying together. Project status — ABICRACK is temporarily offline while the platform is being prepared for Abi 2027. The screenshots in this case document the Abi 2026 version.

A connected study environment that brings content, practice, planning and progress into the same product. The interface gives a broad collection of learning material a consistent structure, with dedicated tools for individual revision and studying together. Project status — ABICRACK is temporarily offline while the platform is being prepared for Abi 2027. The screenshots in this case document the Abi 2026 version.

Start Your Project

If you’re ready to build a website that supports real, measurable business growth, let’s talk.

Man Portrait

Milo Kopper

Founder & CEO

We respond within 24 hours

Subscribe for new notes on design and useful websites.

Start Your Project

If you’re ready to build a website that supports real, measurable business growth, let’s talk.

Man Portrait

Milo Kopper

Founder & CEO

We respond within 24 hours

Subscribe for new notes on design and useful websites.

Start Your Project

If you’re ready to build a website that supports real, measurable business growth, let’s talk.

Man Portrait

Milo Kopper

Founder & CEO

We respond within 24 hours

Subscribe for new notes on design and useful websites.