►
Description
Product Designer for Source Code, Pedro Moreira da Silva, shares how the team iterated on the new multi-line comments feature for Merge Requests.
Slides: https://docs.google.com/presentation/d/10ILYhjAlwYlBIWLa0kHtgLFD694ClbQvOlms2ek4WTc/edit?usp=sharing
References:
• Multi-line comments epic: https://gitlab.com/groups/gitlab-org/-/epics/1431
• Competitor analysis and prototype usability testing: https://gitlab.com/gitlab-org/ux-research/-/issues/870
• Prototype (Figma): https://www.figma.com/proto/t3XACGdol0Gi44Mg0ENIao/Multi-line-comments-ux-research-870?node-id=31%3A1174&viewport=4%2C152%2C0.5&scaling=min-zoom
• 1st iteration: Basic dropdown UI: https://gitlab.com/gitlab-org/gitlab/-/issues/211255
• 2nd iteration: Highlight comment line range: https://gitlab.com/gitlab-org/gitlab/-/issues/14128
• 3rd iteration: Support drag-and-release gesture: https://gitlab.com/gitlab-org/gitlab/-/issues/218319
A
My
name
is
Peter
Marie
da
Silva
and
I'm
the
senior
product
designer
for
the
source-code
group
in
the
create
stage,
and
today
I'm
going
to
talk
to
you
about
the
multi-line
comments
in
word,
request,
feature
and
I'll:
try
to
frame
it
as
a
story
about
iteration,
most
of
all,
not
so
much
about
the
feature
itself.
So
brief
introduction
the
source
code
noob,
has
three
sorry,
two
categories,
the
source
code
management
and
the
code
review.
A
Today
we're
going
to
be
focusing
on
the
code
review
because
that's
where
the
discussion
and
reviewing
capabilities
exist,
of
course,
that
that
would
mostly
be
in
merge
requests.
That's
what
most
people
know.
So,
let's
start
with
the
user
goal.
So
the
best
way
that
I
could
describe
this,
as
if
Sasha
the
software
developer
would
say
it
is
when
giving
feedback
on
someone's
changes.
A
I'd
love
different
levels
of
granularity,
so,
on
the
bottom
left
corner
of
this
slide,
you
can
see
we
have
a
list
of
solutions
today
we
already
have
general
comments
that
can
apply
to
I,
don't
know
a
whole
issue
or
epic
or
merge
requests
and
people
will
then
say
what
they're
referring
to
what
they're
asking
what
they
would
like
to
see
addressed
in
merge
requests.
We
also
have
single
line
comments
where
you
can
pinpoint
exactly
which
line
you're
referring
to
and
what
needs
to
be
addressed
on
that
line.
A
But
today
it's
difficult
to
address
changes
that
span
multiple
lines
and
that's
what
we're
trying
to
address
here
with
multi-line
comments
and
maybe
in
the
future,
they're
already
requests
for
these.
We
can
then
comment
on
the
commit
messages
themselves.
Hold
files,
or
even
specific
words,
to
give
you
an
example
on
the
right
side
of
the
slide.
A
So
on
and
so
on,
and
then
at
the
end
she
says,
can
you
elaborate
a
bit
on
more
on
the
table
and
the
whole
context
of
the
table
is
missed
because
you
have
to
scroll
down
to
find
the
rest
of
the
table,
and
this
actually
is
a
comment
that
refers
to
the
whole
table,
not
just
the
table
of
headers.
So
you
can
now
see
just
with
these
two
small
examples
why
this
would
be
a
good
feature
to
work
on
from
the
business
side.
I
think
this
is
a
good
introduction
to
that
business
school.
A
This
is
the
oldest
issue.
I
could
find
regarding
multi-line
comments.
It
was
open
four
years
ago
it
has
a
hundred
and
seventy-five
up
votes
and
I'll.
Just
read
a
couple
of
the
comments
that
I
found
there
I
think
the
first
one
by
Brett,
Higgins
kind
of
summarizes,
both
the
user
going,
the
business
goal
and
you'll
understand
in
a
minute,
so
Brett
says
I'll,
throw
in
my
book
here
as
well.
This
is
a
very
nice
to
have
that
my
company
relies
heavily
on
in
review
boards.
A
A
We
also
have
then
another
comment
saying
this
is
a
huge
miss
for
my
team,
as
we
try
to
completely
transition
from
perforce
/rb
to
get
lab,
and
the
list
of
comments
goes
on
and
on
about
customers
or
our
sales
team,
saying
that
people
are
considering
moving
to
get
lab.
But
they
would
like
this
feature,
and
this
is
something
that
they
miss
Lots.
So
the
business
schools
are
very
straightforward,
or
at
least
these
are
the
two
I
think
are
the
most
prominent.
A
One
of
them
is
trying
to
increase
the
amount
of
new
business
by
helping
potential
customers
migrate
from
competitor
tools
and
also,
of
course,
increase
our
retention
of
existing
customers
and
users
to
avoid
them
fleeing
to
another
tool.
Just
to
use
this
feature,
I
did
a
brief
competitor
analysis.
Looking
at
what
other
tools
in
this
place,
we're
doing
with
this
feature
and
I
found
that
five
of
our
eight
competitors
in
code
review
support
this
feature
to
comment
on
multiple
lines.
A
At
the
same
time,
the
most
common
interaction
pattern
is
the
dragon
release
to
indicate
lines
which
I'll
show
you
in
a
minute.
Most
of
them
highlight
the
commented
range
on
over,
so
they
give
a
more
visual
indicator
of
exactly
which
lines
are
being
addressed,
and
the
last
observation
is
that
very
few
of
them
have
keyboard
support.
So
I
think
this
is
one
area
where
there's
an
opportunity
for
us
to
differentiate
and
also
I.
Think
this
point
about
the
lack
of
keyboard
support
and
the
lack
of
a
pointer
or
just
relying
heavily
on
pointer
devices.
A
You
will
see
that
in
our
for
consideration,
so
this
is
I
think
the
phrase
that
best
describes
what
we
have
been
doing
in
the
past
few
months,
and
this
was
so
think,
big
ship,
smaller
and
fast.
It
was
originally
introduced
to
me
by
Nick
posts
as
I
think
big
start
small
move
fast,
which
is
also
the
title
of
the
popular
book
on
innovation,
and
you
there's
a
little
link
there
for
the
original
comments,
where
our
Nick
posts
share.
A
That
and
I
think
that
this
rephrase
that
I
did
of
the
original
sentence
is
more
adapted
to
our
way
of
work
and
I'll.
Show
you
how
this
applies
to
get
liven
in
merge
requests
specifically.
So
to
give
you
an
example
of
how
all
of
this
works
and
I
think
this
is
a
good
metaphor
for
what
we're
lacking
at
our
in
our
product
development
process
at
gitlab.
So
this
is
a
painting
by
Georges
Seurat
and
it
took
him
two
years
to
create
this
painting
and
it's
called
a
Sunday
afternoon
on
the
island
of
La
Grande
Jatte.
A
So
he
went
through
multiple
ideas,
sketches
and
mock-ups
before
getting
here.
So
a
lot
of
iteration
and
for
this
painting
he
applied
a
technique
called
pointillism
that
only
uses
very
small
colored
dots
and
no
brush
strokes
at
all
and
to
land
on
this
masterpiece.
He
had
to
focus
both
on
the
details,
as
well
as
on
the
big
picture
right,
and
this
is
I,
think
the
the
part
where
we
fail
a
lot.
A
A
Okay,
so
as
I
was
saying
so
this
is
a
very
common
common
product
management
metaphor
is:
you
have
to
see
both
the
trees
and
the
forest
at
the
same
time,
and
so
I
think
that
the
the
phrase
think
big
ship
small
learn
fast
allows
us
to
do
just
that.
So
let
me
sprint
forward
because
we've
lost
a
bit
of
time
here
so
think
big.
What
is
the
vision
for
multi-line
comments?
A
So
the
first
thing
that
we
did
was
a
usability
test
with
the
prototype,
where
we,
the
three
main
questions
were
which
part
of
the
design
are
easily
understood,
which
raised
in
most
questions
and
is
the
dragon
released
gesture
that
intuitive
or
not?
And
you
can
see
the
dragon
release
gesture
that
I
was
showing
here
in
this
small
gift
and
that
usability
testing
allowed
us
to
have
confidence
on
what
is
working?
What
is
not
working,
how
we
can
order
the
right,
the
implementation
in
the
right
place,
so
the
second
part
ships
small?
A
How
can
we
break
that
down?
That's
big
vision
with
this
amazing
design
with
the
dragon
release
gesture,
and
that
is
when
the
challenges
start
to
come
up.
So
the
first
challenge
was
that,
initially
before
we
started
any
of
this,
we
already
had
the
assumption
that
it
would
be
difficult
to
implement
a
good
user
experience
in
a
single
iteration
and
the
primary
concern
here.
Were
it
complex
and
substantial
changes
to
the
front
end
and
the
front
end
engineering
manager
and
the
day
he
reviewed
the
designs
and
identified
specific
challenges.
A
A
How
can
we
make
the
smallest
chain
to
help
users
clarify
what
they're
referring
to
in
their
multi-line
comments,
and
so
we
actually
iterated
on
top
of
the
first
iteration
before
getting
to
the
first
iteration
itself,
so
this
was
the
first
design
very
basic
you'd
have
buttons
to
add
and
subtract
lines
from
your
commenting
range.
We
then
also
Scott
about.
Oh,
why
don't?
We
have
a
start,
multi-line
comment
button,
or
we
can
also
have
a
number
input
where
people
can
use
the
keyboard
as
well
to
increase
and
decrease.
The
number
of
lines
are
affecting
it.
A
And
of
course
this
is
not
the
amazing
user
experience
interaction
with
the
dragon
release,
but
this
is
a
very
accessible
way
to
implement
this
feature
for
any
kind
of
user,
even
if
they're
not
using
a
pointer
device,
so
interation
set
of
the
development
itself.
One
of
the
things
that
we
did
was
right
from
the
start
set
this
behind
a
feature
flag
so
that
we
could
test
and
ship
things
and
merge
things
without
breaking
the
existing
experience
and
then,
in
the
first
merge
request.
A
We
decided
to
iterate
on
our
development
process
itself,
because
the
first
merge
request
took
one
and
a
half
months
and
one
hundred
and
forty-three
comments
to
get
merged,
and
that's
a
long
time.
It's
a
very
big
merge
request,
and
so
what
we
decided
was
to
change
and
and
just
focus
it
on
the
inline
and
not
the
side-by-side
mode
when
you're
comparing
changes
ii.
Mr,
would
then
tackle
this
side-by-side
mode.
So
again,
you
can
see
how
we're
breaking
this
up
and
learning
from
the
first.
A
Mr,
what
went
wrong
and
what
went
well
and
applying
it
to
the
second,
mr
and
just
you
have
some
context.
Both
DeMars
are
so
big
that
the
front-end
engineer
working
on
this
justin
he
counted
at
least
nine
hundred
different
testing
scenarios.
That
would
some
of
them
would
be,
of
course,
tested
automatically.
Some
would
be
tested
manually
by
myself
in
front-end
engineers,
and
all
of
this
was
just
to
implement
this
simple
basic
drop
down.
Ui
so
learn
fast.
What
did
we
learn?
How
can
we
learn
more
from
this
iteration
process?
A
So
again,
the
first
thing
is
having
the
featured
flag
enabled.
We
will
do
that
for
just
the
gitlab
or
group
for
internal
testing,
and
we
will
do
that
for
that
basic
drop
down
UI
and
with
internal
usage
and
seeing
how
people
pick
it
up
and
what
is
working.
What
is
not
working
that
will
allow
us
to
have
more
confidence
on
what
we
should
build
next.
We
already
have
some
high
confidence
regarding
the
second
iteration,
which
would
be
to
highlight
the
comment
line
range
when
you
hover
one
of
the
comments.
A
For
example,
you
can
see
the
lines
10
and
11
highlighted
here,
because
that's
what
the
comment
is
referring
to.
This
has
high
confidence,
because
a
lot
of
competitors
do
it.
The
usability
testing
proved
that
this
is
a
very
valuable
feature
to
see
visually
what
the
comments
are
referring
to,
and
we
also
have
a
good
feeling
that
this
will
come
up
when
we
once
we
enable
the
feature
flag
for
the
gate,
level
or
group.
The
third
iteration
is
the
dragon
release
gesture.
A
We
have
some
confidence,
but
not
a
lot
of
confidence
that
it
needs
to
be
the
third
thing
for
us
to
ship.
So
right
now,
it's
kind
of
in
the
not
necessarily
in
the
backlog,
but
we're
waiting
to
see
how
real
usage
and
user
feedback
will
get
us
there,
and
by
this
point
we
will
probably
also
instrument
this
feature
to
have
more
data
so
that
we
can
make
better
decisions
in
the
future
I
apologize
for
the
internet
problems
or
Google
slides
problems.
This
is
what
I
had
sure.