Agil und Kreativ
Dortmund (Conciso), 14.06.2018
Wie funktionieren moderne UX Designprozesse?
Shared under Creative Commons (CC-BY-ND).
Photo by Q uino Al on Unsplash
Nutzerzentrierung und Innovation
§Hintergrund in Technik, Projektmanagement
und Usability
§User Research
§Benutzungstests und Expertenevaluation
§UX Design
§Systemischer Organisationsberater
Menschzentriertes Gestalten von Produkten & Organisationen
DESIGN?
3
Experience Design Technical Design„Design“ „Technik“
4
Was sind Eure Geschichten
von der Design-Front?
Stijn Swinnen : https://unsplash.com/photos/qwe8TLRnG8k
Zum Aufwärmen (3-5 Min.):
§ Zweier-Teams:
Jeder sucht sich einen Gesprächspartner.
§ Die Teams einigen sich auf Rollen A + B:
§ A erzählt seine eindrücklichste „War Story“
zum Thema Design
§ B fragt nach und merkt/notiert sich, was er
gehört hat in einem Satz.
Drei Ebenen der Betrachtung
Tooling für digitale Produkte
Prozesse und Rollen
(Produkt-)management & Strategie
6
„ The future is
already here —
it's just not very
evenly distributed.“
Portraitfoto: G onzo Bonzo - originally posted to Flickr as W illiam G ibson, CC BY-SA 2.0, https://com m ons.wikim edia.org/w/index.php?curid=4438075
William Gibson
Tooling für digitale
Produkte
Worauf kommt es bei der digitalen Werkbank an?
7
Photoshop Screens must die!
Was er bekam: Was er brauchte:
Screens sind kein adäquates Medium
für den Hand-Off an die Entwicklung.
Fundamentaler Paradigmenwechsel
9
Vom statischen Layout zum dynamischen Design System
(Gutes) responsives Design erzwingt
dynamische Komponenten mit
kontextabhängiger Darstellung und
Funktionalität.
Pattern Libraries und Design
Systeme managen Komplexität und
Konsistenz großer Designprojekte.
10
Steve ist Schuld ...
Die mobile Revolution:
Erwartungen an die
User Experience
Raum für
Usability-Schwächen
Buchstäblich kein Raum für Schwächen*
11
Mit der Übersicht schwindet die Toleranz für Designprobleme
*= Geringe Übersicht ist nur ein prägnantes Beispiel für die Herausforderungen mobilen Designs
Bewegung ist Bedeutung
12
Bewegungen fokussieren unsere
Wahrnehmung und lösen
unbewusste
Interpretationsvorgänge aus.
Modernes UI Design nutzt dies um
die Wahrnehmung zu lenken und das
Verständnis für Funktionen und
Vorgänge zu unterstützen.
Animationen erleichternWahrnehmung undVerständnis
Heider F.&Simmel M. (1944). An Experimental Study of Apparent Behavior, The American Journal of Psychology,
57 https://www.youtube.com/watch?v=n9TWwG4SFWQ
Drei Beispiele für UI Animationen
13https://medium.com/@adaptivepath/jedi-principles-of-ui-animation-2b88423b1dac
Neue Herausforderungen
14
Voice UI VR/AR Machine Learning
Design Operations (DesignOps/DesOps)
15
Unternehmen mit kontinuierlichen
Designprozessen:
§Effiziente Kollaboration
§Automatisierung
§Neue Rolle:
Design Technologist/ UX Engineer
„DevOps für Designprozesse“
https://airbnb.design/designops-airbnb/
Beispiele für moderne Design Tools
16
Management von Design Systemen
Konzeption/Interaction Design/Prototyping Handoff
Versionierung
Prozesse & Rollen
Wer macht wie Design? Wer ist verantwortlich?
17
The Age of Agile
(aka Scrum)
§ Selbstorganisierte Teams
§ (Technische) Lösungsverantwortung
§ Kommunikation statt Dokumentation
§ Kurze Feedbackzyklen („working
software“)
§ Scope passt sich flexibel an neue
Anforderungen und Erkenntnisse an
Photo by Olga Guryanova on Unsplash
19
Photo by Quino Al on Unsplash
20
§ Nur zu Besuch (kein festes Teammitglied)
§ Team verantwortet nicht das Design
Designer
Photo by Quino Al on Unsplash
Teamwork User Experience
21
BusinessDesign Technik
Die Darstellung ist
bewusst klischeehaft J
Teamwork? User Experience?
22
Design Technik
„Der Schönmacher“
§ Verlangt überflüssiges
Zeug
§ Schert sich nicht um
die Umsetzbarkeit
„Der Umsetzer“
§ Macht das Design
kaputt
§ Schert sich nur um
Technikkram
Persönlichen Kontakt pflegen
Gemeinsame Basis herstellen
Verantwortung teilen
Neue Haltung notwendig?
23
What Is This Devops Thing, Anyway? Stephen Nelson-Smith, 2010
Quelle: http://www.jedi.be/blog/2010/02/12/what-is-this-devops-thing-anyway/
“In my view [this] requires a certain
state of mind. It’s an attitude which
says: I’m going to make a
difference, I’m going to cooperate
and communicate, and I’m going to
understand that in the business of
delivering great software, we’re all
in it together.”
24DESIGN TEAMDas
NEUE
führt methodisch
durch den
Designprozess
Kollaboratives Design
25
Methoden aus dem Design Thinking
Team Design Session (“Design Studio“) Informelles Arbeiten am Whiteboard
initial kontinuierlich
Ausarbeitung Design Research/Evaluierung
26
Working Software
is the primary measure of progress.
Principles behind the Agile Manifesto, agilemanifesto.org
27
Working Design
is part of the primary measure of progress.
Principles behind the Agile Manifesto, the Designer‘s version
Jederzeit auslieferbare Software
28
§Transparenter Entwicklungsfortschritt
§Gesicherte Qualität (ausführbar, getestet, deployed)
Agiles Grundprinzip – „Continuous Everything“
Und in bezug auf das Design?
§Usable (in bezug auf bestimmte Nutzer und Nutzungsziele)
§Satisfying/Desirable (positiv zur Nutzung/Attraktivität)
Wie sollte Design validiert werden?
29
§User Research (Vorarbeit)
§Usability Testing (früh mit Prototypen und finale QS)
§Live schalten – Feedback holen J (Feature Flag, A/B-Test etc.)
Product
Owner? Sprint
Review?
Stakeholder?
Designer?
(Produkt-)Management
und Strategie
Was sind wesentliche Elemente moderner Vorgehensmodelle?
30
31
Invest Value
ProduktteamManagement Kunde Produktteam/Analyst
Projektauftrag,
Agentur Briefing,
Feature Request
etc.
• Konzeption
• Implementierung
• Qualitätssicherung
Verhaltensänderung
• Mehr Transaktionen
• Höhere Loyalität
• Etc.
Business Impact
• Mehr Erlös
• Weniger Kosten
„Mehrwert“Unsicher
Ein zu starker Fokus auf hohem Output
führt zur Feature Factory (John Cutler).
Features ohne den erhofften Outcome
haben keinen Wert, schlimmstenfalls sind
sie schädlich.Lernen
Wie verbessern wir die Chance auf Value?
32
Management Produkt-Team
• Design technische Lösung
• Design Benutzerschnittstelle
• Definition der
Problemstellung/Chance
• Vorgabe des zu
implementierenden
Features/Produktes
(z. B. Merkzettel)
• Freiheit zur Gestaltung der Lösung
(in gewissen Grenzen)
Führung Experten
En Auftrag von der GF in zwei Versionen
33
Alle unsere Wettbewerber haben in
den letzten 12 Monaten für ihre
Lernplattform Smartphone-Apps
herausgebracht, die sie aggressiv
bewerben. Um wettbewerbsfähig zu
bleiben, werden wir innerhalb der
nächsten 6 Monate eigene iPhone
und Android Apps entwickeln und im
Markt etablieren. Außerdem werden
wir alle unsere Vertriebsauftritte
mobil optimieren und eine Facebook-
Kampagne starten, um unsere
Vertriebsziele dieses Jahr zu
schaffen.
Studenten als wichtigste Kunden für
unsere digitalen Lernangebote
fokussieren ihren Konsum von
Medienangeboten zunehmend auf
mobile Plattformen. Unsere Produkte
finden auf diesen Plattformen bisher
nicht statt. Wie können wir
sicherstellen, dass unser Angebot
auch weiterhin relevant und attraktiv
für Studenten ist? Welche
Änderungen/Ergänzungen in der
Vertriebsstrategie sind notwendig,
um junge Konsumenten für unsere
zukünftigen Angebote einzunehmen?
§ Validated Learning*
34
(gemeinsame) Strategie
Management
Strategischer Kontext
Problemstellung/Chance
Produkt-Team
§ Research/Analyse
§ Hypothese(n)
§ Messbare Erfolgskriterien
§ Ideen & Prototypen
§ Umsetzung & Test
*= Durchführung von „Experimenten“ zur Verifizierung
von Hypothesen über das Produkt. Siehe „Lean Startup“ von Eric Ries.
Zitat Benny, Designer
35
„Ein Problem Statement hilft bei
der Motivation des Teams:
Keine Code-Knechte und
Hübschmacher!“
Balance zwischen Discovery und Delivery
36
Kreativ & Experimentell Konstruktiv & Belastbar
Design Thinking Scrum (Agile)
Gelegenheiten
generieren
Gelegenheiten
realisieren
Product DiscoveryWorkshops
37
Sanfter Einstieg in Research & kreative Problemlösung
Erkenntnisse & Hypothesen
vorstellen und sammeln
Gemeinsam Ideen generieren
Validierung planen
Produkt-Team
Weitere Experten
4h
Die richtigen Zutaten sind vorhanden
38
Ergebnis-orientiert,hypothesen-basiert,kollaborativ
§ Radikale Ergebnisorientierung J
§ Kollaboration statt Dokumentation
(z. B. kein aufwendiger Design-
Handoff)
§ Kurze Zyklen:
Design, Implementierung,
Validierung
§ Kontinuierliches, validiertes Lernen
(das Produkt als Experiment)
Lean Startup & Agiles Vorgehen
§ Design im interdisziplinären Team
§ Problemraum: Research & Analyse
§ Lösungsraum: Ideation &
Prototyping
§ Frühzeitige Evaluierung UX &
Usability
Design Thinking & UCD*
*= User Centered Design
Interesse geweckt?
39
Literaturempfehlungen
Material zu Product Discoveries
40
Artikel zum Thema Product Discovery
Ursprüngliches Konzept: Marty Cagan,
2007
https://svpg.com/product-discovery/
Deutsche Artikel:
§http://www.produktbezogen.de/product-
discovery-aber-bitte-richtig/
§http://www.produktbezogen.de/product-
discovery-im-scrum-alltag/
Literaturempfehlungen
Strategie und Alignment
41
§Effektive Unternehmensstrategie
§Sinnvoller Spielraum in der Umsetzung
Literaturempfehlungen
42
Photo by Quino Al on Unsplash
43
Photo by Quino Al on Unsplash
Zum Mitnehmen:
§ Kollaboratives Design
Das Team verantwortet das Design.
§ Continuous UX
Working Software heißt auch Working
Design.
§ Outcome over Output
Ultimatives Ziel ist nicht Lieferung
sondern Wirkung.
§ Kreativität und Expertise
Das Team verantwortet die Lösung,
das Management gibt Leitplanken.
44
Photo by Quino Al on Unsplash
Holt den Designer ins Spiel! :-)
Noch Fragen?
45
@minutefforts / @Anstrengungslos
hans-joachim.belz@anstrengungslos.de
www.anstrengungslos.de
Beratung,Training, Coaching und Transformation
Innovativ, digital und kundenzentriert.
Wir helfen Ihnen, Ihr Potential auszuschöpfen.

Agil und kreativ - Moderne Designprozesse

  • 1.
    Agil und Kreativ Dortmund(Conciso), 14.06.2018 Wie funktionieren moderne UX Designprozesse? Shared under Creative Commons (CC-BY-ND). Photo by Q uino Al on Unsplash
  • 2.
    Nutzerzentrierung und Innovation §Hintergrundin Technik, Projektmanagement und Usability §User Research §Benutzungstests und Expertenevaluation §UX Design §Systemischer Organisationsberater Menschzentriertes Gestalten von Produkten & Organisationen
  • 3.
    DESIGN? 3 Experience Design TechnicalDesign„Design“ „Technik“
  • 4.
    4 Was sind EureGeschichten von der Design-Front? Stijn Swinnen : https://unsplash.com/photos/qwe8TLRnG8k Zum Aufwärmen (3-5 Min.): § Zweier-Teams: Jeder sucht sich einen Gesprächspartner. § Die Teams einigen sich auf Rollen A + B: § A erzählt seine eindrücklichste „War Story“ zum Thema Design § B fragt nach und merkt/notiert sich, was er gehört hat in einem Satz.
  • 5.
    Drei Ebenen derBetrachtung Tooling für digitale Produkte Prozesse und Rollen (Produkt-)management & Strategie
  • 6.
    6 „ The futureis already here — it's just not very evenly distributed.“ Portraitfoto: G onzo Bonzo - originally posted to Flickr as W illiam G ibson, CC BY-SA 2.0, https://com m ons.wikim edia.org/w/index.php?curid=4438075 William Gibson
  • 7.
    Tooling für digitale Produkte Woraufkommt es bei der digitalen Werkbank an? 7
  • 8.
    Photoshop Screens mustdie! Was er bekam: Was er brauchte: Screens sind kein adäquates Medium für den Hand-Off an die Entwicklung.
  • 9.
    Fundamentaler Paradigmenwechsel 9 Vom statischenLayout zum dynamischen Design System (Gutes) responsives Design erzwingt dynamische Komponenten mit kontextabhängiger Darstellung und Funktionalität. Pattern Libraries und Design Systeme managen Komplexität und Konsistenz großer Designprojekte.
  • 10.
    10 Steve ist Schuld... Die mobile Revolution: Erwartungen an die User Experience Raum für Usability-Schwächen
  • 11.
    Buchstäblich kein Raumfür Schwächen* 11 Mit der Übersicht schwindet die Toleranz für Designprobleme *= Geringe Übersicht ist nur ein prägnantes Beispiel für die Herausforderungen mobilen Designs
  • 12.
    Bewegung ist Bedeutung 12 Bewegungenfokussieren unsere Wahrnehmung und lösen unbewusste Interpretationsvorgänge aus. Modernes UI Design nutzt dies um die Wahrnehmung zu lenken und das Verständnis für Funktionen und Vorgänge zu unterstützen. Animationen erleichternWahrnehmung undVerständnis Heider F.&Simmel M. (1944). An Experimental Study of Apparent Behavior, The American Journal of Psychology, 57 https://www.youtube.com/watch?v=n9TWwG4SFWQ
  • 13.
    Drei Beispiele fürUI Animationen 13https://medium.com/@adaptivepath/jedi-principles-of-ui-animation-2b88423b1dac
  • 14.
    Neue Herausforderungen 14 Voice UIVR/AR Machine Learning
  • 15.
    Design Operations (DesignOps/DesOps) 15 Unternehmenmit kontinuierlichen Designprozessen: §Effiziente Kollaboration §Automatisierung §Neue Rolle: Design Technologist/ UX Engineer „DevOps für Designprozesse“ https://airbnb.design/designops-airbnb/
  • 16.
    Beispiele für moderneDesign Tools 16 Management von Design Systemen Konzeption/Interaction Design/Prototyping Handoff Versionierung
  • 17.
    Prozesse & Rollen Wermacht wie Design? Wer ist verantwortlich? 17
  • 18.
    The Age ofAgile (aka Scrum) § Selbstorganisierte Teams § (Technische) Lösungsverantwortung § Kommunikation statt Dokumentation § Kurze Feedbackzyklen („working software“) § Scope passt sich flexibel an neue Anforderungen und Erkenntnisse an Photo by Olga Guryanova on Unsplash
  • 19.
    19 Photo by QuinoAl on Unsplash
  • 20.
    20 § Nur zuBesuch (kein festes Teammitglied) § Team verantwortet nicht das Design Designer Photo by Quino Al on Unsplash
  • 21.
    Teamwork User Experience 21 BusinessDesignTechnik Die Darstellung ist bewusst klischeehaft J
  • 22.
    Teamwork? User Experience? 22 DesignTechnik „Der Schönmacher“ § Verlangt überflüssiges Zeug § Schert sich nicht um die Umsetzbarkeit „Der Umsetzer“ § Macht das Design kaputt § Schert sich nur um Technikkram Persönlichen Kontakt pflegen Gemeinsame Basis herstellen Verantwortung teilen
  • 23.
    Neue Haltung notwendig? 23 WhatIs This Devops Thing, Anyway? Stephen Nelson-Smith, 2010 Quelle: http://www.jedi.be/blog/2010/02/12/what-is-this-devops-thing-anyway/ “In my view [this] requires a certain state of mind. It’s an attitude which says: I’m going to make a difference, I’m going to cooperate and communicate, and I’m going to understand that in the business of delivering great software, we’re all in it together.”
  • 24.
  • 25.
    Kollaboratives Design 25 Methoden ausdem Design Thinking Team Design Session (“Design Studio“) Informelles Arbeiten am Whiteboard initial kontinuierlich Ausarbeitung Design Research/Evaluierung
  • 26.
    26 Working Software is theprimary measure of progress. Principles behind the Agile Manifesto, agilemanifesto.org
  • 27.
    27 Working Design is partof the primary measure of progress. Principles behind the Agile Manifesto, the Designer‘s version
  • 28.
    Jederzeit auslieferbare Software 28 §TransparenterEntwicklungsfortschritt §Gesicherte Qualität (ausführbar, getestet, deployed) Agiles Grundprinzip – „Continuous Everything“ Und in bezug auf das Design? §Usable (in bezug auf bestimmte Nutzer und Nutzungsziele) §Satisfying/Desirable (positiv zur Nutzung/Attraktivität)
  • 29.
    Wie sollte Designvalidiert werden? 29 §User Research (Vorarbeit) §Usability Testing (früh mit Prototypen und finale QS) §Live schalten – Feedback holen J (Feature Flag, A/B-Test etc.) Product Owner? Sprint Review? Stakeholder? Designer?
  • 30.
    (Produkt-)Management und Strategie Was sindwesentliche Elemente moderner Vorgehensmodelle? 30
  • 31.
    31 Invest Value ProduktteamManagement KundeProduktteam/Analyst Projektauftrag, Agentur Briefing, Feature Request etc. • Konzeption • Implementierung • Qualitätssicherung Verhaltensänderung • Mehr Transaktionen • Höhere Loyalität • Etc. Business Impact • Mehr Erlös • Weniger Kosten „Mehrwert“Unsicher Ein zu starker Fokus auf hohem Output führt zur Feature Factory (John Cutler). Features ohne den erhofften Outcome haben keinen Wert, schlimmstenfalls sind sie schädlich.Lernen
  • 32.
    Wie verbessern wirdie Chance auf Value? 32 Management Produkt-Team • Design technische Lösung • Design Benutzerschnittstelle • Definition der Problemstellung/Chance • Vorgabe des zu implementierenden Features/Produktes (z. B. Merkzettel) • Freiheit zur Gestaltung der Lösung (in gewissen Grenzen) Führung Experten
  • 33.
    En Auftrag vonder GF in zwei Versionen 33 Alle unsere Wettbewerber haben in den letzten 12 Monaten für ihre Lernplattform Smartphone-Apps herausgebracht, die sie aggressiv bewerben. Um wettbewerbsfähig zu bleiben, werden wir innerhalb der nächsten 6 Monate eigene iPhone und Android Apps entwickeln und im Markt etablieren. Außerdem werden wir alle unsere Vertriebsauftritte mobil optimieren und eine Facebook- Kampagne starten, um unsere Vertriebsziele dieses Jahr zu schaffen. Studenten als wichtigste Kunden für unsere digitalen Lernangebote fokussieren ihren Konsum von Medienangeboten zunehmend auf mobile Plattformen. Unsere Produkte finden auf diesen Plattformen bisher nicht statt. Wie können wir sicherstellen, dass unser Angebot auch weiterhin relevant und attraktiv für Studenten ist? Welche Änderungen/Ergänzungen in der Vertriebsstrategie sind notwendig, um junge Konsumenten für unsere zukünftigen Angebote einzunehmen?
  • 34.
    § Validated Learning* 34 (gemeinsame)Strategie Management Strategischer Kontext Problemstellung/Chance Produkt-Team § Research/Analyse § Hypothese(n) § Messbare Erfolgskriterien § Ideen & Prototypen § Umsetzung & Test *= Durchführung von „Experimenten“ zur Verifizierung von Hypothesen über das Produkt. Siehe „Lean Startup“ von Eric Ries.
  • 35.
    Zitat Benny, Designer 35 „EinProblem Statement hilft bei der Motivation des Teams: Keine Code-Knechte und Hübschmacher!“
  • 36.
    Balance zwischen Discoveryund Delivery 36 Kreativ & Experimentell Konstruktiv & Belastbar Design Thinking Scrum (Agile) Gelegenheiten generieren Gelegenheiten realisieren
  • 37.
    Product DiscoveryWorkshops 37 Sanfter Einstiegin Research & kreative Problemlösung Erkenntnisse & Hypothesen vorstellen und sammeln Gemeinsam Ideen generieren Validierung planen Produkt-Team Weitere Experten 4h
  • 38.
    Die richtigen Zutatensind vorhanden 38 Ergebnis-orientiert,hypothesen-basiert,kollaborativ § Radikale Ergebnisorientierung J § Kollaboration statt Dokumentation (z. B. kein aufwendiger Design- Handoff) § Kurze Zyklen: Design, Implementierung, Validierung § Kontinuierliches, validiertes Lernen (das Produkt als Experiment) Lean Startup & Agiles Vorgehen § Design im interdisziplinären Team § Problemraum: Research & Analyse § Lösungsraum: Ideation & Prototyping § Frühzeitige Evaluierung UX & Usability Design Thinking & UCD* *= User Centered Design
  • 39.
  • 40.
    Material zu ProductDiscoveries 40 Artikel zum Thema Product Discovery Ursprüngliches Konzept: Marty Cagan, 2007 https://svpg.com/product-discovery/ Deutsche Artikel: §http://www.produktbezogen.de/product- discovery-aber-bitte-richtig/ §http://www.produktbezogen.de/product- discovery-im-scrum-alltag/ Literaturempfehlungen
  • 41.
    Strategie und Alignment 41 §EffektiveUnternehmensstrategie §Sinnvoller Spielraum in der Umsetzung Literaturempfehlungen
  • 42.
    42 Photo by QuinoAl on Unsplash
  • 43.
    43 Photo by QuinoAl on Unsplash Zum Mitnehmen: § Kollaboratives Design Das Team verantwortet das Design. § Continuous UX Working Software heißt auch Working Design. § Outcome over Output Ultimatives Ziel ist nicht Lieferung sondern Wirkung. § Kreativität und Expertise Das Team verantwortet die Lösung, das Management gibt Leitplanken.
  • 44.
    44 Photo by QuinoAl on Unsplash Holt den Designer ins Spiel! :-)
  • 45.
    Noch Fragen? 45 @minutefforts /@Anstrengungslos hans-joachim.belz@anstrengungslos.de www.anstrengungslos.de
  • 46.
    Beratung,Training, Coaching undTransformation Innovativ, digital und kundenzentriert. Wir helfen Ihnen, Ihr Potential auszuschöpfen.