Husbanken Designsystem

A presentation at Design System Hour - Episode 2 in May 2021 in by Ronny Siikaluoma

Slide 1

Slide 1

Slide 2

Slide 2

Husbanken Designsystem Sikre god brukeropplevelser i en av Norges viktigste velferdsetater

Slide 3

Slide 3

Alle skal bo godt og trygt

Slide 4

Slide 4

Husbankens historie Innstramming og omstilling De ekspansive årene Gjeldskrise og omlegging Digitalisering og samordnet stat 1954-1965 1971-1980 1988-1996 2012-2020 1946-1954 1965-1970 1981-1988 1997-2012 Gjenreising og nyreising Rasjonalisert boligbygging Deregulering av boligmarkedet Fra boligbank til velferdsetat

Slide 5

Slide 5

Husbanken skal bidra til å Forsyne markedet med boliger til grupper som trenger bistand Gjøre vanskeligstilte i stand til å bli boende i egen bolig Forsyne markedet med boliger av god kvalitet som ivaretar universell utforming. Være en faglig støttespiller for kommunene

Slide 6

Slide 6

Slide 7

Slide 7

Om Husbanken Ca. 300 ansatte 9 nasjonale kontor 6 regionale kontor Ca. 16 mrd. kr/år i utlånsmidler Ca. 10 mrd. Kr/år i tilskuddsmidler Administrerer ordninger på andre politiske områder, eks studentboliger, omsorgsboliger, sykehjem og barnehager

Slide 8

Slide 8

Drammen

Slide 9

Slide 9

Papirbredden

Slide 10

Slide 10

Organisering

Slide 11

Slide 11

Organisering 50 faste ansatte, ca 25 konsulenter Smidige og tverrfaglige team Oppdatert teknologi Fokus på læring og kontinuerlig forbedring IT-Forvaltning IT-Utvikling Designsystem IT-Arkitektur IT-Prosess

Slide 12

Slide 12

Designsystem Arbeidsgruppa

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Design Tokens

Slide 17

Slide 17

Slide 18

Slide 18

Farger

Slide 19

Slide 19

Kontrastsjekker

Slide 20

Slide 20

Design tokens

Slide 21

Slide 21

Stylelint

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Ikoner

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Styling

Slide 29

Slide 29

Styling Style Dictionary Scss Sass MQ

Slide 30

Slide 30

Styling Vendor Objekter Konfigurasjon Komponenter Funksjoner Sider Baseoppsett (normalize) Helpers esoknad.css saksbehandling.css husbankenno.css brev.css

Slide 31

Slide 31

Slide 32

Slide 32

Komponenter

Slide 33

Slide 33

Komponenter Figma

Slide 34

Slide 34

Slide 35

Slide 35

Komponenter Angular TypeScript Cypress

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

Slide 40

Slide 40

Slide 41

Slide 41

Portalen

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

Slide 45

Slide 45

Prosess

Slide 46

Slide 46

Prosess Solo

Slide 47

Slide 47

Prosess Bidrag

Slide 48

Slide 48

Prosess Bidrag

Slide 49

Slide 49

Slide 50

Slide 50

Kommunikasjon og samarbeid Jira Teams RocketChat Miro

Slide 51

Slide 51

Spørsmål

Slide 52

Slide 52