When Designers code - UX Paper Cuts at GitLab

A presentation at DrupalCon Barcelona 2024 in September 2024 in Barcelona, Spain by Sascha Eggenberger

Slide 1

Slide 1

DrupalCon Barcelona 2024 @saschaeggi When designers code UX Paper Cuts at GitLab Sascha Eggenberger Staff Product Designer at GitLab

Slide 2

Slide 2

DrupalCon Barcelona 2024 @saschaeggi Sascha Eggenberger Staff Product Designer at GitLab Best known as the creator of the Gin Admin Theme in the Drupal world.

Slide 3

Slide 3

DrupalCon Barcelona 2024 But before we start we need to first answer a specific question! @saschaeggi

Slide 4

Slide 4

DrupalCon Barcelona 2024 Should designers actually code? @saschaeggi

Slide 5

Slide 5

DrupalCon Barcelona 2024 Hell yeah! @saschaeggi

Slide 6

Slide 6

DrupalCon Barcelona 2024 Hell yeah! It depends. @saschaeggi

Slide 7

Slide 7

DrupalCon Barcelona 2024 We can’t expect designers to learn how to code @saschaeggi

Slide 8

Slide 8

DrupalCon Barcelona 2024 https://bradfrost.com/blog/post/should-designers-code/ @saschaeggi

Slide 9

Slide 9

DrupalCon Barcelona 2024 @saschaeggi That doesn’t mean designers should code

Slide 10

Slide 10

DrupalCon Barcelona 2024 But we can expect them to understand the basics @saschaeggi

Slide 11

Slide 11

DrupalCon Barcelona 2024 Do all designers at GitLab code? @saschaeggi

Slide 12

Slide 12

DrupalCon Barcelona 2024 @saschaeggi No! But we encourage designers to do so

Slide 13

Slide 13

DrupalCon Barcelona 2024 GitLab UX Paper Cuts team What is a Paper Cut? Lessions learned How to adapt Q&A / AMA @saschaeggi

Slide 14

Slide 14

DrupalCon Barcelona 2024 GitLab 🡐 UX Paper Cuts team What is a Paper Cut? Lessions learned How to adapt Q&A / AMA @saschaeggi

Slide 15

Slide 15

DrupalCon Barcelona 2024 We’re an all-remote company @saschaeggi

Slide 16

Slide 16

DrupalCon Barcelona 2024 We have 1500 team members across 60 countries @saschaeggi

Slide 17

Slide 17

DrupalCon Barcelona 2024 Ability to work from anywhere @saschaeggi

Slide 18

Slide 18

DrupalCon Barcelona 2024 We do asynchronous communication @saschaeggi

Slide 19

Slide 19

DrupalCon Barcelona 2024 @saschaeggi Collaborative, employee written handbook handbook.gitlab.com

Slide 20

Slide 20

DrupalCon Barcelona 2024 GitLab is an open-core product @saschaeggi

Slide 21

Slide 21

DrupalCon Barcelona 2024 We do monthly releases @saschaeggi

Slide 22

Slide 22

DrupalCon Barcelona 2024 @saschaeggi Fully transparent what we’re working on

Slide 23

Slide 23

DrupalCon Barcelona 2024 GitLab’s mission is Everyone can contribute https://handbook.gitlab.com/handbook/company/mission/#mission @saschaeggi

Slide 24

Slide 24

DrupalCon Barcelona 2024 @saschaeggi GitLab UX Paper Cuts team 🡐 What is a Paper Cut? Lessions learned How to adapt this Q&A / AMA

Slide 25

Slide 25

DrupalCon Barcelona 2024 @saschaeggi

Slide 26

Slide 26

DrupalCon Barcelona 2024 UX Paper Cuts is an extension of the Design Systems team @saschaeggi

Slide 27

Slide 27

DrupalCon Barcelona 2024 @saschaeggi We look at high-traffic areas of the product and try to improve it

Slide 28

Slide 28

DrupalCon Barcelona 2024 @saschaeggi We usually start with a Merge Request https://handbook.gitlab.com/handbook/communication/#start-with-a-merge-request

Slide 29

Slide 29

DrupalCon Barcelona 2024 We work mostly in code @saschaeggi

Slide 30

Slide 30

DrupalCon Barcelona 2024 @saschaeggi Our work can be shortterm and destined to be overwritten

Slide 31

Slide 31

DrupalCon Barcelona 2024 We collaborate with a lot of other teams @saschaeggi

Slide 32

Slide 32

DrupalCon Barcelona 2024 We temporarily own features when we don’t have a designer available @saschaeggi

Slide 33

Slide 33

DrupalCon Barcelona 2024 Each milestone has a theme @saschaeggi

Slide 34

Slide 34

DrupalCon Barcelona 2024 We also have long term initiatives @saschaeggi

Slide 35

Slide 35

DrupalCon Barcelona 2024 @saschaeggi We have a meta issue where people can post issues and ideas

Slide 36

Slide 36

DrupalCon Barcelona 2024 @saschaeggi We plan 3 milestones in advance

Slide 37

Slide 37

DrupalCon Barcelona 2024 Open issues, Research and customer feedback @saschaeggi

Slide 38

Slide 38

DrupalCon Barcelona 2024 @saschaeggi We also monitor Slack channels like the #is-this-known channel

Slide 39

Slide 39

DrupalCon Barcelona 2024 @saschaeggi GitLab UX Paper Cuts team What is a Paper Cut? 🡐 Lessions learned How to adapt this Q&A / AMA

Slide 40

Slide 40

vimeo.com/189919038

Slide 41

Slide 41

DrupalCon Barcelona 2024 We all know how painful a tiny cut on your fingertip can be @saschaeggi

Slide 42

Slide 42

DrupalCon Barcelona 2024 Painful enough to always remind you but not worth a doctor’s visit @saschaeggi

Slide 43

Slide 43

DrupalCon Barcelona 2024 @saschaeggi A «UX Paper Cut» is a minor problem that can frustrate users

Slide 44

Slide 44

DrupalCon Barcelona 2024 These problems can reduce the overall satisfaction of the product @saschaeggi

Slide 45

Slide 45

DrupalCon Barcelona 2024 @saschaeggi The goal is to improve user satisfaction

Slide 46

Slide 46

DrupalCon Barcelona 2024 Cosmetic issues & frustrating patterns @saschaeggi

Slide 47

Slide 47

DrupalCon Barcelona 2024 Improvements to boost convenience & ease of use @saschaeggi

Slide 48

Slide 48

DrupalCon Barcelona 2024 Readability & Accessibility issues @saschaeggi

Slide 49

Slide 49

DrupalCon Barcelona 2024 Broken features @saschaeggi

Slide 50

Slide 50

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/155319 @saschaeggi

Slide 51

Slide 51

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/156025 @saschaeggi

Slide 52

Slide 52

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/164339 @saschaeggi

Slide 53

Slide 53

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/163197 @saschaeggi

Slide 54

Slide 54

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/163612 @saschaeggi

Slide 55

Slide 55

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/163612 @saschaeggi

Slide 56

Slide 56

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/132462 @saschaeggi

Slide 57

Slide 57

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/133501 @saschaeggi

Slide 58

Slide 58

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/163739 @saschaeggi

Slide 59

Slide 59

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/153949 @saschaeggi

Slide 60

Slide 60

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/114083 @saschaeggi

Slide 61

Slide 61

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/88908 @saschaeggi

Slide 62

Slide 62

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/121245 @saschaeggi

Slide 63

Slide 63

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/166295 @saschaeggi

Slide 64

Slide 64

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/163591 @saschaeggi

Slide 65

Slide 65

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/163591 @saschaeggi

Slide 66

Slide 66

DrupalCon Barcelona 2024 Bigger initiatives @saschaeggi

Slide 67

Slide 67

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/160374 @saschaeggi

Slide 68

Slide 68

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/162045 @saschaeggi

Slide 69

Slide 69

DrupalCon Barcelona 2024 @saschaeggi

Slide 70

Slide 70

DrupalCon Barcelona 2024 @saschaeggi

Slide 71

Slide 71

DrupalCon Barcelona 2024 @saschaeggi

Slide 72

Slide 72

DrupalCon Barcelona 2024 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/154922 @saschaeggi

Slide 73

Slide 73

DrupalCon Barcelona 2024 Since the start in 2023 we merged more than 1400 MRs @saschaeggi

Slide 74

Slide 74

DrupalCon Barcelona 2024 @saschaeggi Want to see more? papercuts.gitlab.com

Slide 75

Slide 75

DrupalCon Barcelona 2024 GitLab UX Paper Cuts team What is a Paper Cut? Lessions learned 🡐 How to adapt Q&A / AMA @saschaeggi

Slide 76

Slide 76

DrupalCon Barcelona 2024 @saschaeggi It was wild west in the early days

Slide 77

Slide 77

DrupalCon Barcelona 2024 Setting a theme per milestone gives guideance @saschaeggi

Slide 78

Slide 78

DrupalCon Barcelona 2024 Over)Communication is key @saschaeggi

Slide 79

Slide 79

DrupalCon Barcelona 2024 Raise awareness of changes @saschaeggi

Slide 80

Slide 80

DrupalCon Barcelona 2024 Plan in advance @saschaeggi

Slide 81

Slide 81

DrupalCon Barcelona 2024 GitLab UX Paper Cuts team What is a Paper Cut? Lessions learned How to adapt 🡐 Q&A / AMA @saschaeggi

Slide 82

Slide 82

DrupalCon Barcelona 2024 Plan a one week «Bug Smash» sprint @saschaeggi

Slide 83

Slide 83

DrupalCon Barcelona 2024 Pair up designers with engineers @saschaeggi

Slide 84

Slide 84

DrupalCon Barcelona 2024 @saschaeggi Day 1 Use your product and find bugs

Slide 85

Slide 85

DrupalCon Barcelona 2024 Day 2 5 Create MRs to fix them @saschaeggi

Slide 86

Slide 86

DrupalCon Barcelona 2024 Repeat that every quarter @saschaeggi

Slide 87

Slide 87

DrupalCon Barcelona 2024 @saschaeggi Thank you Sascha Eggenberger Staff Product Designer at GitLab