1
00:00:00,390 --> 00:00:01,530
Hey, everyone, and welcome back.

2
00:00:01,560 --> 00:00:06,870
So we just spoke briefly about, like, you know, exporting our designs, showing off our beautiful

3
00:00:06,870 --> 00:00:09,120
design work and, you know, stuff like that.

4
00:00:09,480 --> 00:00:12,480
But really, that's not what's going to get you a job.

5
00:00:12,630 --> 00:00:17,960
People are going to hire you as a UX, UI designer, programmer, whatever you want to call that position.

6
00:00:18,180 --> 00:00:22,620
They want to hire you for your brain, not just because you can create beautiful designs, but because

7
00:00:22,620 --> 00:00:26,890
you can think through different types of problems and come up with great solutions.

8
00:00:27,420 --> 00:00:33,330
Now, what's the best way to show that it's through an actual website or a portfolio site that you can

9
00:00:33,330 --> 00:00:36,950
hand off after an interview or before an interview or during an interview?

10
00:00:37,290 --> 00:00:40,680
It's the best way for you to get yourself a position.

11
00:00:41,160 --> 00:00:49,260
And when you show off your work on your website or your portfolio, you don't want to just show imagery.

12
00:00:50,160 --> 00:00:54,420
You want to talk about what you did on that specific project.

13
00:00:54,690 --> 00:01:00,150
What was the problem, maybe the type of research that you conducted your process?

14
00:01:00,390 --> 00:01:06,080
I can't stress how important process is if you just showed how you got to the end.

15
00:01:06,510 --> 00:01:09,290
Nobody is going to hire you for a good position.

16
00:01:09,780 --> 00:01:13,290
People really want to know what you did in order to get to the end.

17
00:01:14,190 --> 00:01:19,560
So let's take a look at a bunch of different portfolio sites that I have here that are actually done

18
00:01:19,560 --> 00:01:20,160
really well.

19
00:01:20,490 --> 00:01:25,080
I mean, you'll notice that this one over here by Ventana Pi is very, very simple.

20
00:01:25,090 --> 00:01:31,920
She's a senior product designer at Spotify and literally only three projects she's chosen.

21
00:01:32,850 --> 00:01:35,160
And if you look at them, they're not flashy, really.

22
00:01:35,400 --> 00:01:37,740
I mean, there's nothing really crazy going on here.

23
00:01:37,740 --> 00:01:42,330
But you can tell there's different types of interactions that she wants to talk about, different types

24
00:01:42,330 --> 00:01:43,710
of problems she wants to talk about.

25
00:01:43,890 --> 00:01:47,100
And she's kind of broken them up into these things that we call a case studies.

26
00:01:47,550 --> 00:01:51,300
And that is the approach that I definitely would take and I've taken in the past.

27
00:01:51,600 --> 00:01:55,980
And it's been incredibly successful for me and it's been incredibly successful for colleagues I've worked

28
00:01:55,980 --> 00:01:56,690
with in the past.

29
00:01:57,090 --> 00:01:58,680
So let's jump right in.

30
00:01:58,860 --> 00:02:00,810
So as you can tell, it's very simple.

31
00:02:00,810 --> 00:02:03,360
Portfolio website only work and about we have up here.

32
00:02:03,750 --> 00:02:10,710
If we go into like reading this case study, a jump right in, we can see like what data was the name

33
00:02:10,710 --> 00:02:11,520
of the case study.

34
00:02:11,580 --> 00:02:16,920
We see how they've kind of like laid out all the different types of kind of components that they've

35
00:02:16,920 --> 00:02:18,120
designed over here.

36
00:02:18,120 --> 00:02:21,710
I don't know what this means yet, but it's very kind of visually interesting.

37
00:02:22,770 --> 00:02:27,600
So they have this big statement over here providing feedback like markups and commenting is a key use

38
00:02:27,600 --> 00:02:28,890
case for collaboration.

39
00:02:28,890 --> 00:02:30,720
But this functionality was limited in box.

40
00:02:30,930 --> 00:02:34,230
How could we increase engagement and promote the feedback loop inbox?

41
00:02:34,440 --> 00:02:39,450
I led the redesign to extend our feature set to allow users to create annotations.

42
00:02:39,780 --> 00:02:43,020
So already, right off the bat, she's told us what the problem is.

43
00:02:43,140 --> 00:02:49,200
What she's plan to do with her kind of role is so she's the lead and solo designer for discovery research,

44
00:02:49,200 --> 00:02:51,090
design, animation and testing.

45
00:02:51,450 --> 00:02:53,280
She's also listed the entire team.

46
00:02:53,280 --> 00:02:59,010
So if people want to kind of maybe reach out to these people afterwards, but it also gives credit.

47
00:02:59,010 --> 00:03:03,600
It shows that, you know, projects we rarely kind of work on them alone, even though you may be the

48
00:03:03,600 --> 00:03:04,320
sole designer.

49
00:03:04,320 --> 00:03:07,800
There's so many other people on that project that kind of lend their hand.

50
00:03:07,800 --> 00:03:09,840
And it's good to give credit where credit is due.

51
00:03:10,260 --> 00:03:14,340
If a developer came up with a solution and you helped them get there, that's perfect.

52
00:03:14,340 --> 00:03:19,810
Or maybe you want to mention that you and the developer really worked closely to build empathy across

53
00:03:19,810 --> 00:03:21,510
the team for your user base.

54
00:03:21,930 --> 00:03:28,380
So, I mean, this really kind of lets the person know who's viewing this, that you're a team player,

55
00:03:28,410 --> 00:03:34,470
you have a certain role within that product team and they know exactly what you've done on this project,

56
00:03:34,470 --> 00:03:40,710
not just showing them like a screenshot like this and expecting one of us or the viewer to kind of come

57
00:03:40,710 --> 00:03:41,190
up with that.

58
00:03:41,610 --> 00:03:46,980
So we have a little quick animation here, just showcasing the interactions that are happening, which

59
00:03:46,980 --> 00:03:47,640
is really nice.

60
00:03:47,640 --> 00:03:51,240
So you can do that with any type of screen recorder like screen flow.

61
00:03:51,510 --> 00:03:56,430
You can even use like a figure to help record this and you can cut that down with something like stream

62
00:03:56,430 --> 00:03:56,730
flow.

63
00:03:57,510 --> 00:04:02,670
So once again, you have like the problem statement and then she starts to write about it a little bit

64
00:04:02,670 --> 00:04:07,860
more in depth and she's showing different portions of her solution and with a little annotations on

65
00:04:07,860 --> 00:04:11,700
the bottom, just explaining the actual annotation that she came up with.

66
00:04:12,730 --> 00:04:18,850
So here we go once again, just talking about green annotation, we have different types of annotations.

67
00:04:22,020 --> 00:04:27,450
So this is a really, really good way to show off a case study, once again, we also have research

68
00:04:27,480 --> 00:04:29,430
exploring all that kind of stuff.

69
00:04:30,530 --> 00:04:37,360
Process, we dive deep into her general way that she iterated and got from point A all the way to like

70
00:04:37,400 --> 00:04:38,450
maybe point B.

71
00:04:39,520 --> 00:04:40,240
Over here.

72
00:04:42,010 --> 00:04:46,630
So this is really a great way to show that, you know, you didn't just jump straight to high fidelity

73
00:04:46,630 --> 00:04:50,230
or just settle on one solution, you had a solution.

74
00:04:51,910 --> 00:04:53,150
And you kind of worked on it.

75
00:04:53,170 --> 00:04:54,930
This is another perfect example of that.

76
00:04:54,970 --> 00:05:00,670
You have your V1 and the reasons they didn't work and then you got eventually to an MVP that you're

77
00:05:00,670 --> 00:05:01,240
happy with.

78
00:05:01,240 --> 00:05:05,830
If you could see, like, look at this one all the way to the MVP, lots has changed.

79
00:05:05,830 --> 00:05:11,570
And she showed me what exactly went wrong with each type of prototype and how she kept on iterating

80
00:05:11,570 --> 00:05:15,100
in order to get to the MVP and then eventually over time to the final.

81
00:05:15,970 --> 00:05:21,060
So this is definitely an amazing, amazing way to show off your work.

82
00:05:21,070 --> 00:05:22,120
It's really in depth.

83
00:05:22,120 --> 00:05:26,770
It shows me that you were thinking about a lot of different things here and not just about like beautiful

84
00:05:26,770 --> 00:05:27,370
designs.

85
00:05:28,510 --> 00:05:31,350
So here's Kos's Corelli's in.

86
00:05:31,360 --> 00:05:36,520
She's a product designer or I'm not sure if it's Shiraki, but they're a product designer currently

87
00:05:36,520 --> 00:05:38,890
working on a developer experience at Stripe.

88
00:05:38,890 --> 00:05:42,490
So another big company, once again, not a lot of projects.

89
00:05:43,910 --> 00:05:45,170
There's several projects here.

90
00:05:45,890 --> 00:05:48,970
They have an archive, but their big projects are at the top.

91
00:05:48,980 --> 00:05:49,590
So let's go into.

92
00:05:49,690 --> 00:05:52,670
I think it's pronounced Kujo, the Internet security.

93
00:05:53,030 --> 00:05:55,210
I like this nice little gift going on over here.

94
00:05:55,220 --> 00:05:56,410
So let's go round here.

95
00:05:56,810 --> 00:05:59,640
And one thing you'll notice with these websites, they're very simple.

96
00:05:59,660 --> 00:06:05,600
So, once again, like the role, maybe a little bit of the problem use case around this, the results.

97
00:06:07,280 --> 00:06:12,880
So this person is an actual product designer where they're also developing possibly physical products.

98
00:06:15,420 --> 00:06:17,040
So this is for the Kujo AB.

99
00:06:18,170 --> 00:06:24,650
And once again, just going through what is happening with this application, what they plan to do with

100
00:06:24,650 --> 00:06:31,250
it, they have these screenshots using just the mock ups just to kind of help represent and better display

101
00:06:31,250 --> 00:06:31,850
their work.

102
00:06:35,910 --> 00:06:38,650
And once again, like sometimes some things are out of markups.

103
00:06:38,670 --> 00:06:42,510
I mean, it doesn't really matter what you choose, but what thing I really like is there's kind of

104
00:06:42,510 --> 00:06:44,070
taking me through their process.

105
00:06:44,850 --> 00:06:46,550
They're taking me through the flow here.

106
00:06:47,900 --> 00:06:54,140
So also bringing out their design system a bit more in explaining the reasoning behind that.

107
00:06:56,430 --> 00:07:01,230
An easy way to get through another project will go through one more.

108
00:07:02,350 --> 00:07:03,440
This is Ryan Scott.

109
00:07:03,790 --> 00:07:08,550
So Ryan Scott is another designer who worked for some pretty big companies here.

110
00:07:08,560 --> 00:07:15,310
We have Airbnb, Jordache like look, once again, they're just giving you a really quick understanding

111
00:07:15,310 --> 00:07:16,590
of the project.

112
00:07:16,600 --> 00:07:19,360
It doesn't have to be, like, crazy with their interactions.

113
00:07:19,360 --> 00:07:22,420
As you can tell, these people are really established, are really good in their field.

114
00:07:22,750 --> 00:07:25,350
They don't need to sell you on crazy interactions on their website.

115
00:07:25,690 --> 00:07:26,710
Nobody really does.

116
00:07:26,710 --> 00:07:29,010
Your work should really do the talking for you.

117
00:07:29,380 --> 00:07:29,890
So.

118
00:07:31,200 --> 00:07:35,850
They have something simple here, and if you're really into writing on something like medium, people

119
00:07:35,880 --> 00:07:38,240
often kind of poster articles and what they're doing.

120
00:07:38,250 --> 00:07:42,030
If you have talks that you want to kind of showcase, you can do that here as well.

121
00:07:42,700 --> 00:07:45,120
So we'll just pick on one project here.

122
00:07:45,750 --> 00:07:51,370
So big statement over here, setting Airbnb up for its next decade of growth.

123
00:07:51,370 --> 00:07:56,390
So it just said something like mobile experience for Airbnb, like, that's cool.

124
00:07:56,400 --> 00:07:57,780
I mean, that's a big name.

125
00:07:58,050 --> 00:07:59,430
But tell me a little bit more.

126
00:07:59,430 --> 00:08:01,340
Get me excited about what I'm able to see.

127
00:08:01,530 --> 00:08:03,060
So nice placement of an image.

128
00:08:04,140 --> 00:08:10,290
We have a challenge statement, his approach, so like this one's even broken down to the way he specifically

129
00:08:10,290 --> 00:08:13,760
approached everything and we have some solutions here.

130
00:08:13,770 --> 00:08:16,170
So a simpler, unified Checo flow.

131
00:08:17,870 --> 00:08:22,540
And like I said, designers don't need to be crazy flashy, they don't need to be like, oh, this world.

132
00:08:22,550 --> 00:08:24,980
I mean, at the end of the day, designs need to be functional.

133
00:08:24,980 --> 00:08:26,090
They need to solve a problem.

134
00:08:26,090 --> 00:08:30,980
And there's a reason why so many people use certain types of apps, because it's just that they make

135
00:08:30,980 --> 00:08:34,520
their interactions in their micro interactions really, really delightful.

136
00:08:34,820 --> 00:08:37,280
They make the designs really easy to use.

137
00:08:37,280 --> 00:08:39,260
They aren't bogged down by certain things.

138
00:08:39,740 --> 00:08:40,940
So this is an example of that.

139
00:08:40,950 --> 00:08:46,850
So we have the old iOS approach, the old mobile web approach, and then this is the new approach entirely.

140
00:08:47,960 --> 00:08:49,100
So really simple.

141
00:08:50,190 --> 00:08:56,130
And that's what I really want to showcase here, is that all these people, they have all these different

142
00:08:56,130 --> 00:09:00,690
types of projects they want to showcase and they aren't necessarily showing like 40 different projects.

143
00:09:00,690 --> 00:09:02,490
They're showing one, two or three.

144
00:09:02,790 --> 00:09:07,790
And they're showing like real work, not glorified work or anything like that.

145
00:09:07,800 --> 00:09:09,090
That's kind of like propped up.

146
00:09:09,090 --> 00:09:15,840
And like just for visual aesthetics, they're actually showing you their entire process, what was before

147
00:09:15,840 --> 00:09:20,040
and what you replaced it with or even showing their figure, the components here that they've created

148
00:09:20,040 --> 00:09:21,130
for like a design system.

149
00:09:21,480 --> 00:09:24,180
So, I mean, they're actually showing you their their process.

150
00:09:24,180 --> 00:09:30,090
And what I really liked over here, especially with this one, is like just showing the versions and

151
00:09:30,090 --> 00:09:36,270
the building up of that, showing you that they had something before and over time, over the course

152
00:09:36,270 --> 00:09:40,740
of a project, through feedback and iteration, they finally got to like an MVP that they launch and

153
00:09:40,740 --> 00:09:42,360
then iterated on to get their final.

154
00:09:42,840 --> 00:09:47,880
So when you approach a case study, don't think about it as just showing off like beautiful work, show

155
00:09:47,880 --> 00:09:48,800
off your process.

156
00:09:48,810 --> 00:09:50,940
Tell me the challenge of the project.

157
00:09:50,940 --> 00:09:52,370
Tell me your role in the project.

158
00:09:52,380 --> 00:09:54,380
Tell me your approach, your process.

159
00:09:54,750 --> 00:10:00,840
Tell me how you got to certain solutions and maybe tell me what the old solutions look like, why this

160
00:10:00,840 --> 00:10:01,550
one's better.

161
00:10:01,740 --> 00:10:02,910
Show me the research.

162
00:10:02,910 --> 00:10:04,080
I want to know everything.

163
00:10:04,080 --> 00:10:05,370
I want to know what you did.

164
00:10:05,650 --> 00:10:08,850
Now, give me a good understanding that, hey, this person is very thoughtful.

165
00:10:08,850 --> 00:10:10,320
They're incredibly thoughtful designer.

166
00:10:10,320 --> 00:10:11,580
They're thinking about everything.

167
00:10:11,880 --> 00:10:13,050
They're showing me everything.

168
00:10:13,320 --> 00:10:18,240
They are thinking about all the different types of ways that this solution can be successful.

169
00:10:18,930 --> 00:10:25,260
So go out there, create great content for your portfolio website and just be very mindful of the type

170
00:10:25,260 --> 00:10:30,750
of things you put on there, because this kind of stuff is incredibly powerful for somebody who comes

171
00:10:30,750 --> 00:10:32,610
in for like a design position.

172
00:10:32,880 --> 00:10:36,780
I would definitely hire somebody like this, even if the design is not necessarily beautiful because

173
00:10:36,780 --> 00:10:37,950
you can teach that kind of stuff.

174
00:10:37,950 --> 00:10:40,650
That's all very trendy and it's all trend based.

175
00:10:40,950 --> 00:10:45,690
But you can't really, like, teach somebody to be really passionate about a very successful solution.

176
00:10:45,810 --> 00:10:48,060
You can teach somebody that, but it takes a long time.

177
00:10:48,060 --> 00:10:52,470
And this is just very, very, very thorough work.

178
00:10:52,950 --> 00:10:55,890
So be very thoughtful as a designer.