Ob ChatGPT und vergleichbare generative KI Tools ein brillanter Co-Pilot für UX-Designer:innen darstellen oder nicht war Gegenstand dieser Präsentation und anschließenden Diskussion auf dem UXcamp Bremen 2023.

1. ChatGPT
A brilliant co-pilot
for UX designers?
#uxcamphb // 13.05.2023

2. Moin!
Claudio Diaspero
neusta experience GmbH
Head of UX / Geschäftsleitung
c.diaspero@neusta.de
2

3. 1.
ChatGPT
Kurzer Einstieg
und
Einordnung
3

4. ChatGPT
…ist ein KI-basierter Textgenerator.
4

5. 1.600.000.000
Besucher im März 2023
5

6. 10.000.000
Requests/Queries pro Tag
6

7. ChatGPT Models im Vergleich
Schneller Response
kostenfreie Nutzung
Informationsstand 09/21
Detailliertere Responses
kostenpflichtige Nutzung
Informationsstand 09/21
7
3.5 4.0

8. Prompt/Response
8

9. 2.
Co-pilot for
UX Designers
Die heutige
Story
9

10. Co-pilot im UX-Design Prozess
Von der User Story
bis zum testbaren Prototyp.
10

11. fiktives Möbelaus
11

12. ‘’
Schreibe eine User Story für eine
Website eines Möbelhauses. Die
Seite zeigt die Kategorie
Wohnzimmer. Die gezeigten Möbel
sind im skandinavischen Stil.
12

13. 13

14. ‘’
Schlage fünf Firmierungen und
Claims für das Möbelhaus vor.
14

15. 15

16. 16

17. ‘’
Erstelle ein Sequenzdiagramm der
User Story mit Hilfe von Mermaid.
17

18. 18

19. Sequenzdiagram
19

20. ‘’
Erzeuge eine Unterkategorieseite
passend zur User Story.
Die nutzerfreundliche Struktur der
Kategorieseite soll Nutzer der
relevanten Zielgruppe ideal
ansprechen.
Hierbei steht die Exploration der
Produkte der Unterkategorie im
Vordergrund.
20

21. 21

22. ‘’
Erstelle die Unterkategorieseite im
HTML Format.
22

23. 23

24. Erster Entwurf
24

25. ‘’
Erzeuge ein zu NordicHome, der
Zielgruppe und den Möbeln
stimmiges Farbschema der
Website.
25

26. 26

27. ‘’
Erzeuge einen passenden
Vorschlag eines Logos für
NordicHome. Berücksichtige das
Farbschema.
Das Logo möchte ich mit
Midjourney erstellen.
Bitte erzeuge den Prompt auf
Englisch.
27

28. 28

29. Midjourney
29

30. 30

31. ‘’
Erzeuge ein Design im CSS
Format.
Dieses basiert auf dem Farbschema
sowie der Struktur der
Kategorieseite.
31

32. 32

33. Content und Assets
Let‘s build a rough prototype in the browser.
33

34. ‘’
Liste mir sechs passende
Produkte mit Produktname, Preis
und Kurzbeschreibung für diese
Seite.
34

35. 35

36. 36

37. Prototyp
37

38. Prototyp
38

39. Prototyp
39

40. html.to.design
Portieren wir das Ganze zu Figma.
40

41. html.to.design
41

42. Figma
42

43. ‘’
Gibt es noch konkrete
Anpassungen, um die
Barrierefreiheit zu verbessern?
43

44. 44

45. 45

46. ‘’
Erstelle ein Skript für einen
Usability Test dieser Seite.
46

47. 47

48. ‘’
Schreibe ein Testskript zur User
Story und den Akzeptanzkriterien
mit Gherkin.
48

49. 49

50. ‘’
Kann ich diese Seite noch weiter
SEO optimieren?
50

51. 51

52. Und wer macht’s?
ChatGPT: Empfehle mir zehn Digitalagenturen.
52

53. 53
😒

54. ‘’
Und was hältst Du von team
neusta?
54

55. 55
😉

56. Pitch
Angenommen, nächsten Montag wäre…
56

57. ‘’
Nenne mir eine ideale Struktur, wie
ich einen Pitch vor Entscheidern
des Möbelhauses durchführen
kann.
Ich bin in der Rolle einer
Digitalagentur (team neusta), die
den Auftrag zur Umsetzung des
Onlineshops gewinnen möchte.
57

58. 58

59. 59

60. 3.
ChatGPT
in der Praxis
Was sind Eure
Erfahrungen,
Eindrücke und
Gedanken?
60

61. Was meinst Du?
Erfahrungen, Eindrücke und Gedanken.
61

62. Danke!
Fragen?
Du erreichst mich unter
c.diaspero@neusta.de
62