1
00:00:00,000 --> 00:00:03,000
[? music ?]

2
00:00:03,000 --> 00:00:06,560
[Treehouse Friends]

3
00:00:06,560 --> 00:00:14,990
[? music ?]

4
00:00:14,990 --> 00:00:16,990
Hey, everyone, this is Dan Gorgone with Treehouse.

5
00:00:16,990 --> 00:00:20,080
We're here in Orlando at the In Control conference,

6
00:00:20,080 --> 00:00:23,279
and our guest right now is Samantha Warren, from Twitter.

7
00:00:23,280 --> 00:00:25,920
Hi, Samantha. >>Hi! >>Thanks for joining us. >>Thanks for having me today.

8
00:00:25,920 --> 00:00:31,390
>>I wanted to ask, for the benefit of those who aren't familiar with you,

9
00:00:31,390 --> 00:00:33,390
can you tell us a little bit about yourself?

10
00:00:33,390 --> 00:00:35,460
>>I'm currently a designer at Twitter.

11
00:00:35,460 --> 00:00:40,600
I've been in the industry, I guess, for about, oh, I don't know, 9 years now.

12
00:00:40,600 --> 00:00:42,750
I went to school for print design, and

13
00:00:42,750 --> 00:00:47,760
shortly after doing print design, I happened into a very unique situation

14
00:00:47,760 --> 00:00:52,200
where someone actually offered to teach me HTML and CSS,

15
00:00:52,200 --> 00:00:54,470
and so I got into the web industry.

16
00:00:54,470 --> 00:00:58,690
And I worked at all sorts of different agencies and in-house ever since.

17
00:00:58,690 --> 00:01:04,349
>>Working at these different agencies, you've had a bunch of different experiences

18
00:01:04,349 --> 00:01:07,600
with different kinds of clients, internal clients, external—

19
00:01:07,600 --> 00:01:11,830
>>Yeah. >>Can you tell us maybe some of the main ideas,

20
00:01:11,830 --> 00:01:15,600
some of the tips that I think all of us need to know

21
00:01:15,600 --> 00:01:18,630
when we want to try to gain the trust of clients and prospectives?

22
00:01:18,630 --> 00:01:23,800
>>It's about expectations. Every time you walk into a new project

23
00:01:23,800 --> 00:01:27,340
with a client or stakeholder, they're going to have different expectations

24
00:01:27,340 --> 00:01:30,940
about what they're going to get, what they're paying for,

25
00:01:30,940 --> 00:01:33,210
what the final result will be, their level of involvement

26
00:01:33,210 --> 00:01:36,340
in the project, and it's about having a process that—

27
00:01:36,340 --> 00:01:39,420
we talk a lot about responsive design and the idea that

28
00:01:39,420 --> 00:01:43,940
the screen width responds to whatever device you're on or

29
00:01:43,940 --> 00:01:46,520
whatever screen width you're on, but it's also a little bit about how

30
00:01:46,520 --> 00:01:51,580
our design process responds to the situation that it's in,

31
00:01:51,580 --> 00:01:54,870
the types of clients that you're working with, what they're expecting, but also

32
00:01:54,870 --> 00:01:58,740
the type of team you're on, who's helping out,

33
00:01:58,740 --> 00:02:00,810
what kind of timeline, what kind of budget you have,

34
00:02:00,810 --> 00:02:02,810
because all of these things are always different.

35
00:02:02,810 --> 00:02:05,050
I've never had 2 projects that are exactly the same.

36
00:02:05,050 --> 00:02:09,229
So how do you create a tool, a toolbox, and a set of—

37
00:02:09,229 --> 00:02:13,850
an infrastructure to always know where to begin

38
00:02:13,850 --> 00:02:16,800
and how to be flexible throughout the entire process.

39
00:02:16,800 --> 00:02:19,760
>>One of those things in the toolbox, so to speak,

40
00:02:19,760 --> 00:02:21,760
would be the style tiles. >>Yes.

41
00:02:21,760 --> 00:02:25,210
>>Can you tell us about style tiles

42
00:02:25,210 --> 00:02:28,080
and what kind of—I suppose it's client interaction,

43
00:02:28,080 --> 00:02:30,120
probably drove you to creating this?

44
00:02:30,120 --> 00:02:33,440
>>Well, over a period of time, I began to have many

45
00:02:33,440 --> 00:02:35,830
projects that had some similarities,

46
00:02:35,830 --> 00:02:39,250
one being that there were clients that already had a

47
00:02:39,250 --> 00:02:42,180
brand or a logo, maybe a color palette.

48
00:02:42,180 --> 00:02:45,120
They already had some expectations as far as

49
00:02:45,120 --> 00:02:48,360
what sort of design they were going to get in the end,

50
00:02:48,360 --> 00:02:50,950
and so this—and many of the clients also, 

51
00:02:50,950 --> 00:02:52,950
to some degree, would have limited budgets.

52
00:02:52,950 --> 00:02:55,230
And so I needed a way to be able to

53
00:02:55,230 --> 00:02:59,130
still give them options from the very get-go

54
00:02:59,130 --> 00:03:02,420
without necessarily spending all the time

55
00:03:02,420 --> 00:03:06,600
of making full mock-ups—different options of full mock-ups

56
00:03:06,600 --> 00:03:09,740
for them—and still get them the product in time.

57
00:03:09,740 --> 00:03:13,040
So developing a process where I asked a lot of questions,

58
00:03:13,040 --> 00:03:16,040
and then made what at first I called actual simple comps,

59
00:03:16,040 --> 00:03:19,950
just like a piece of a comp, to give them some options

60
00:03:19,950 --> 00:03:21,950
and have them be part of the process,

61
00:03:21,950 --> 00:03:24,390
really listening to what they're saying

62
00:03:24,390 --> 00:03:26,840
and showing them the correlation between what they said and

63
00:03:26,840 --> 00:03:29,420
how that actually translated in the process.

64
00:03:29,420 --> 00:03:31,580
Yeah, so I started out with making simple comps,

65
00:03:31,580 --> 00:03:34,840
which were sort of smaller versions of a comp,

66
00:03:34,840 --> 00:03:37,700
and that sort of morphed into what I call the style tiles.

67
00:03:37,700 --> 00:03:42,900
And even just calling them style tiles with cascading style sheets, a client 

68
00:03:44,140 --> 00:03:48,980
understood that that was a direct reference to CSS and that that was for the web.

69
00:03:48,980 --> 00:03:52,150
Because a lot of branding agencies or logo agencies

70
00:03:52,150 --> 00:03:54,500
will sometimes do mood boards, for example, with their clients.

71
00:03:54,500 --> 00:03:58,750
So a style tile is actually a lot like a mood board, but more specific to the web.

72
00:03:58,750 --> 00:04:02,710
And by doing that, clients feel more involved in the process.

73
00:04:02,710 --> 00:04:05,950
>>And I think that's part of gaining their trust, too,

74
00:04:05,950 --> 00:04:10,590
is that when clients sort of give everything to you

75
00:04:10,590 --> 00:04:15,720
and they're kind of waiting for—hopefully, they'll get things right,

76
00:04:15,720 --> 00:04:18,310
hopefully, they'll understand my vision as the client,

77
00:04:18,310 --> 00:04:21,310
because there are plenty of clients out there who fancy themselves

78
00:04:21,310 --> 00:04:23,700
as designers, and they're really not.

79
00:04:23,700 --> 00:04:27,920
But I could see that this is a nice happy medium

80
00:04:27,920 --> 00:04:32,500
where they can get their hands on some kinds of designs,

81
00:04:32,500 --> 00:04:36,850
and you've already sort of set the limits there.

82
00:04:36,850 --> 00:04:39,480
>>Well, it's a tough situation, because at the end of the day,

83
00:04:39,480 --> 00:04:43,230
the client is paying for the website they're getting, so they have to be happy with it.

84
00:04:43,230 --> 00:04:46,560
They have to feel as though that was something that they helped create.

85
00:04:46,560 --> 00:04:50,400
So by really listening to what your clients are saying

86
00:04:50,400 --> 00:04:54,590
and showing them—this is what you're saying, and this is how

87
00:04:54,590 --> 00:04:57,770
I'm going to actually take that into account and apply that to

88
00:04:57,770 --> 00:05:00,120
goals and objectives that your users have—

89
00:05:00,120 --> 00:05:03,740
It doesn't necessarily mean doing exactly what your clients are asking,

90
00:05:03,740 --> 00:05:07,460
but it's more taking them down the path and showing them 

91
00:05:07,460 --> 00:05:09,460
the journey that you're going through in order to get 

92
00:05:09,460 --> 00:05:11,460
the final product that would be the best solution.

93
00:05:11,460 --> 00:05:16,800
>>So you've done this, and you've created this, not just for clients, but for everyone.

94
00:05:16,800 --> 00:05:21,600
You've opened this up, it's creative commons, it's accessible to everyone.

95
00:05:21,600 --> 00:05:25,010
So, devil's advocate, you know, why would I get—

96
00:05:25,010 --> 00:05:29,100
why would I release my secrets, and this great process

97
00:05:29,100 --> 00:05:34,020
to potential other designers out there who might steal my business?

98
00:05:34,020 --> 00:05:36,020
Why give that away?

99
00:05:36,020 --> 00:05:39,820
>>I've been really fortunate to be surrounded by some very smart people

100
00:05:39,820 --> 00:05:41,990
who are active in the open source community, and

101
00:05:41,990 --> 00:05:44,590
specifically in the development community.

102
00:05:44,590 --> 00:05:48,750
I've seen a lot of what they've done, as far as how that's helped progress

103
00:05:48,750 --> 00:05:50,920
where the web is currently.

104
00:05:50,920 --> 00:05:54,440
And so for me, I see that development has made such great

105
00:05:54,440 --> 00:05:59,000
strides by opening up and making their secrets transparent

106
00:05:59,000 --> 00:06:03,260
to the world and sharing, so I really feel very passionately about

107
00:06:03,260 --> 00:06:07,430
having that same kind of community feel within the design area.

108
00:06:07,430 --> 00:06:10,350
It has been for so long—this idea of like keep it secret,

109
00:06:10,350 --> 00:06:13,250
like this is my secret sauce, and this is what you're paying for.

110
00:06:13,250 --> 00:06:17,650
But at the end of the day, we all want great-looking websites.

111
00:06:17,650 --> 00:06:20,960
How many times do you go to a website, and you're like, "Oh, this is terrible!"

112
00:06:20,960 --> 00:06:24,470
I mean it would be wonderful if the web was all beautiful, like—

113
00:06:24,470 --> 00:06:28,350
so let's help each other to share what works for you.

114
00:06:28,350 --> 00:06:30,510
I'm not saying style tiles works for everyone at all.

115
00:06:30,510 --> 00:06:34,090
I just happen to have a situation that happened over and over and over,

116
00:06:34,090 --> 00:06:36,440
and I thought to myself, there has to be a way that I can

117
00:06:36,440 --> 00:06:39,540
do this better, and maybe I can save time for other people

118
00:06:39,540 --> 00:06:41,540
to help them get farther faster.

119
00:06:41,540 --> 00:06:43,940
>>So you mentioned secrets. So let's talk Twitter.

120
00:06:43,940 --> 00:06:46,000
All the Twitter secrets.

121
00:06:46,000 --> 00:06:48,080
Tell us about—what is it like working at Twitter, 

122
00:06:48,080 --> 00:06:51,140
and particularly as a designer, what is like working there?

123
00:06:51,140 --> 00:06:54,630
>>Well, the design team at Twitter is currently around 40, 40 designers.

124
00:06:54,630 --> 00:06:59,790
It's a really passionate, talented group of people who all come from

125
00:06:59,790 --> 00:07:02,120
different walks of life, all over the country, 

126
00:07:02,120 --> 00:07:04,310
and we get together to solve big problems.

127
00:07:04,310 --> 00:07:08,180
And it's definitely very different than working in client services

128
00:07:08,180 --> 00:07:13,860
or an agency, but being surrounded by really smart people

129
00:07:13,860 --> 00:07:18,360
is wonderfully refreshing, and it's like a fountain.

130
00:07:18,360 --> 00:07:20,920
You take in so much from all these different designers,

131
00:07:20,920 --> 00:07:24,690
which allows there to be so much creativity to get back.

132
00:07:24,690 --> 00:07:28,910
>>So 40 designers for 140 characters.

133
00:07:28,910 --> 00:07:32,400
A lot of people have to be wondering what are all these people

134
00:07:32,400 --> 00:07:34,940
doing, and I know you can't reveal all the secrets, of course.

135
00:07:34,940 --> 00:07:39,270
But, so we're talking about different ways of maybe bringing Twitter

136
00:07:39,270 --> 00:07:44,180
to different parts of the world, different devices, different sorts of interfaces?

137
00:07:44,180 --> 00:07:46,580
>>Well, when I first applied, that was the first thing I thought.

138
00:07:46,580 --> 00:07:49,170
I was like, well what would I do at Twitter, it's only 140 characters.

139
00:07:49,170 --> 00:07:52,810
But when you start to really think about all the things

140
00:07:52,810 --> 00:07:56,900
that Twitter does, I mean Twitter is so many different things to so many different people

141
00:07:56,900 --> 00:08:02,380
all over the world, on different devices, and in so many different ways.

142
00:08:02,380 --> 00:08:04,820
You know, you have people in the Middle East who are using it 

143
00:08:04,820 --> 00:08:06,820
to communicate and start revolutions.

144
00:08:06,820 --> 00:08:10,670
I know people just down the street probably Twittering their lunch right now.

145
00:08:10,670 --> 00:08:14,200
I mean it could be anything to anyone, and so really trying to put together

146
00:08:14,200 --> 00:08:17,520
a team of smart people who can solve lots of different kinds of problems.

147
00:08:17,520 --> 00:08:20,510
I'm sure you could come up with a list right now of things that

148
00:08:20,510 --> 00:08:23,700
you thought—Why don't they do this, or how come this is this way?

149
00:08:23,700 --> 00:08:26,940
And I can assure you all those things are on a list for us, too.

150
00:08:26,940 --> 00:08:30,110
And it takes a lot of people to try and accomplish all those things.

151
00:08:30,110 --> 00:08:34,620
>>So parting thoughts: Advice for designers.

152
00:08:34,620 --> 00:08:37,320
Now designers that are out there, if they're watching this interview, 

153
00:08:37,330 --> 00:08:39,860
they already heard you talk about some of the ways you can gain

154
00:08:39,860 --> 00:08:43,210
the trust of clients, and kind of this philosophy of

155
00:08:43,210 --> 00:08:45,860
sharing and collaborating and working together.

156
00:08:45,860 --> 00:08:49,720
What other keys are there out there 

157
00:08:49,720 --> 00:08:52,250
for people who want to get into the design game?

158
00:08:52,250 --> 00:08:54,640
>>Well, there's quite a few things.

159
00:08:54,640 --> 00:08:59,600
I think, for one, I've seen a lot of designers who get right out school lately

160
00:08:59,600 --> 00:09:03,490
and think that their design career is a sprint.

161
00:09:03,490 --> 00:09:06,910
Like, let's get to the end right away, let's do these crazy big projects,

162
00:09:06,910 --> 00:09:11,290
and I would—my first piece of advice would be to

163
00:09:11,290 --> 00:09:14,370
see it as a marathon, like take on some of those harder projects.

164
00:09:14,370 --> 00:09:18,190
Do some things that may not feel comfortable or right.

165
00:09:18,190 --> 00:09:21,610
Try making a responsive website for yourself.

166
00:09:21,610 --> 00:09:24,110
And then try making it again. And then do it again.

167
00:09:24,110 --> 00:09:27,470
And do some things that may not necessarily seem like short-term gains,

168
00:09:27,470 --> 00:09:32,160
but really do them to make yourself feel uncomfortable,

169
00:09:32,160 --> 00:09:35,710
and do the hard work to learn things for the long term.

170
00:09:35,710 --> 00:09:37,780
So that would be my first piece of advice.

171
00:09:37,780 --> 00:09:39,830
Another thing would be to just have fun.

172
00:09:39,830 --> 00:09:42,320
Like really don't take your work too seriously.

173
00:09:42,320 --> 00:09:46,700
Have fun and learn from the people around you.

174
00:09:46,700 --> 00:09:51,030
It is—We're doing really important things, but at the end of the day,

175
00:09:51,030 --> 00:09:54,560
we all become designers because we love this stuff.

176
00:09:54,560 --> 00:09:57,030
This industry is full of passionate people.

177
00:09:57,030 --> 00:09:59,540
Don't lose your passion, don't become jaded, 

178
00:09:59,540 --> 00:10:02,420
and really, really look at the bright side of things.

179
00:10:02,420 --> 00:10:06,360
>>Nice. Awesome. So how can we follow you from here out? Twitter?

180
00:10:06,770 --> 00:10:09,080
>>Yeah, on Twitter, I'm @samanthatoy.

181
00:10:09,080 --> 00:10:11,950
Toy is my middle name, so that would be probably 

182
00:10:11,950 --> 00:10:13,950
the best way to find me online.

183
00:10:13,950 --> 00:10:16,230
>>Okay, awesome. Well thank you for your time. Really appreciate it.

184
00:10:16,230 --> 00:10:20,210
Samantha Warren from Twitter. Thanks for joining us here on Treehouse Friends.

185
00:10:20,210 --> 00:10:22,210
See you next time.

186
00:10:22,210 --> 00:10:25,210
[Treehouse Friends]

187
00:10:25,210 --> 00:10:28,210
[? music ?]