Perspekt 2.0

A Digital Toolkit for Social-Emotional Learning in Danish Schools

  • Client: Dansk Center for UndervisningsmiljĆø (DCUM)
  • Year: 20202
  • Role: Project Manager & Designer
  • Tags: EdTech, UX Design, React, Wellbeing, Information Architecture

Project Overview

Perspekt 2.0transforms a printed library of socio-emotional teaching materials into an intuitive digital platform that helps teachers plan, deliver, and reflect on their classroom’s wellbeing. The platform was piloted with over 70 Danish schools and launched nationally in August 2024.

The goal is to make it easier for teachers to access age-appropriate SEL content, track student engagement, and improve the measurable impact of social-skills education.

Motivation & Opportunity

Teachers were enthusiastic about Perspekt’s original materials. Feedback highlighted significant friction:printed kits were bulky,navigation was unclear, andimpact data was complex to collect.

By digitizing the experience, we aimed to:

Increase adoption by making the interface faster and clearer

Provide real-time class well-being dashboards

Support researchers with exportable data for evaluation

My Role & Collaboration

AsProject Manager & Designer, I led the digital transformation, including:

UX architecture and information hierarchy

Prototyping and user-testing with teachers

Coordinating feedback loops with researchers and developers

Prioritizing feature development based on real classroom usage

Design Approach

The platform is structured around three modules (0.–3. kl., 4.–6. kl., 7.–9. kl.), each containing 15–16 thematic lessons. Key features include:

Module dashboardwith class cards and visual progress

Lesson viewerwith exercise checklists and linked worksheets

Login landing pagewith program overview and onboarding video

Design principles includedclarity of hierarchy,low-friction lesson launch, andresponsive UIfor tablets and desktops.

Research & Iteration

We conducted:

Interviews with 30 teachers

Classroom observations

Co-creation sessions to identify workflow pain points

Findings led to features like:

Asearchable lesson interfaceto reduce overwhelm

Aninteractive wellbeing dashboardwith class-level metrics

Offline PDF exportfor rural schools with poor internet access

Technical Implementation

Built using:

React + Next.jsfor fast, interactive lesson access

Headless CMSfor easy content management

D3.jsfor lightweight data visualization

Prefetch systemto load upcoming assets during idle time

All are optimized forlow-bandwidth school environmentsand tested on tablet devices.

Outcome & Impact

The platform launched nationally in 2024. Early results:

85% of pilot teachersrated it easier to use than print

Teachers could locate and begin a lesson inunder 30 seconds

Researchers at VIVE now have access to anonymized progress data to inform future iterations

Reflection

Proud of:

Translating dense pedagogical content into a smooth, modern UI

Aligning product goals with both teacher needs and research metrics

Challenged by:

Balancingacademic rigourwith the speed of agile development

Ensuring equitable access in under-connected school districts

Landing ā€œLog indā€ page for Perspekt 2.0 showing the Perspect logo, teaser video embed, long-form description of the program’s goals and competencies, and a login/register form at right.

per_01

Landing ā€œLog indā€ page for Perspekt 2.0 showing the Perspect logo, teaser video embed, long-form description of the program’s goals and competencies, and a login/register form at right.

Module selection dashboard (ā€œMin profilā€) showing three tabs for Modul 1 (0.–3. kl.), Modul 2 (4.–6. kl.), Modul 3 (7.–9. kl.), and a grid of class cards (including ā€œOpret ny klasseā€ and sample classes 4.x, 4q, 1.a, 5c) with progress bars and ā€œRedigĆ©r klasseā€ links.

per_02

Module selection dashboard (ā€œMin profilā€) showing three tabs for Modul 1 (0.–3. kl.), Modul 2 (4.–6. kl.), Modul 3 (7.–9. kl.), and a grid of class cards (including ā€œOpret ny klasseā€ and sample classes 4.x, 4q, 1.a, 5c) with progress bars and ā€œRedigĆ©r klasseā€ links.

Alternate view of the module dashboard (Sketch HD prototype) with the same tabbed modules and class cards layout, demonstrating the design mockup state.

per_03

Alternate view of the module dashboard (Sketch HD prototype) with the same tabbed modules and class cards layout, demonstrating the design mockup state.

Prototype variation of the module dashboard showing selected ā€œModul 2ā€ tab and identical card grid for class management, illustrating design revisions.

per_04

Prototype variation of the module dashboard showing selected ā€œModul 2ā€ tab and identical card grid for class management, illustrating design revisions.

Chapter overview view for a chosen class (4.x) showing left-hand ā€œKapillerā€ navigation list, main ā€œKapitel 1 – Tanker og fĆølelserā€ content panel, right ā€œFokuspunkterā€ checklist, and six exercise cards (Ƙvelse 1–5 and Opsamling) with content and worksheet action buttons.

per_05

Chapter overview view for a chosen class (4.x) showing left-hand ā€œKapillerā€ navigation list, main ā€œKapitel 1 – Tanker og fĆølelserā€ content panel, right ā€œFokuspunkterā€ checklist, and six exercise cards (Ƙvelse 1–5 and Opsamling) with content and worksheet action buttons.

Completed-state view of the chapter exercises with checkmarks overlay on Ƙvelse 1–5 (blue) and Opsamling (gold) cards, indicating which activities have been finished by the class.

per_06

Completed-state view of the chapter exercises with checkmarks overlay on Ƙvelse 1–5 (blue) and Opsamling (gold) cards, indicating which activities have been finished by the class.

smile
smile
smile
smile