Alle cases
Systematic

Case · Systematic × AULA

Design til
halvdelen af Danmark.

AULA skulle erstatte det IT-system, som alle folkeskoler, dagtilbud og fritidsordninger i Danmark bruger. Sammen med Systematic designede vi brugerfladen for familier, lærere og pædagoger på fire slags skærme.

KSS8C3BMF
2

Hanne Hansen

Forælder (Korsbæk Skole)

Mandag d. 28.09.2026

Birgitte Krumborg

Mor til Adam Jensen

Adam bliver hentet af farmor i dag

Hej Karen, bare så I ved det. God dag!

I dag kl. 07.52

Kurt Overgaard

Skoleleder

Invitation til møde om trivsel i 2.A

Deltager

Mødetidspunkt

16. oktober kl. 15.30 – 16.30

I dag kl. 08.10

Martin Madsen▸Klasseværelset 2.A

Lærer 2.A

Matematikværksted i 2.A

Det glæder os, at vi endelig har fået sat vores matematikværksted i gang …

+2
I dag kl. 10.304

Ditte Buus

Pædagog

Sprogarbejde i pædagogisk praksis

TypeIntern dokumentKategoriPædagogisk note
I går kl. 14.30

Kalender

28September
8.50
9.35
Dansk2.A
9.55
10.40
MatematikVærkstedet
10.45
11.30
Natur/teknologiLokale 114
11.30
12.00
FrokostpauseKantinen
12.00
12.45
IdrætHallen
13.00
14.00
ForældresamtalerLokale 114B
8.00
8.45
Morgensamling2.A
KSS8C3BMF
2

Mandag d. 28.09.2026

Birgitte Krumborg

Mor til Adam Jensen

Adam bliver hentet af farmor i dag

Hej Karen, bare så I ved det. God dag!

I dag kl. 07.52

Kurt Overgaard

Skoleleder

Invitation til møde om trivsel i 2.A

Deltager

Mødetidspunkt

16. oktober kl. 15.30 – 16.30

I dag kl. 08.10

Martin Madsen▸Klasseværelset 2.A

Lærer 2.A

Matematikværksted i 2.A

Det glæder os, at vi endelig har fået sat vores matematikværksted i gang …

+2
I dag kl. 10.304

Ditte Buus

Pædagog

Sprogarbejde i pædagogisk praksis

TypeIntern dokumentKategoriPædagogisk note
I går kl. 14.30
9:41

Mandag d. 28.09 · 2.A

Martin Madsen ▸ 2.A Forældre

Lærer i 2.A

Tur til Moesgaard

I dag kl. 14.22

Karen Amdisen ▸ 3.B Forældre

Lærer i 3.B

Hyttetur

Kære forældre, det er snart tid til vores årlige hyttetur i spejderhytten …

I dag kl. 11.122

Alt på siden virker. Klik rundt.

2,5 mio.+

forventede brugere

250 mio.+

kr. i estimeret budget

4

platforme, ét designsprog

1

sted til skole og dagtilbud

Opgaven

Et offentligt system, der skal føles som en god app.

AULA var et af de største offentlige IT-udbud i Danmark. Kunden havde høje forventninger til brugeroplevelsen, og brugervenligheden skulle dokumenteres med analyser af, hvordan rigtige brugere opfører sig. Vores opgave var brugerfladen: fra personas og scenarier til skærme, man kan klikke sig igennem.

01

Alle er brugere

Forældre, bedsteforældre, lærere, pædagoger og skoleledere. Mange af dem interesserer sig ikke for teknologi, og det skal de heller ikke.

02

Dokumenteret brugervenlighed

Hvert designvalg skulle underbygges af brugerscenarier og adfærdsanalyser, ikke af smag.

03

Fire meget forskellige skærme

En telefon i en travl hånd, en tablet i klasseværelset, en computer på kontoret og en stor touchskærm ved døren.

Det lavede vi

Fire hovedområder.

Brugerfladedesign

Hele brugerfladen til web og app, fra navigation og forside til beskeder, kalender og tjek ind-flowet.

Personas og mapping

Hvem bruger AULA, på hvilken enhed, i hvilken situation, og hvad skal de nå på tredive sekunder.

Scenariebaserede mockups

Brugerscenarier sat op oven på de realiserede mockups og præsenteret som skærmbilleder fra det virkelige system.

Forbedringer fra UX-research

Ændringer i brugerfladen drevet af det, researchen viste, og dokumenteret, så kunden kunne se hvorfor.

Ét system, fire skærme

Det samme AULA, uanset hvor du møder det.

Ét designsprog, tilpasset til hvordan hver skærm faktisk bliver brugt. Vælg en enhed og prøv den.

Til det fulde overblik

På computeren står forside og kalender side om side. En bjælke yderst til venstre skifter mellem børn og grupper.

  • En tidslinje med et mærke for hver type
  • Invitationer, du svarer på direkte i forsiden
  • Beskeder med massehandlinger og mapper
KSS8C3BMF
2

Hanne Hansen

Forælder (Korsbæk Skole)

Mandag d. 28.09.2026

Birgitte Krumborg

Mor til Adam Jensen

Adam bliver hentet af farmor i dag

Hej Karen, bare så I ved det. God dag!

I dag kl. 07.52

Kurt Overgaard

Skoleleder

Invitation til møde om trivsel i 2.A

Deltager

Mødetidspunkt

16. oktober kl. 15.30 – 16.30

I dag kl. 08.10

Martin Madsen▸Klasseværelset 2.A

Lærer 2.A

Matematikværksted i 2.A

Det glæder os, at vi endelig har fået sat vores matematikværksted i gang …

+2
I dag kl. 10.304

Ditte Buus

Pædagog

Sprogarbejde i pædagogisk praksis

TypeIntern dokumentKategoriPædagogisk note
I går kl. 14.30

Kalender

28September
8.50
9.35
Dansk2.A
9.55
10.40
MatematikVærkstedet
10.45
11.30
Natur/teknologiLokale 114
11.30
12.00
FrokostpauseKantinen
12.00
12.45
IdrætHallen
13.00
14.00
ForældresamtalerLokale 114B
8.00
8.45
Morgensamling2.A

Touchskærmen

Hvor er hvert barn lige nu?

I dagtilbud er overgangene de sværeste øjeblikke: ankomst, turen på legepladsen og afhentning. Touchskærmen gør de øjeblikke til to tryk. Tryk på et barn og flyt det, eller send det hjem og vælg, hvem der henter.

Tryk på et barn for at prøve
Søg
123456789101112

08:15

Man · 28. sep · U40

Status med ét blik

En farvet prik viser, om barnet er her, er ventet eller er sygt. Uret viser, hvor længe barnet har været samme sted.

Ét spørgsmål pr. trin

Først "Hvor vil du gerne hen?", så "Hentes af". Ingen formularer og intet tastatur.

Bygget til fulde hænder

Store trykflader, der virker med én hånd, mens den anden holder et barn, en madkasse eller en jakke.

Personas

Fire mennesker, fire meget forskellige dage.

Vi byggede personas ud fra målgrupperne og kortlagde, på hvilke enheder og i hvilke situationer hver af dem møder AULA.

P01

Hanne Hansen

Mor til to · 38

“Jeg vil bare vide, at alt er i orden, uden at åbne fem apps.”

Behov

  • Begge børn ét sted
  • Hurtige beskeder til læreren

Frustrationer

  • For mange systemer
  • Notifikationer, der ikke betyder noget
P02

Karen Amdisen

Lærer i 2.A · 44

“Hvis det tager mere end et minut, gør jeg det i aften i stedet.”

Behov

  • Nå alle forældre på én gang
  • Dele billeder fra undervisningen sikkert

Frustrationer

  • Dobbeltarbejde
  • For lidt tid mellem timerne
P03

Ditte Buus

Pædagog i børnehave · 29

“Mine hænder er altid fulde. Skærmen skal kunne følge med.”

Behov

  • Vide hvor hvert barn er
  • Vide hvem der henter

Frustrationer

  • Travle overgange
  • Papirlister, der bliver forældede
P04

Kurt Overgaard

Skoleleder · 56

“Jeg skal kunne stole på, at de rigtige kan se de rigtige ting.”

Behov

  • Styr på rettigheder
  • Klar kommunikation til personalet

Frustrationer

  • Kompleks administration
  • Intet overblik over adgange

Persona-mapping

Hvor meget hver persona bruger hver enhed.

TelefonTabletWebTouchskærm
Hanne HansenMor til to
Karen AmdisenLærer i 2.A
Ditte BuusPædagog i børnehave
Kurt OvergaardSkoleleder

Brugerscenarier

En mandag, fortalt gennem skærmene.

Vi satte brugerscenarierne op oven på de realiserede mockups, så kunden kunne følge én rigtig dag, skærm for skærm.

07:40

Hanne · Telefon

En besked på vej ud ad døren

Hanne skriver til børnehaven, at farmor henter Adam i dag.

Hanne Hansen

Til Rød stue · Adam Jensen

Farmor henter Adam i dag

07:55

Ditte · Touchskærm

Tjek ind ved døren

Ditte trykker på Adam og sender ham på Rød stue. Hannes besked står lige på hans kort.

Adam Jensen

Rød stue

Farmor henter i dag

10:30

Karen · Tablet

Billeder fra klassen

Karen deler billeder fra matematikværkstedet med forældrene i 2.A.

Matematikværksted i 2.A

+2
14:00

Kurt · Web

En invitation i forsiden

Kurt inviterer forældrene til et møde. Hanne accepterer direkte fra forsiden.

Invitation til møde om trivsel

16. oktober kl. 15.30

Du deltager
16:30

Ditte · Touchskærm

Hentet af farmor

Ditte trykker "Hjem", vælger farmor, og forældrene ved, at Adam er på vej.

Hentes af

Farmor Inge

Fra research til brugerflade

Det viste brugerne os, og det ændrede vi.

UX-researchen gav os fund. Hvert fund blev til en konkret ændring i brugerfladen.

01

Fund

Personalet ved døren har højst én hånd fri.

Ændring

Store billedkort og knapper på mindst 52 px på touchskærmen.

02

Fund

Forældre med flere børn mistede overblikket over, hvem en besked handlede om.

Ændring

En børnebjælke yderst til venstre, så du altid kan se og skifte mellem dine børn.

03

Fund

Brugerne skulle lede på tværs af moduler for at se, hvad der var nyt.

Ændring

Én tidslinje, hvor beskeder, møder, opslag og dokumenter har hver sit mærke.

04

Fund

Det tog flere skærme at svare på en invitation.

Ændring

Accepter og Afvis direkte på kortet i forsiden.

05

Fund

Lærerne ryddede op i indbakken én besked ad gangen.

Ændring

Markering af flere beskeder med en tydelig handlingsbjælke til favorit, papirkurv og flyt.

06

Fund

Personalet kunne ikke se, hvilke børn der havde været samme sted for længe.

Ændring

Tid på hvert kort, i rødt når den passerer grænsen.

Administration

Rettigheder, man faktisk kan læse.

Hvem der må skrive til hvem, er et juridisk spørgsmål i en skole. Vi gjorde reglerne til en matrix pr. kanal, så en administrator kan se og ændre adgange med ét blik. Prøv at slå en rettighed til eller fra.

Grupper

Hjemmeside

Infotavle

Ressourcer

Kanaler

Samtykker

Tilladelser

Filer

Brugere

Korsbæk Skolen

Simon Sinek

Administrator

Kanaler

RollerVærgeElevDagtilbudsbarnPæd. personaleVejlederFagkonsulentPPR-medarbejderLeder
Dagtilbudsbarn
Elev
Fagkonsulent
Leder
PPR-medarbejder
Pæd. personale
Vejleder
Værge

Designsystem

Ét system, fra telefonen til væggen.

Vi byggede AULA på et fælles designsystem: tokens for farver, typografi, afstande og dybde, og et komponentbibliotek, der skalerer fra telefonen til en touchskærm på væggen. En varm gradient giver AULA sin personlighed, petrol markerer det valgte, og rød er forbeholdt de handlinger, der betyder noget. Alt herunder er levende, så prøv det.

6

kernefarver

2

skrifttyper

40+

komponenter

4

platforme

Fundament

Lyse og mørke toner

100
200
300
400
500
600
700

AULA Pink · Brand og navigation

Signaturgradient

#ec1f63#f43f4f#ff5a2c

linear-gradient(135deg, …)

Typografisk skala

Display

Quicksand 700 · 44/52

Beskeder

Title

Quicksand 700 · 28/36

Sommerudflugt 2016

Heading

Roboto 500 · 20/28

Hvor vil du gerne hen?

Body

Roboto 400 · 15/24

Husk madpakke og regntøj til turen i morgen.

Caption

Roboto 400 · 12/16

Lærer · Korsbæk Skole

Quicksand til sidetitler, for en venlig og afrundet stemme. Roboto til alt, man læser og trykker på.

Ikoner

stroke 1.6 · 20 px · 24 px grid

Afstande på et 4 px-grid

4
8
12
16
24
32
48

Hjørner

2
12
pill
50%

Dybde

e1
e2
e3
6
1
2

Karen Amdisen▸2.A

Lærer · Korsbæk Skole

3Tak for en skøn tur i skoven i dag. Her er et par billeder fra dagen.

4
+9
5 I dag kl. 14.024

Et opslags anatomi

Hvert kort i feedet er bygget af de samme dele, så en forælder lærer mønsteret én gang og kan læse ethvert opslag med ét blik.

Komponentbibliotek

button / variants

button / states

VælgStandardVælgHoverVælgTrykketDeaktiveret

button / async

button / with icon

button / kiosk

Prototype

Klikbar, før den blev bygget.

Vi var med til at bygge en interaktiv prototype til computer og smartphone i Axure, så kunden kunne teste flowene med rigtige brugere, før udviklingen gik i gang.

01Log ind

02Forside

03Besked

8
9
10
11
12
13

04Kalender

05Tjek ind

Det siger kunden

Samarbejdet med Ceptiv har været en fornøjelse. Deres designer satte sig hurtigt ind i et meget komplekst område og omsatte vores krav til en brugerflade, der var klar, varm og nem at bruge for alle, fra forældre til pædagoger. Personas og brugerscenarier gav os et stærkt og veldokumenteret fundament i udbuddet, og samarbejdet var professionelt, fleksibelt og til tiden hele vejen igennem. Jeg kan varmt anbefale Ceptiv.
DRDina RaabjergProjektleder · Systematic A/S

Det leverede vi

Alt, brugerfladen skulle bruge.

Brugerfladedesign til web og app
Layouts til tablet og telefon
Touchskærm til dagtilbud
Administrations- og rettighedsskærme
Personas og persona-mapping
Brugerscenarier på rigtige mockups
Forbedringer drevet af UX-research
Interaktiv prototype i Axure
Designsystem og komponenter

Bygger I noget, mange mennesker skal bruge?

Vi designer brugerflader, der virker for alle, fra den første persona til den sidste pixel. Fortæl os om jeres projekt.