Lækkert design

Sådan bliver dit digitale design super lækkert

Velkommen08.55: Vi sætter os ned

09.00: Velkommen

09.05: Laust Jørgensen: Designprocessen ovenfra og hvorfor

09.15: Mads Vad: Mål og fokus

09.45: Pause - alle strækker ben

10.00: Martin Andersen: Fra struktur til design

10.45: Tak for i dag

Alle slides bliver delt bagefter

Why

How

Timeline1 2Målsætninger og overordnet koncept

Analyser

3 4Justering af koncept + indhold

Færdiggørelse af koncept

5 6Sidetyper og informationsarkitektur

Wireframes 1 / designoplæg 1

7 8Wireframes 2 / designoplæg 2

Wireframes 3 / designoplæg 3

9Wireframes 4 / designoplæg 4

Sprintmøde 1: Basissite

Sprintmøde 2: Navigationssider

Færdiggørelse

Launch

14

1611

What

• Garanti• Fleksibilitet• Øje på målet

Watch out

• Stakeholdere• Projektorganisation• Fleksibilitet <> budget• Hvornår er du en succes?

Agenda. 3 pointer jeg gerne vil have igennem

Identificérkundernes

behov

Plot denrette

retning

Få retningenind i

løsningen

Identificér kundernes behov

Risikoen. End ikke som ham her…

Sikkerhed. Hvorfor satse når man kan vide?

Investering

Faktuel videnom kundebehov

90% fejlrate- 42% fejler fordi der ikke er noget marked

Proces. Hvordan kan man blive klogere?

Opstilhypotese

Testhypotese

Analysérfindings

Opsætmålsætninger

Plot den rette retning

Konkretisering. Fra behov til koncept

Tag udgangspunkti målsætninger

Prioritérdet vigtige

Beskriv konceptetpå basis af mål

Eksempler. Målsætninger i praksis

Skaf tilmeldinger Skaf salg Skaf downloads

Få retningen ind i løsningen

Konkretisering. Fra koncept til løsning

Få målene nedpå de enkelte

sidetyper

Tænki logiske

flows

Huskfokus pådetaljen

Opfølgning. Hold styr på målsætningerne

Implementértracking

Opret budgetterbaseret på mål

Hold øje medperformance

Designprocessen

Designprocessen

Struktur

StrukturStruktur & IAPersonas - hvem designer vi til?

Struktur

27

Struktur

28

Struktur

29

Struktur & IAEksisterende eller ny struktur - hvad er udgangspunktet?

Struktur

30

Struktur & IAIdentificer nøgleflows

· Hvilke brugerrejser er de vigtigste?

Struktur

31

Struktur & IAOmstrukturering og ændring af fokus

StrukturStruktur & IADenne fase ender med:

· Opdateret struktur

· Hvad menuen indeholder

· Oversigt over sider/sidetyper

· Hvor vil vi lede brugerne på vej i forhold til vores målsætninger

StrukturStrukturtipBrugerne kan ikke overskue mere end 7 hovedmenupunkter

Skitser

SkitserSkitser & wireframesDesign starter her!

SkitserInspiration

SkitserWireframesUd fra strukturen tegner vi wireframes

· Fokus på prioritering af indholdet

· Fokus på brugerrejser

Skitser

38

Skitser & wireframes

Skitser

39

Skitser & wireframes

SkitserWireframesWireframes er en visualisering af websitet

· De beskriver en gennemgående opbygning

· Hvordan opfører sitet sig på forskellige skærme

· Hvordan er sitets elementer prioriteret

· Hvordan navigerer brugeren fra A til B

SkitserUX Tip 1Valgmuligheder >< Brugbarhed

Skitser

42

UX Tip 1Valgmuligheder >< Brugbarhed

UX Tip 2Tommelfingerreglen

Skitser

44

UX Tip 2Tommelfingerreglen

Skitser

Look & feel

Look & feelDesignHvor begynder vi:

· Er der en visuel identitet?

· Eller begynder vi længere tilbage?

Look & feel

47

DesignBygger ud på baggrund af wireframes og med løbende feedback

Look & feel

48

Look & feel

49

Look & feel

50

Designtip 2Trunk testen - 6 spørgsmål brugeren stiller sig selv:

1: Hvilket website er det her?

2: Hvilken specifik side er jeg på?

3: Hvilke hovedsektioner er på sitet?

4: Hvilke muligheder har jeg?

5: Hvor er jeg?

6: Hvor kan jeg søge?

Look & feel

52

Skitser & wireframes1: Hvilket website er det her?

2: Hvilken specifik side er jeg på?

3: Hvilke hovedsektioner er på sitet?

4: Hvilke muligheder har jeg?

5: Hvor er jeg?

6: Hvor kan jeg søge?

Look & feel

53

Skitser & wireframes1: Hvilket website er det her?

2: Hvilken specifik side er jeg på?

3: Hvilke hovedsektioner er på sitet?

4: Hvilke muligheder har jeg?

5: Hvor er jeg?

6: Hvor kan jeg søge?

Look & feel

Prototype

PrototypePrototypeHvad er en prototype?

Prototype

56

PrototypeFordel at kunne se hvordan sitet vil opføre sig live

PrototypePrototypeEksempler:

https://invis.io/9D7AEOZAZ#/158273595_Forside_FastBaggrund-V2

https://invis.io/B97AVAPEC#/156213057_Forsikring-Mobile-17Start

http://danskjournalistforbundprototype.standard.stage.ng.peytz.dk/journalistforbundet-internal/patterns/02-journalistforbundet-01-forside-007-forside/02-journalistforbundet-01-forside-007-forside.html

PrototypePrototypeHer er det et godt tidspunkt til en brugertest

· Det kan gøres på et par timer

· Eller projektet kan gennemgås internt i organisationen