Advertisement
43:36
Transcript
0:00
Today, I am thrilled to welcome Stripe's
0:02
head of design, Katie Dill, back to the
0:04
show. Katie and her team recently
0:06
launched a brand new Stripe homepage.
0:09
She's going to take us behind the scenes
0:11
of the new website and talk about how AI
0:13
is changing her team's design process.
0:16
Welcome to another episode of Design
Advertisement
0:18
Review.
0:26
>> Katie, thank you so much for joining us
0:27
again.
0:28
>> Well, thank you for having me. It's nice
0:29
to be back.
0:30
>> I saw along with everybody else when you
0:32
launched the new Stripe homepage and I
0:34
thought it would be amazing to have you
0:35
on and kind of take us through the old
0:37
site and uh things that you wanted to
Advertisement
0:40
change about it and update cuz I know
0:42
it's been a few years since you launched
0:44
that one and then take us through the
0:46
new one and talk a little bit about the
0:47
process that you used in order to get to
0:50
uh where you guys landed with the new
0:51
one.
0:51
>> I do enjoy a good design crit with you.
0:53
So, let's do it.
0:54
>> All right, let's jump into uh the
0:55
original site. So, how long ago did you
0:57
launch this one? This one was from 2020.
1:00
>> Okay. So, we're talking six years ago at
1:02
this point.
1:02
>> Yeah. Kudos to the team. I wasn't there
1:03
at the time, but I do think that they
1:05
built something that stood the test of
1:07
time quite well.
1:08
>> Uh we weren't, you know, oh my gosh, we
1:11
have to change it. It's been too long.
1:12
It's just, you know, it doesn't work
1:14
anymore. It actually was standing up
1:16
quite well. And when we endeavored to
1:18
change it, it was because the business
1:20
had just evolved beyond the point of
1:22
what this story was was being told on
1:25
this site. And I'll explain that in a
1:26
little bit. Of course, we wanted to kind
1:28
of freshen it up as a part of our brand
1:30
that also had been evolving and becoming
1:33
more sophisticated and reaching, you
1:35
know, a broader set of users. Uh, but
1:37
still it was it was a good site. So, I
1:39
can point out a couple of things that we
1:41
uh aimed to change.
1:42
>> Yeah.
1:42
>> Uh, so one, you know, this evolved over
1:46
time. We certainly had changed the words
1:48
on the site and exactly how it was
1:50
portraying what we do. Um, and then also
1:53
some of the the product shots that we
1:55
were including. Um and then of course
1:57
our users as we you know continue to
1:59
evolve and um help more in different
2:02
categories or larger enterprises or uh
2:05
growing startups. But then as you go
2:07
down the page we were articulating the
2:09
number of things that we do and this is
2:11
actually one of the things that had
2:12
evolved the most over the last couple of
2:14
years because our product suite was
2:15
evolving. And so for example we started
2:18
with payments being a main part of our
2:21
business but over time uh payments is
2:23
just one part of it. We now today serve
2:27
you in multi- uh national enterprises in
2:31
many categories including helping them
2:33
with subscriptions, helping AI companies
2:35
with usage based billing, tax revenue
2:38
recognition platforms like Shopify and
2:41
helping them move money for the
2:43
businesses in their um on their
2:45
platform. And so these stories were
2:48
coming through here, but you were kind
2:50
of only getting a glimpse of the product
2:53
offering that Stripe provided. And so
2:55
this was probably the biggest thing that
2:57
we realized that we needed to change. So
2:59
we needed to adjust that. And the other
3:01
piece is that, you know, the page grows
3:04
quite long. There's a lot of trying to
3:06
be told here. uh we were doing that
3:09
thing that happens over time where you
3:10
kind of add on and add on and we're kind
3:13
of losing the the narrative uh with the
3:16
site and so we thought to think about
3:19
ways that we could uh update that
3:21
narrative. Now of course you could
3:23
adjust that what was here but we
3:25
realized that it was also time to
3:26
refresh the visuals. uh it I don't think
3:29
that the you know the visuals came out
3:31
of fashion but it also just didn't feel
3:34
like it took the sophistication of how
3:36
the business itself evolved. Uh and we
3:39
were seeing it honestly in the way that
3:41
our teams were kind of rolling out this
3:43
design language. There wasn't a lot of
3:44
clarity on how do we use this 12 degree
3:47
bar, how do we use colors and overlays?
3:50
Um how do we use our typography? Um the
3:52
gradient wave that's at the top was
3:54
certainly an element but it didn't
3:56
really scale well. So, we had to create
3:59
a new design vision for our language and
4:02
then update the story.
4:03
>> It's interesting because you mentioned
4:05
that visually I look at this and this
4:07
looks like a site that could have been
4:08
launched yesterday. Um, and I think
4:10
that's a testament to how Stripe has
4:12
always been so far ahead of the game
4:14
>> from a design perspective that you could
4:15
have a site that's 6 years old and
4:17
obviously you you made updates to it
4:20
over the years. This wasn't literally
4:21
the site that you launched six years
4:22
ago, right? But um clearly it has stood
4:25
the test of time which is really
4:26
impressive and it makes sense that
4:28
you've got all these different customers
4:29
now. It seems like the approach that you
4:31
took with the old one was just keep
4:33
adding sections that would target
4:35
different types of users and hopefully
4:37
people would scroll until they hit the
4:38
one that's right for them. And it sounds
4:40
like maybe you've rethought that for the
4:41
new site that you launched.
4:43
>> Yeah, I mean like perfect example, you
4:44
know, AI is very big part of our
4:46
business. It's both like how we build
4:48
what we build and who we build for. like
4:51
over 78% of the Forbes AI 50 use Stripe
4:56
and they are using our products to help
4:59
them scale really fast and help them
5:01
monetize in new ways right so usage
5:03
based billing so that you can uh make
5:06
the right moves for your inferences
5:07
costs and how your users are actually
5:10
using your product and it's a tile on
5:12
the website
5:13
>> so the story was missing like what we're
5:15
actually building wasn't coming clear
5:17
and so when we realized okay now it's
5:19
time to update our site I would say
5:20
there's a couple of things on that front
5:22
which is one like first principles what
5:24
are we trying to do here like what is
5:25
the point of a website anyways I
5:27
remember being in a meeting where
5:28
Patrick asked like well what is the
5:30
point of a website I think one part of
5:32
it is it's
5:33
>> it's your manifesto whether you
5:34
explicitly call it that or not
5:37
>> because you're demonstrating who you are
5:39
what you are doing and why you do it and
5:42
in some indirect ways right it's just
5:44
like the nature of the way that you
5:46
build your site how you present yourself
5:47
what colors you choose what typography
5:49
you choose the details that you choose
5:51
to care and the ones you don't and then
5:53
of course how you articulate what you're
5:55
doing and what you offer. So we set out
5:57
to make sure that the story was
5:58
extremely clear for who we're serving
6:00
and how we're serving them and what we
6:03
care about. And so that's where, you
6:05
know, honestly painstaking hours over a
6:08
year or more is what, you know, ended up
6:10
going into this. Partly because in some
6:13
ways we weren't rushing to get something
6:15
out like when we're ser when we're
6:16
building something for our users, it's
6:18
like, okay, it needs to be out like it
6:19
needs to be out tomorrow because they're
6:20
dependent on this. This was like it was
6:22
for ourselves in a lot of ways. And so
6:24
we certainly could take the time to
6:27
sniff out the right design and, you
6:29
know, get on that scent. Um, and you
6:31
know what? There were many weeks and
6:33
months of design exploration where we
6:36
liked it, but we're like, "No, that's
6:37
not it." Yeah, we're not ready to, you
6:39
know, wear that shirt for the next six
6:40
years or whatever it might be.
6:42
>> And so, it's financial infrastructure to
6:44
grow your revenue as the first one,
6:46
>> which is the exact same for a sentence.
6:48
So, that has remained consistent and it
6:49
seems like what you wanted to add here
6:51
was the extra things here that would
6:53
catch other people.
6:54
>> Yeah.
6:55
>> That where Strike would actually be the
6:56
right product for them, too.
6:57
>> Yeah. One of the things that's
6:58
interesting is I like looking at sites
7:00
and trying to figure out what is
7:02
something that only this company could
7:04
do that nobody else could do. And one of
7:06
the things that stands out to me is the
7:07
GDP counter that you have here. It's not
7:10
many companies that could um that could
7:12
have a live counter of the percentage of
7:16
the global GDP, not even just US GDP
7:19
that is running on Stripe. Talk about
7:21
the decision to put that right up at the
7:23
top as well. Well, I would imagine a lot
7:25
of, you know, people watching and people
7:27
building websites are thinking about,
7:28
well, how can we demonstrate the the
7:31
impact that we're having, the the reason
7:33
why you should trust us, the social
7:35
proof, you know, what users trust us
7:37
before. Uh, these are important
7:39
messages. They they help the, you know,
7:41
the the potential customer understand
7:43
like whether or not this is a brand that
7:45
you could trust and okay, good to know
7:46
that you've done it for others. As I
7:48
expressed earlier, like we're, you know,
7:50
trying to help everybody from a micro
7:51
entrepreneur who's going to grow a
7:53
startup to hopefully great success as
7:55
well as these large enterprises. It
7:57
matters a lot to them whether or not
7:59
that Stripe is dependable, reliable,
8:01
trustworthy, and can operate at their
8:03
scale.
8:04
>> So, we ask ourselves, well, how do we
8:05
express that? How do we help you see
8:07
that we can? Of course, one of the ways
8:08
is that we tell you about the users that
8:10
use us, and you can see that scrolling
8:12
across the bottom. But another way is
8:14
like you know the actual enormous impact
8:16
that we have had the the privilege and
8:18
the responsibility of serving in that
8:20
can actually be quantified in the GDP.
8:22
>> Yeah. I love that. And the other key
8:24
word here too is billionth. You know
8:26
like that just signals if you do
8:28
billions of transactions stripe is right
8:30
for you.
8:31
>> Yeah. YC companies.
8:32
>> Yeah.
8:33
>> You got this.
8:34
>> Yeah. Yeah. Very cool. Okay. Take us
8:36
through uh the other sections that you
8:38
you put underneath that.
8:39
>> Yeah. All right. So this next section is
8:41
what we call our bento. And so this is
8:44
probably the big area that's seeking to
8:46
solve some of the problems I talked
8:47
about earlier about really expressing
8:50
kind of like the scale of the product
8:51
offering. And so before you saw like
8:54
okay we do issuing we do payments. Uh
8:57
but here we're trying to depict a little
8:58
bit more of the solution set. And so
9:00
payments yes we do payments we do online
9:03
payments we also do terminal. Uh billing
9:05
is you know what we were talking about
9:07
earlier about usage based billing or um
9:09
you know could be fixed fee
9:10
subscriptions any number of these types
9:12
of things are a lot more adjustable and
9:15
um customizable to the businesses we're
9:17
serving. uh we talked a little bit about
9:19
the the role that AI plays in the
9:22
organizations and so we wanted to make
9:24
that clear our issuing product stable
9:27
coins and then of course the way that we
9:30
uh provide for platform businesses and
9:32
marketplaces and so what we're trying to
9:34
do here is not overwhelm you with too
9:37
much going on I mean that I know there
9:39
is a lot on this page but you know you
9:41
can see that
9:42
>> there's a very little text we're just
9:44
trying to get the point across to give
9:46
you enough of a sense of like, okay,
9:48
this may be for me. And then what we're
9:50
really trying to do is show rather than
9:53
tell. So, hence the imagery. And then
9:55
the quick way that you can gain more
9:57
insight is we do this kind of overlay,
10:00
this larger modal, so you don't actually
10:02
have to go off your course. You're not
10:04
we're not taking you away from the
10:05
homepage yet, but we can give you a
10:07
little bit more of a sense of what this
10:08
is all about. There's many products
10:11
layered into this, right? Like, you
10:12
know, we on that bento, it's 1, two,
10:14
three, four, five, six. But that's, you
10:17
know, I think we have many, many more
10:20
dozen products on top of that that we
10:23
can't express all on one page. That
10:25
would just be too much and would
10:26
overwhelm you. So, we want to give you
10:28
essentially progressive disclosure as a
10:30
way of of getting towards the more
10:31
details behind the products and more
10:33
things that we offer.
10:34
>> Yeah, that's very cool. I don't know
10:35
that I've seen this specific design with
10:37
the bento box and the modals that you
10:38
can pop up that give more information
10:40
directly on the page. It's an
10:42
interesting smart choice because rather
10:44
than take people to a dedicated page,
10:46
you keep them right here. Show them what
10:47
they want. You give buttons to to jump
10:50
to the next section or you can keep
10:51
scrolling down if this is not the right
10:53
thing that you're looking for.
10:54
>> Yeah. That that you want it to feel
10:56
light. You want it to feel easy to kind
10:59
of explore and engage and you're taking
11:01
them on a journey for sure. You want to
11:03
help them get to where they're going. Uh
11:05
but yeah, I think if we leapt people off
11:07
the page, you know, when it might be too
11:10
early for them to have made their
11:11
decision on what they're actually going
11:13
after. Uh so this is really just a bit
11:15
more of a browse experience and it's a
11:17
gives them a bit more of a a chance to
11:19
explore.
11:19
>> YC Starter School is back. We're hand
11:22
selecting the most promising builders in
11:24
the world and flying them out to San
11:26
Francisco for July 25th and 26th to
11:29
discuss the cutting edge of tech. Apply
11:31
now for a spot. Okay, back to the video.
11:34
Yeah, it's interesting. Another thing
11:35
that stands out to me is how much
11:36
animation you use um in each of these
11:38
cards. Talk a little about about that
11:40
and and how you can do it without making
11:42
it too overwhelming or distracting for
11:44
people.
11:45
>> Yeah, it's a difficult balance to get. I
11:47
mean, this is where prototyping and
11:49
experimentation like I remember this one
11:51
where it's like we had too many lines at
11:53
first and then we had too few lines at
11:54
first and the the ball was moving too
11:56
fast. Uh so you do have to really
11:58
fine-tune, bring it in. You know, one of
12:00
the things as kind of pointed out
12:01
earlier and when when you're building a
12:03
website like this, you are either, you
12:05
know, both directly and indirectly
12:07
expressing your company's manifesto. So,
12:09
one of the things that we are trying to
12:11
express is the care that we put into the
12:14
work that we do because if you see the
12:15
care that goes here, then you you're
12:17
right to assume that we also put that
12:19
care behind the scenes in the way that
12:20
we move money and the way that we
12:22
protect uh a company's information.
12:24
These are important details to express.
12:27
It's also, you know, the idea of making
12:30
the site feel a bit more alive.
12:32
>> You know, that there's a presence here
12:34
is something that I think the motion
12:35
does really well. You were right though.
12:37
If you go too far with it, it becomes
12:39
distracting. It becomes annoying. Nobody
12:41
really wants to engage with that. And
12:42
so, it's just delicate movements and
12:45
really just like trying to fine-tune it.
12:47
Um, and also thinking about the role
12:48
that when somebody engages with it,
12:50
that's where, you know, you bring
12:52
certain things to life and make sure
12:53
that you're like responding and this
12:55
gives the feedback to also register
12:57
like, okay, I can click on this. You
12:58
might not have known that otherwise. So,
13:00
we try to engage in that way. This is
13:02
where we're we're basically these are
13:04
kind of like the the big important
13:05
metrics that can help you understand
13:07
again kind of the scale of what we
13:09
build. Um, and you know, of course,
13:11
there were versions where we could just
13:13
put the numbers there. Uh but what we
13:15
intended to do with this is to just add
13:18
a little bit of interest. It is loosely
13:21
communicating the intention of these uh
13:24
metrics. It's not really a data viz of
13:26
course. Uh but it gives you a sense of
13:28
like okay here we're talking about
13:30
global scale. Here we're talking about
13:32
um uptime and so you kind of get the
13:34
sense of continuity here. Um but really
13:37
it's just fun. It's just beautiful. Um,
13:39
and then there's, you know, it changes
13:41
depending on what time of day, but if
13:42
you want to go ahead and see what it
13:44
would be like at night, you can come in
13:45
and check it out yourself.
13:46
>> It feels like we're entering an era now
13:48
where websites can be fun again.
13:50
>> Yeah,
13:50
>> they were fun early on and then it got
13:53
to a point where every SAS website
13:55
looked exactly the same. And um, it's
13:57
really cool to see you focused on things
13:58
that are just fun for the sake of being
14:00
fun.
14:00
>> Yeah. I mean, I'm I'm a AI hopeful that
14:03
the creation of these tools that can
14:05
help us move so much faster and
14:07
basically get to like get to good almost
14:10
like instantaneously and almost for
14:12
free. And now great, we can take that
14:15
time to then push it that next level and
14:17
to create something that is really
14:19
interesting and playful and, you know,
14:22
beautiful.
14:22
>> Yeah. I think what's interesting here
14:24
that's that's maybe worth for anybody
14:25
watching to pay attention to is that
14:27
these aren't animations for animation's
14:29
sake or interactivity for interactivity
14:31
sake. There's there's an intention and a
14:33
purpose behind everything that you're
14:34
doing and it's connecting to the
14:36
specific message that you're trying to
14:38
communicate with each of these numbers
14:39
and it's easy to look at it and go like
14:41
oh yeah it's just like a fun kind of
14:42
thing and it is that but it's not
14:44
random.
14:44
>> Yeah. And a lot of thought goes into
14:47
that I'm sure like talk about some of
14:48
the different things that you explored
14:50
or were people even against putting this
14:52
in thinking well what value does it have
14:54
and every inch of the screen has to have
14:57
um you know directly measurable value.
14:59
>> Yeah. Well also interesting is it's this
15:02
section that the site didn't launch in
15:06
December. M
15:07
>> so we we ended up launching in January
15:10
and uh we were at a stage with this
15:14
where like we had something good like we
15:17
had you know all four animations but
15:20
they didn't move quite the way you know
15:22
we thought would feel really smooth and
15:25
really intentional and the extra detail
15:29
of how they transition from one to the
15:31
next just like felt a little cluji and
15:34
wasn't quite as smooth as it could
15:36
And it was a decision, you know, a group
15:40
decision that we should wait and we
15:42
should do it right. We could have, well,
15:46
let's just only do three or let's just
15:47
only do one or maybe you don't make the
15:49
move. Um, and you know, for sure what we
15:52
don't want to get in the habit of is
15:54
just like pushing timelines out to the
15:55
end of time. But this was a decision
15:57
that it was worth it to get it done well
16:02
and make it actually a kind of joyful
16:04
experience that demonstrates you know
16:07
that love and care and the technical
16:08
ability and you know it was over the
16:11
holidays and so pushing it another week
16:13
was was not going to be you know the end
16:15
of the world but also a really good
16:16
thing in the long run about how it feels
16:18
within the overall composition.
16:20
>> Yeah. Very cool. So this area is um a
16:23
place where we're we're talking about
16:25
our users but we created these images so
16:28
it brings together Stripe the brand and
16:31
the the companies that we serve. So each
16:34
one of these is custommade uh and it's
16:37
you know intended to express a bit of
16:39
the brand that we're highlighting as
16:41
well as the Stripe brand with the
16:43
parallelogram. You could look at this
16:44
and you could be like oh yeah great
16:46
opportunity to use AI as did we. We're
16:48
like great, we're gonna use AI and it's
16:50
going to be awesome and we're gonna get
16:51
these done in a, you know, a day. Now,
16:53
of course, like the reality is, you
16:55
know, building with AI is actually also,
16:58
you know, something that is u it
17:00
requires the love and care and attention
17:02
of the makers. And so, there was
17:03
definitely a process behind it. But
17:05
these are really just meant to bring
17:07
some interest. And you kind of again, as
17:09
you're trying to express through
17:11
visuals, a lot of people scroll really
17:14
fast through the website, right? At
17:15
least I do. I don't know about you. But
17:17
when you're you're trying to get them to
17:19
like take a beat almost like a song, you
17:20
know, it's like what are those like key
17:22
moments of punctuation and where do we
17:25
want you know folks to slow down and
17:26
take a note and also when are we trying
17:28
to express something like you know
17:30
trying to communicate uh the type of
17:32
brand that we work with especially if
17:34
you're you know not familiar with them.
17:36
>> And now we've moved to a darker
17:37
background.
17:38
>> Is there something intentional behind
17:40
that now? Well, this is an area that
17:42
we're talking about our um integrations
17:45
in the way that our APIs work. Uh and
17:48
certainly there's, you know, a developer
17:51
language. Uh not everything has to be in
17:53
dark mode, but um it is actually
17:55
something we have done in the previous
17:57
site as well. And so we wanted to carry
17:58
that forward.
17:59
>> This is uh the area that we call squeezy
18:01
boy.
18:03
Uh design is definitely more fun when
18:06
you can give everything a fun name. Uh
18:07
but it is a an area where we're we're
18:09
kind of just showing some of the things
18:11
that are comingings and goings and uh so
18:13
this is our Black Friday Cyber Monday uh
18:16
city that we had built um our
18:20
podcast Cheeky Pint. Uh so this will
18:22
always be changing with different things
18:23
that come through. Uh but we wanted to
18:25
once again you know have a little fun
18:27
with how we portray these things make it
18:29
easier and um also inviting to engage
18:32
with. Um certainly added more challenge
18:34
to it. Like so for example how do you
18:36
get an image that when it's this size is
18:39
going to make sense as much as it's
18:41
going to make sense when it's this size.
18:43
Uh so this was tricky to to build it
18:45
right. And so you know quite a bit of
18:47
iteration on that but I think the team
18:49
found a clever way. It's amazing seeing
18:50
the finished product here and everything
18:52
is so polished and and put together, but
18:55
I think it's really easy to miss all the
18:57
work and the iteration and the process
18:58
that goes on behind the scenes there. I
19:01
would love for you to take us through
19:02
show your work on all these different
19:04
sections and all the iterations that you
19:05
went through to ultimately end up at
19:07
this point.
19:07
>> Well, okay, we're starting here on the
19:09
top where we have this wave. Uh I've
19:11
worked at Stripe now for five years and
19:14
I cannot even tell you how many
19:16
different variants of a wave or gradient
19:19
or gradient wave that I have seen and
19:21
been a part of. Um I think we are trying
19:23
to find every possible solution on this
19:26
project. You know we knew we wanted to
19:30
bring a lot of kind of color and joy to
19:33
the experience and we knew that a a wave
19:36
or gradient wave like we had before is a
19:39
a key way to do that. and we enjoy that
19:41
part of the brand, but which wave, how
19:44
to do it, what's going to stand the test
19:45
of time, what could be on there for six
19:47
years potentially, uh, and, you know,
19:49
give you a, you know, a bit of joy when
19:52
you visit, but not overdo it. And what's
19:55
super cool is that our wonderful team
19:58
created this tool where we can
20:01
experiment and get the right waves,
20:03
>> the perfect wave.
20:04
>> Exactly. So, you could just like tweak,
20:07
do I want that much blur? No, not that
20:09
much. Do I want a more grain? No, not
20:11
that much. Let's see. We want to also
20:13
switch it on the scale. Do how do we
20:15
want it rotated? How thick do we want?
20:18
How much texture do we want? You know,
20:20
the reality is is all of those factors
20:22
matter so much. Like what exactly is the
20:24
color? Like that's a little like that
20:26
yellow isn't right. Right. That's not
20:27
the what we ended up with. Like we want
20:28
to find just the right color mix, just
20:30
the right texture, just the right amount
20:32
of movement. And having a tool like this
20:34
was essential to make that happen. And
20:37
then you know we first get it right and
20:39
like okay we see how it is here and then
20:41
becomes the building process like how do
20:43
we actually build it so it's also
20:44
performant and is going to you know
20:46
operate
20:48
>> really smoothly on anybody's computer
20:50
>> and and I noticed some buttons here it
20:51
looks like you can save the state
20:53
>> so do you create different variations of
20:55
these and then kind of test them against
20:56
each what was the process even of using
20:58
this tool
20:58
>> yeah before we even got in that tool we
21:00
were even just trying to get centered on
21:03
well what is it that we're actually
21:04
trying to achieve with the wave what are
21:06
talking about here like well how vibrant
21:08
do we want to be or do we want like
21:09
prefer it muted like some of these were
21:11
really interesting but is that the right
21:14
feel for the page or not? Um you know
21:16
there this is one of our previous waves
21:18
from one of our event sites uh which was
21:21
monochromatic but also really bold or do
21:24
we want to be a little bit more uh
21:26
diverse and more rainbow like? And so we
21:28
looked at each of these kinds of ways of
21:31
thinking about it and then you know
21:32
essentially had discussions about like
21:34
well is it flat or is it an object with
21:37
a form and these great discussions help
21:40
us tease out uh what we're we're
21:43
actually trying to do and of course you
21:45
know Patrick is was heavily involved in
21:47
the site as well and so we had many
21:48
discussions with him is like this this
21:50
wave feel right because when you're you
21:52
know creating a new homepage it's almost
21:54
like yeah you're deciding what you know
21:55
clothes you're going to wear for the
21:56
next many years. M it's a big decision.
21:58
>> It's amazing seeing um the literally
22:01
infinite variations that you could come
22:03
up with here.
22:04
>> I imagine that makes it harder to just
22:06
make a final call. What is that process?
22:08
Who who decides and and um you know how
22:12
do you decide like this is the one that
22:13
we're going with and and move on from
22:16
this because you could probably spend
22:17
forever debating.
22:18
>> Oh, it's very very true. Uh usually well
22:21
for something like this Patrick was
22:23
definitely a part of the decision-making
22:24
process and so usually you know with the
22:27
team we will look at quite a large range
22:30
then we will down select to you know a
22:34
subset of those and say like okay these
22:36
are the ones that we're comfortable with
22:37
like we don't want to put in front of
22:38
Patrick ones that we're like definitely
22:40
not comfortable with or wouldn't
22:41
recommend. Although it's it's always
22:42
helpful to show kind of like the process
22:44
and what we did explore. But then we
22:46
look at the ones that are likely a very
22:49
good fit and then we'll have a
22:50
conversation about what you know feels
22:52
right for him. And luckily, you know,
22:54
he's also exceptionally decisive and has
22:56
very good taste. And so we usually can
22:59
use that as a conversation of like,
23:00
okay, this one feels right. But I'll
23:01
also admit, I mean, this is one of the
23:03
blessings and the curse of the design
23:04
process is that something that could
23:06
feel great here on or on a board or in
23:09
isolation, um, all of a sudden feels
23:11
very different when you actually put it
23:12
in place and you feel it. that you feel
23:14
it with the rest of the typography and
23:16
the the logos on there and the various
23:18
other things and also just like sit with
23:20
it for some time. Uh so we definitely
23:22
evolved it over time. Something that may
23:23
have felt right at one point um starts
23:26
to feel, you know, just like it it it
23:28
isn't going to stand the test of time
23:29
and then we want to change it.
23:30
>> Yeah. So, at what point in the process
23:32
do you go from looking at a bunch of
23:34
different variations on this like flat
23:36
to an object with a form or quiet to
23:38
turbulent and then actually get it coded
23:41
up and working live in the page so that
23:43
you can get a sense of what it actually
23:44
feels like live.
23:45
>> I mean, I would say the goal is as
23:47
quickly as possible to get it into state
23:49
that would be like the way a user would
23:51
experience it.
23:52
>> Uh because it is really hard to judge
23:54
anything in isolation in a way that
23:56
isn't like the user would be. you're you
23:58
that's what you're trying to do is just
24:00
like put yourself in their shoes and
24:01
then see what that would feel like.
24:02
Sometimes we're just we're not there
24:04
yet. Like it could take some time to
24:06
code it up. Uh and so we want to you
24:08
know start to down select just so we
24:10
know like should we code you know the
24:12
these five versions or you know these
24:14
five versions. And so we would start
24:16
perhaps with something that's more of
24:18
just like a static visual and just get a
24:20
sense okay we want to go over here over
24:21
there. But that's where that tool comes
24:24
in hand because this allows us to
24:26
essentially, you know, get many versions
24:28
at once, right? And so we can play with
24:30
them together.
24:31
>> Yeah. And one of the other things that
24:32
you might not get to experience um just
24:34
playing with it in frames is it it comes
24:36
behind the text there. And so you have
24:38
to change the text color and make sure
24:39
that the text is readable and and not
24:41
distracting and and it interacts with
24:42
all these other elements on the page
24:44
that are really important, too.
24:45
>> Right.
24:45
>> You talked about a few different uh
24:47
bento variations.
24:48
>> Oh, yeah.
24:49
>> I'm curious to see some more of those.
24:50
>> Yeah. So, this is the bento where we're
24:52
trying to communicate a lot of different
24:53
things that we do.
24:55
>> Uh, and what what's the right way to to
24:58
communicate this? We looked at a ton of
25:01
different things. And so, what we're
25:02
trying to figure out is, you know, if
25:04
you're what kind of user are you? Are
25:07
you a uh micro entrepreneur with a small
25:11
business or are you a large enterprise?
25:13
Are you interested in billing or are you
25:15
interested in connect these things? Do
25:17
we want to show you them all in one
25:19
screen? this might be an approach so we
25:21
can get there faster because of course
25:23
on any website the more you scroll down
25:25
the less users get there, right? Uh so
25:27
what if we just squished it all in?
25:29
Well, that's a lot. It's pretty type
25:30
heavy. We're not doing a whole lot of
25:32
showing versus telling.
25:34
>> Uh we looked at uh these kinds of
25:36
sections. This is a little bit more
25:38
similar to our original site that I
25:40
showed you where you just kind of like
25:42
pass through section by section. This
25:44
felt like a little too scrolly telling,
25:47
right? and you're just like kind of you
25:48
want to get to it and you want to get to
25:49
it faster and you want to be able to get
25:51
a a quicker sense of what we offer. Uh
25:53
then we have here a essentially an
25:56
accordion so you could press these
25:58
things to then open them up and see what
25:59
we have. Uh this one we actually did
26:01
take to user research and unsurprisingly
26:05
it was not a quick way for people to
26:10
really digest a lot at once because it
26:12
requires effort. you know what even if
26:14
it's not a lot of effort, right? But you
26:16
um you want somebody to tap on it or you
26:19
want them to scroll over it. Uh and you
26:21
know, otherwise you're you're in trying
26:22
to introduce something to them like
26:24
manage a marketplace end to end. Like
26:26
you might know what that means, but you
26:28
might not.
26:28
>> Would you would you be interested enough
26:30
to click through and most people just
26:31
don't click tabs?
26:32
>> Yeah, exactly. So that's why, you know,
26:34
again, this didn't feel right and a more
26:36
visual one um was definitely a better
26:39
choice. Uh but there's a lot of
26:41
different variants here in the way that
26:43
we explored how to communicate this. And
26:45
then again, you know, it just we have to
26:47
remember that when people are coming to
26:49
this site, they're in a more of a lean
26:51
back mode. They're in more of a browse
26:53
mode. So the idea that you're going to
26:55
put your most important messages a click
26:57
away, it's going to be tough. And so
27:00
that's where the bento kind of won at
27:02
the end of the day because it was just
27:03
so much more visual um and I would say
27:06
kinder to the users because it meant
27:08
that they could be in that lean back
27:09
position.
27:10
>> Talk a little bit about the process and
27:12
maybe how you used AI in building this.
27:15
>> Well, so yeah, let's start with the
27:17
images that but there's other parts of
27:18
the process there. But these were
27:20
certainly a type of thing that lend
27:23
themselves to AI. I think AI is really
27:25
good at these pictures that seem, you
27:27
know, super real. Uh, and so this is
27:30
kind of what we're going for. Now, it
27:32
seems like it would be pretty simple to
27:35
ask a, you know, an AI like, you know,
27:37
free pick or whatever of like, you know,
27:39
give me a parallelogram inside this
27:41
thing. But the reality is, you know, the
27:44
nuance of the details really mattered to
27:46
us. Like, you couldn't just put uh
27:48
something that sort of got there. Uh, it
27:51
had to feel like it was, you know, at
27:53
the same level of love and care as these
27:55
other things. What was really kind of
27:57
funny was the process here. Uh because
28:00
you know, one wouldn't have thought that
28:01
bubbles would have taken so much of our
28:03
attention, but they sure did. Uh so here
28:05
was a version that we had for a
28:07
different user that is uh not depicted
28:09
on the site just right now. Um and you
28:11
can kind of see like, okay, yeah, it's
28:14
an ice cube and the bubbles and you
28:15
know, generally what do you think? Looks
28:16
looks okay.
28:17
>> Yeah,
28:18
>> looks real.
28:18
>> Yeah, ship it.
28:19
>> Well, this is the team's uh thoughts on
28:22
the matter. And so each one of these
28:25
things is actually a critique of, you
28:27
know, where it just doesn't feel quite
28:29
real, right?
28:30
>> The example um from uh urban um or URBN
28:35
is the um you know, how well does this
28:38
all feel like the right urban uh layout
28:41
now gets a lot of it right, but when you
28:43
take a double look, um her arm isn't
28:46
quite right. He doesn't quite have a
28:48
hand. Um you know, that shadow isn't
28:50
exactly how it would be. uh and so the
28:53
the detail in each of these little
28:56
nuances like each pixel basically needs
28:58
the same uh amount of attention. So I
29:01
think what AI is helping us do is it's
29:03
helping us speed up our process and
29:05
certainly helping us explore more. We
29:08
can look at you know 20 ideas in the
29:10
time it normally would have taken to
29:12
look at two. However, the it doesn't
29:15
replace craft. It doesn't replace taste.
29:17
it doesn't replace, you know, the
29:19
attention to detail to ensure that
29:20
you're getting each of those things
29:22
right. Um, we're really excited about
29:24
how it's sped up prototyping and sped
29:27
up, you know, experimentation. So, it's
29:29
like, how should these accordionss move?
29:30
Should it replace this or should it push
29:32
that? Uh, we can mock that up really
29:34
fast and then saves engineers countless
29:36
time hours and and designers as well as
29:39
they're exploring different varieties.
29:41
It's also really great for user testing.
29:43
Um, if we want to be able to change all
29:45
the words in here, uh, so that it feels
29:48
one way for one user that we're talking
29:50
to versus another, we can do that really
29:52
easily with AI prototyping. I would say
29:54
even during that time period, you know,
29:56
what we were exploring is, you know,
29:58
feels oldfashioned a year ago versus uh,
30:01
how we explore today.
30:02
>> How about uh, like the role of
30:04
designers? You know, it's it seems like
30:06
it's not just um, pushing pixels in
30:09
frames in Figma.
30:10
>> Yeah. talk about what the designers on
30:12
your team are doing and and the role
30:14
that they played in uh in actually
30:16
building this
30:17
>> what designers at Stripe endeavor to do
30:19
or to create things that feel like they
30:21
push the status quo forward. That kind
30:23
of all harks back right to the idea of
30:25
like what what is the global progress
30:27
that we can provide and we want to do
30:28
that via design as well. We want to
30:30
create things that are exceedingly easy
30:32
to use that are also really really
30:35
powerful and that can help people solve
30:37
problems or help them build their
30:38
business or help them accomplish what
30:40
they're trying to do but do so in a way
30:42
that actually just brings a little joy
30:43
to the day too. You know, because
30:45
frankly that's part of progress as well
30:47
is that like a beautiful world is
30:49
definitely a better world. I want to
30:50
live in that one. And so designers are
30:53
trying to create things that are going
30:55
to be really intentional for our users
30:57
but also do so that's you know in a
30:59
creative and thoughtful and
31:01
differentiated way and I would say the
31:04
tools that we're using are allowing for
31:07
that now hopefully better and faster you
31:09
know as we talked about earlier is that
31:11
you know I think AI can you know give us
31:14
opportunity to keep the base like to
31:16
raise the floor essentially to create
31:18
baseline products maybe that like the
31:20
seven out of 10 really quickly, really
31:22
easily. But then what do you do with
31:24
that extra found time? Do you just like
31:26
ship that and just like, you know, ship
31:28
more sevens out of tens? Like, boy, I
31:30
hope not. Uh, what instead we want to do
31:33
is, you know, get the things that are
31:34
just like, okay, that's a very typical
31:37
modal to, you know, accept somebody's
31:39
email address to sign them up. Like
31:41
maybe you don't need to reinvent the
31:42
wheel there. Like as long as that is
31:44
like a really good version of that, then
31:45
we're good. But now, can we spend the
31:48
time to think about new paradigms of
31:49
interaction? Like for example, people
31:51
are using agents to build their
31:53
businesses now. Um they're using agents
31:55
to basically do everything under the
31:57
sun. So what is your agent experience?
31:59
How good is that? What is the the
32:01
users's experience going to be like when
32:03
they are traversing, you know, the
32:05
internet or their tools in that way? And
32:07
so that's where I would say designers
32:08
are putting more time now is thinking
32:10
about those new paradigms of interaction
32:12
and trying to think about like what does
32:14
great experience or user experience or
32:17
agent experience look like for tomorrow.
32:19
We have incredible new tools that are
32:20
available for everybody. And one of the
32:22
trends obviously that that we've been
32:24
seeing a lot of is everybody within a
32:26
company now having the ability to ship
32:29
code and improve products and update the
32:33
website and you know the core product
32:35
that customers are using which I think
32:36
is really powerful and one of the
32:39
questions that I think that that comes
32:40
out of that
32:42
>> um especially from a design perspective
32:44
is how do you keep it so there's this
32:46
cohesive design language and it stays to
32:49
the bar that you is so important to you
32:51
and
32:52
without being directly in the flow of
32:55
how new code gets written and shipped
32:58
and going live on the site.
32:59
>> Yeah, I really interested to see and be
33:02
a part of the evolution of design
33:04
systems in this way because design
33:06
systems have always been a way to help a
33:08
team scale. So as a organization grows
33:12
and you can no longer just know what the
33:14
right thing is because you know there's
33:16
10 of you seated around the table and
33:17
you're all just talking about every
33:19
single thing you do. when you scale like
33:21
it helps the organization make decisions
33:24
together and ensure that there's con
33:26
coherency in the user's experience with
33:29
AI tools I think that we're going to see
33:32
a whole new wave where these systems are
33:35
you know kind of managed by the AI tools
33:38
and that can help us scale things a lot
33:41
more quickly and so for example as I
33:44
mentioned I you know drew a sketch of
33:46
what I wanted to see built and then I
33:49
put that in the AI tool and then it uses
33:52
the components from our design system to
33:54
piece that together for me and get a
33:55
like the the rough version. Then I want
33:58
to, you know, push it here and there and
34:00
actually, you know what, that component
34:01
isn't really fit to purpose for what I'm
34:03
trying to do here. So this is where
34:05
we're going to need to push from that
34:06
and so then can the AI tool help me
34:09
actually expand the design system and
34:11
actually help to grow it for the use
34:13
cases that we need. And so I think
34:16
there's a lot that is going to be
34:18
facilitated in terms of bringing more
34:20
high quality things at that like
34:23
baseline. But honestly, I mean, this is
34:25
what people have to choose to do because
34:27
sometimes it's so easy when you put it
34:29
in the, you know, the AI tool and it
34:31
spits back a thing and you're like, "Oh,
34:33
that that was fast and that was easy and
34:34
that's pretty good." And you will like
34:36
you can feel it in yourself just being
34:38
like, "Yeah, I guess that's enough." But
34:40
like the reality is like don't be wooed
34:43
by you know just how easy that was to
34:46
achieve but instead ask yourself like
34:48
but is this really is this really great?
34:50
Is this like have I really hit the mark?
34:52
Is this really going to achieve the
34:53
goal? is really going to feel like it's
34:56
wellcraftrafted and put, you know,
34:57
intentionality behind it. And then, you
34:59
know, sometimes that takes, you know,
35:00
another rev and another turn. And, you
35:02
know, the the way that, you know, our
35:04
tools today can allow you to kind of go
35:06
back and like, no, tweak this little bit
35:08
and tweak that little bit. Uh, and
35:10
essentially the merging of design and
35:12
edge tools and one allows you a lot more
35:14
ability to kind of customize that. So,
35:16
you don't need to accept slop and you
35:19
shouldn't accept slop. you should you
35:21
know hunt for fight for the right
35:23
solution.
35:24
>> What are some more principles like that
35:26
that you try to instill in your team? I
35:28
mean, I think I think a part of it is,
35:30
you know, the reality is, and I think we
35:32
may have even talked about this last
35:33
time we talked, like the gravitational
35:35
pull is to mediocrity. Like, it is just
35:38
so easy to accept good enough.
35:43
>> And I think it really really takes
35:45
intentionality and you really have to
35:46
think about like what is the cost of
35:49
accepting good enough. And I think in
35:52
that one decision, you're just like,
35:53
well, it's just fine. Like it's just
35:55
like ship it like it, you know, it
35:56
achieves it. like you know I really you
35:58
know we we've got too much to do and you
36:01
know is it like that data viz thing we
36:02
were talking about before like it's it's
36:04
pretty good you know we got like
36:05
wouldn't it be great to like get the
36:06
team on something else and you you like
36:08
weigh all these other costs and you
36:09
think about it and you end up making a
36:11
decision to go for good enough
36:13
>> but think about if you made that good
36:15
enough decision every day all day every
36:18
day and then think about how many
36:21
companies do that right like how many
36:22
companies really stand out to us as like
36:25
exquisite and exceptional and that like
36:27
really hold that bar up that it reminds
36:29
you of just like how hard it is to fight
36:32
that fight of like well I if I let this
36:35
slide you know what else am I going to
36:37
let slide and what is that like
36:38
composite going to be and then I think a
36:40
lot of people make decisions based on
36:42
well you know the team put so much
36:44
effort in like I'm going to you know
36:46
upset the team if I don't go forward
36:47
it's like well how happy is the team
36:49
going to be if the product is just meh
36:51
fight the gravitational pull to
36:53
mediocrity and do not leave well enough
36:55
alone Mhm.
36:56
>> And really look for the thing that's
36:57
going to make a difference. I think the
36:59
other thing that we talk a lot about
37:01
internally and I think is really
37:03
important for folks to consider when
37:05
they're building products and
37:07
experiences is what is the user going to
37:11
experience at the end of the day. You
37:13
know, we get a little too caught up in
37:14
our own world. We're too comfortable
37:16
with it. And so what I would always say
37:19
is just like realize it the way a user
37:22
would. prototyping, not presenting.
37:25
Don't try to communicate to, you know,
37:27
the stakeholder of like, well, this is
37:29
why we did this and this is, you know,
37:31
the trade-off that we fought against and
37:33
this and that. It's just like if you're
37:34
there to talk about whether or not this
37:36
is the right solution or not, then you
37:38
should be asking of like, well, how is
37:39
this going to feel at the end of the day
37:40
for the person that's going to be
37:42
experiencing this? And, you know, does
37:44
that feel good? Without all of that
37:46
knowledge, do I think that part is is
37:49
the right one? um that makes a big big
37:52
difference. Um I would also say when
37:54
we're exploring different products and
37:57
like what are you know what is actually
37:59
shipworthy or not you think about like
38:02
what the trade-offs are of like is this
38:04
going to negatively impact somebody's
38:06
day? Is this going to be something that
38:09
erodess trust if you don't get this
38:11
right? Is this going to make it to the
38:13
front page of the news? Like what what
38:15
are the tradeoffs when you're making a
38:17
decision? And I guess like a lot of the
38:19
things that I'm talking about here are
38:21
the things that sound like I'm looking
38:23
for perfection. And I think that's also
38:26
a dangerous pursuit because of course
38:28
like your product is only as good as
38:31
what's actually out there, what's
38:33
shipped. It's not what we've been
38:34
thinking about. It's not what we've been
38:35
talking about. It's not our intention
38:36
and what we're pursuing. It's what's
38:38
actually available to the people that
38:40
are you're you're serving.
38:41
>> And I think progress is probably more
38:44
important than perfection in that case.
38:47
And a lot of times it's not out there
38:49
until you actually can learn and
38:51
understand whether or not it's
38:52
effective, especially with AI tools and
38:55
the way that you know you you really
38:57
don't know how people are going to use
38:59
it and how it's going to respond and how
39:01
they're going to evolve with it until
39:03
you can bring it actually to market. And
39:05
so I think you have to have a kind of a
39:07
rubric in place about what are, you
39:10
know, the essential pieces to a
39:12
successful product. I wouldn't call it
39:14
an MVP. It's probably like an MVQP, like
39:17
a minimum viable quality product. Uh
39:20
because again, you don't want to lose
39:21
trust by experimenting with something
39:23
out in the world. Uh but you certainly
39:25
want to learn from their experiences.
39:27
>> It feels like something that's becoming
39:28
even more important these days um with
39:30
all the advancements in AI is QA.
39:32
>> Yeah.
39:33
>> And testing. And you know, you talk
39:35
about having the voice of the user and
39:36
the perspective of the user in your head
39:38
as you're designing. Um, and part of
39:40
what you do at Stripe, which you told us
39:42
about last time, is uh, walking the
39:44
store.
39:44
>> Oh, yeah.
39:45
>> And, um, and you actually go in and you
39:47
test all of the products yourselves and
39:49
you do that as part of a company culture
39:51
and a requirement that everybody does.
39:53
Everyone is expected to do that. Um,
39:55
which I think is really important. How
39:57
has that changed more recently? Um,
39:59
either within Stripe or certainly with
40:01
all the changes with AI that have been
40:03
happening. Walking the store is such an
40:05
important part of building products and
40:07
experiences because again it like at the
40:10
end of the day you're trying to
40:10
understand what the user is going
40:12
through. And when you're building
40:13
something, it's so easy to be like, "Oh
40:15
yeah, we're in our product. We're in it
40:16
all day. I'm thinking about my product
40:18
all day." But what you're thinking about
40:20
is, you know, that next feature that you
40:22
launch and it's really easy to lose
40:24
sight of what's actually out there. It's
40:27
kind of funny like how you can create
40:30
something. you're like, "Oh, when I
40:31
shipped it, we did all these bug bashes
40:33
and it was great." But then you use it
40:35
and maybe you use it a month later,
40:37
maybe you use it, you know, two, six
40:39
months later, and it's evolved. It's
40:41
changed. And the reason why is because
40:43
probably somebody else shipped something
40:44
and somebody else shipped something and
40:46
now it's like, you know, it's in your
40:48
home when you've updated the dining
40:51
room, but none of the other rooms and
40:52
all of a sudden the light switches don't
40:53
match and the colors are off and every
40:55
other room now looks bad. You have to
40:57
think about how that composite works
40:59
together. And you know for Stripe for
41:01
example, we have a number of different
41:03
business areas, right? We have our money
41:06
movement business, we have our revenue
41:07
business, we have our payments business.
41:09
And these organizations need to focus
41:12
and they need to stay true to their
41:14
mission and what they're trying to get
41:16
done. But if they don't think about how
41:18
their product intersects with each
41:21
others and how a user might go from,
41:24
well, I use subscriptions and I use
41:26
payments and I use tax. how are these
41:28
things all going to work together? Then
41:30
they're really missing the user
41:32
experience. And so walking the store
41:34
helps people see kind of the forest
41:36
through the trees and see how all these
41:38
things connect.
41:39
>> And yes, we do basically it's like a
41:42
part of the culture that everybody does
41:44
this. Uh we do have a program that we
41:47
talked about last time, essential
41:48
journeys where we have a a subset of
41:51
these journeys um kind of like on a
41:53
scoreboard and like are they you know
41:56
red, yellow, green, how good are they?
41:58
But everybody should be exploring the
42:00
store different parts imagining
42:02
themselves as different types of users
42:04
experiencing different sides of it and
42:06
trying to find the the dead ends. We
42:08
also do this every Friday where the
42:11
founders do it in front of the whole
42:13
company where they're walking the store.
42:15
One to just instill how important this
42:17
is and kind of raise awareness and also
42:20
to help people think about how do you
42:22
see not everybody has the same attention
42:24
to different types of details. And so I
42:27
might see something that you might not
42:29
because of my discipline or my
42:31
disposition or you know that the user
42:33
that I talked to earlier that week and
42:34
so the thing that I'm interested in. And
42:36
so when we do these things together, we
42:38
see the value that different points of
42:40
view bring. So I really love to walk the
42:42
store with like an engineer in the room
42:44
and a product leader in a room and a
42:45
data science in the room because we're
42:47
all looking at it very differently and
42:48
we're all going to point out different
42:50
things and that is what like gets us
42:52
closer to really actually understanding
42:54
what a user might feel.
42:55
>> Well Katie, this has been incredible.
42:57
Thank you so much for coming and um I
42:59
feel like it's so rare to get an honest
43:01
peak behind the scenes and showing the
43:03
process and all the steps that you had
43:04
along the way. So, uh, really appreciate
43:06
you sharing that with us.
43:07
>> It was a lot of fun. I'm always happy to
43:09
talk about behind the scenes. I think
43:11
the blood, sweat, and tears and the
43:13
effort that goes into it is something
43:14
that's a part of the work, but is often
43:16
not talked about. I love hearing it from
43:18
other designers, and I'm always happy to
43:19
talk about it myself. Thanks for having
43:21
me on.
43:21
>> Awesome. That does it for another design
43:23
review. Thank you for joining us, and
43:25
we'll see you on the next episode.
— end of transcript —
Advertisement
