Præsentation af fælles designsystem

DAGSORDEN
Velkomst
Præsentation af projektet
Spørgsmål
Den videre proces
1
Fælles designsystem til borger.dk,
Digital Post, NemLog-in og
selvbetjeningsløsninger
Præsentation i Digitaliseringsstyrelsen
3. november 2015
AGENDA
Baggrund for projektet
Systemoverblik
Præsentation af opgaven
Lignende produkter
Spørgsmål
Den videre proces
3
BAGGRUND
• Ønske om at DIGSTs borgerrettede
produkter fremstår mere ensartede
• Stort fokus på, at offentlige
løsninger skal være brugervenlige
• Leverandører og myndigheder
efterspørger retningslinjer for,
hvordan løsninger skal opbygges
• DIGST har etableret et
designprojekt, der har undersøgt
behovet for og hvordan et design
bør udformes for borger.dk, Digital
Post, NemLog-in samt
selvbetjeningsløsninger
4
SYSTEMOVERBLIK
DIGSTs produkter
Omfattet
Digital Post
Borger.dk
5
NemLog-in
BEHOVENE FOR
BRUGERVENLIGHED,
RETNINGSLINJER FOR UX OG
GRAFISK LAYOUT ER SÅ
RELATEREDE, AT DE SKAL
BEHANDLES I DET SAMME
PRODUKT
6
november 2015
MED DESIGN FORSTÅS
GRAFISK,
BRUGERGRÆNSEFLADE-,
INTERAKTIONS-,
FRONT END- OG
INFORMATIONSDESIGN
7
november 2015
HVOR ER VI NU
Her er vi!
8
SITUATIONEN I DAG
Udviklingsvejledning
Overordnede krav på højt
abstraktionsniveau
Ubeskrevet
HTML-guide
”Problemet”
UI-komponenter. Lavt
abstrakstionsniveau
9
november 2015
SITUATIONEN I FREMTIDEN (LØSNINGEN)
Udviklingsvejledning
Overordnede krav på højt
abstraktionsniveau
Designmanual
Designlogik, designprincipper
Grafisk layout/typografi
Brugeroplevelses- og interaktionsdesign
UI-komponenter
HTML, CSS, JS
10
november 2015
Byggeklodser
BRUGEROPLEVELSESDESIGN
Oplevelse
11
november 2015
Brugerbehov og
forventninger
Service
Informationsdesign
Synergi
Indhold og navigation
(flow)
Synergi
Kommunikation
Brugergrænsefalde
Opsætning og visning
Indholdsdesign
Identitet
Synergi
(Forretning)
Brand, look & feel,
Stil og tone
Grafiske elementer
Brugervenlighed
Synergi
(Brugeradfærd)
Interaktionsdesign,
visuel kommunikation
Systemtilstande
Funktionalitet
Performance
Synergi
(Teknik)
Front-end
(html, css, js)
(Forretning)
Identitet
Brand, look & feel,
Stil og tone
Synergi
Grafiske elementer
DESIGNIMPLEMENTERING
(Brugeradfærd)
12
november 2015
Brugervenlighed
Interaktionsdesign
visuel kommunikation
Systemtilstande
Funktionalitet
Performance
Synergi
(Teknik)
Front-end (html, css, js)
Synergi
Struktur, etc.
CMS
Informationsarkitektur
Webservice/api
Integrationer
Fordeling
Sikkerhed
Håndtering
Lagring
Infrastruktur
Forretningsregler
Data
FREMOVER
SIGER VI
ALTSÅ, HVAD
DER ER GODT
DESIGN
13
november 2015
SLUTPRODUKT(ER) FOR PROJEKTET
1. Designoplæg til borger.dk, Digital
Post og NemLog-in + en
”dummy-selvbetjeningsløsning”
2. En designmanual (erstatter
HTML-guiden), der sætter
retningslinjerne for grafisk layout
og UX samt teknik (HTML/CSS)
14
november 2015
Baseres på krav
indsamlet i analysefasen
ØNSKER TIL PROCES
• Iterativt proces med konsulenter indstationeret i DIGST
Grafisk layout
UI-komponenter
Interaktionsdesign
Teknik
Designmanual
Designoplæg
Start
15
Slut
OPGAVEN ER UNIK –
MEN VI SKAL IKKE
OPFINDE DEN DYBE
TALLERKEN
(MEN BASERE OS PÅ BEST PRACTICE)
16
november 2015
ANDRE DESIGNMANUALER/REFERENCER
UX:
Styleguides:
• (Googles) Material design
• Lonely Planet
• (Apples) Human interface
design
• Mailchimp
Offentlige manualer:
• Gov.uk-manualer
• Virk designmanual
• HTML-guiden
Tekniske frameworks
• Bootstrap
• Foundation
17
november 2015
• pea.rs
• styleguides.io
• Etc…
…OG HVORDAN DE KAN SÆTTES I SPIL
Grafisk design
Interaktionsdesign
(funktionelt over fancy)
Supplerende UIkomponenter
Framework
(fx Bootstrap el.
Foundation)
… Så vi genbruger mest muligt
18
SPØRGSMÅL
19
DEN VIDERE PROCES
1. Korte bilaterale møder, hvor leverandører fx kan fremlægge
●
erfaringer med lignende projekter
●
samt ideer til, hvorledes opgaven kan løses,
●
herunder proces,
●
leverancens udformning og opfattelse af opgavens omfang
2. Udsendelse af endeligt udbudsmateriale
3. Udbud
4. Spørgsmål herefter kan sendes til Lisann Troelsen, litro@digst.dk
20