WEBVTT

1
00:00:00.000 --> 00:00:06.560
One of the tools that we use a lot is FigJam, and we use this for breadboarding.

2
00:00:06.560 --> 00:00:10.480
So in this video, I'm going to show you a little bit of how we breadboard at Enovo and

3
00:00:10.480 --> 00:00:12.340
some of the tools that we are using.

4
00:00:12.340 --> 00:00:18.240
So if you look in here, I've got a FigJam set up here, you can just create a new, typically

5
00:00:18.240 --> 00:00:23.240
a new FigJam project to match the project that we're working on from Notion, just make

6
00:00:23.240 --> 00:00:27.000
sure those titles match exactly so it makes it easier for people to find.

7
00:00:27.000 --> 00:00:31.240
The other thing you can do is make sure that it's in one of our shared projects here.

8
00:00:31.240 --> 00:00:35.560
So we have a number of folders, and these are all shared with the teams so that everybody

9
00:00:35.560 --> 00:00:38.320
can access all of the files as you create them.

10
00:00:38.320 --> 00:00:40.400
We don't have to keep sharing each individual one.

11
00:00:40.400 --> 00:00:46.840
So some of the logic we use here is the color coding is we use orange to signify a place

12
00:00:46.840 --> 00:00:48.760
or a component.

13
00:00:48.760 --> 00:00:53.720
And this could be anything, it could be navigation bar, it could say, you know, a table, and

14
00:00:53.720 --> 00:00:56.160
then they could have different items in the table.

15
00:00:56.160 --> 00:01:01.600
And it could typically not be like a page level where you can do that, where you can

16
00:01:01.600 --> 00:01:03.160
say, hey, there's a login page.

17
00:01:03.160 --> 00:01:08.920
And then, you know, we've got maybe, yeah, this would be your email, password, and then

18
00:01:08.920 --> 00:01:13.320
like a login button, maybe there's a sign up button as well.

19
00:01:13.320 --> 00:01:18.000
So you'd click that sign up button, for example, you'd go to another place, which is, you know,

20
00:01:18.000 --> 00:01:22.520
whatever this piece is, and you'd keep kind of progressing through it like this.

21
00:01:22.520 --> 00:01:26.640
The idea is to use shorthand like this, where you don't have to write out every single thing

22
00:01:26.640 --> 00:01:32.040
in the UI, we can do something like have like dot dot dot here just to signify that there's

23
00:01:32.040 --> 00:01:33.040
other stuff here.

24
00:01:33.040 --> 00:01:36.400
But the important things that we want to pay attention to is, you know, item one and two.

25
00:01:36.400 --> 00:01:41.840
And the other thing you can do is you can use a purple box like this to signify some

26
00:01:41.840 --> 00:01:43.240
sort of logic.

27
00:01:43.240 --> 00:01:47.880
So if x is true, then also show item three, for example.

28
00:01:47.880 --> 00:01:51.640
And we like to do this, you know, organizing sort of a flow down here.

29
00:01:51.640 --> 00:01:57.280
And we may call this, you know, option A, and then say, hey, we actually have a different

30
00:01:57.280 --> 00:01:58.600
idea for this.

31
00:01:58.600 --> 00:02:02.440
Just take the whole thing and make option B and keep working through this.

32
00:02:02.440 --> 00:02:06.000
We may say, you know what, instead of this, we're going to, you know, work from this one.

33
00:02:06.000 --> 00:02:08.479
And you know, instead of this, we're going to do whatever.

34
00:02:08.479 --> 00:02:12.960
So kind of put them side by side, the goal is not to generate a perfectly, you know,

35
00:02:12.960 --> 00:02:15.120
a perfect breadboard right up front.

36
00:02:15.120 --> 00:02:19.600
It's more to get something out on paper and then iterate down, you know, to different

37
00:02:19.600 --> 00:02:20.760
options.

38
00:02:20.760 --> 00:02:24.500
We rarely use the breadboard as we get into the project.

39
00:02:24.500 --> 00:02:26.080
It's more to create a bunch of clarity.

40
00:02:26.080 --> 00:02:28.520
And then once we do that, we can move on.

41
00:02:28.520 --> 00:02:31.580
So the last piece here is just the database.

42
00:02:31.580 --> 00:02:34.640
So if you want to signify database, you can use this darker gray.

43
00:02:34.640 --> 00:02:39.320
And then you can specifically say, like, column one, two, three, like this.

44
00:02:39.320 --> 00:02:44.080
And it's a nice way to organize if you have this table, you know, now we're going to join

45
00:02:44.080 --> 00:02:46.360
this to that and so forth.

46
00:02:46.360 --> 00:02:48.640
We can kind of see how the database is structured.

47
00:02:48.640 --> 00:02:53.600
And a lot of times, especially if you're getting first time into a project, it's very helpful

48
00:02:53.600 --> 00:02:58.160
to just draw this thing out or have someone explain it or go through the database yourself

49
00:02:58.160 --> 00:03:01.320
or look through the code and just say, okay, now there's a table named this and there's

50
00:03:01.320 --> 00:03:02.320
these different fields.

51
00:03:02.320 --> 00:03:04.360
And like, how does this one connect to that?

52
00:03:04.360 --> 00:03:09.240
As you draw it, amazing amount of clarity will come just from you drawing out the process.

53
00:03:09.400 --> 00:03:13.840
So the same thing here is feels a little bit overly simplified.

54
00:03:13.840 --> 00:03:15.400
And like, do we really need to do this step?

55
00:03:15.400 --> 00:03:19.680
But so much time, so many times when we do this, we create an unbelievable amount of

56
00:03:19.680 --> 00:03:25.160
clarity when we're working, especially with clients and other stakeholders in the project.

57
00:03:25.160 --> 00:03:27.400
So this is, again, this is a whiteboard.

58
00:03:27.400 --> 00:03:31.720
So have things like, hey, if you've got a link out to V zero, like put a little link

59
00:03:31.720 --> 00:03:32.720
there.

60
00:03:32.720 --> 00:03:35.040
If you've got screenshots, you know, make this easy for yourself.

61
00:03:35.040 --> 00:03:40.280
If you've got a screenshot of the app, for example, you know, we head over to a dashboard

62
00:03:40.280 --> 00:03:45.320
like this and I want to screenshot this navigation, just bring it in and just paste it right over

63
00:03:45.320 --> 00:03:46.840
here and just have it off to the side.

64
00:03:46.840 --> 00:03:51.000
So if I'm building out this component, I can just glance at it and say, I've got these

65
00:03:51.000 --> 00:03:52.760
different buttons here.

66
00:03:52.760 --> 00:03:54.480
I don't have to keep flipping back and forth.

67
00:03:54.480 --> 00:03:59.440
So it's just a, a way to sort of organize like a, think of it like a virtual whiteboard,

68
00:03:59.440 --> 00:04:03.160
get all your ideas and thoughts down on, um, on the whiteboard.

69
00:04:03.160 --> 00:04:05.800
And then the team can look at it and we can kind of comment and share it.

70
00:04:05.800 --> 00:04:12.040
A lot of this time we do this breadboarding process live together, um, in the pairs, uh,

71
00:04:12.040 --> 00:04:13.600
or sometimes with a client.

72
00:04:13.600 --> 00:04:15.960
So just practice it, get good at it.

73
00:04:15.960 --> 00:04:19.200
Um, what I would love to do is, you know, when you're working on your first project,

74
00:04:19.200 --> 00:04:24.560
go ahead and breadboard your first project as much as you can just for the sake of practicing.

75
00:04:24.560 --> 00:04:27.920
And when you're done with that, um, you know, we can keep iterating, get, get better at

76
00:04:27.920 --> 00:04:28.920
it.

77
00:04:28.920 --> 00:04:32.320
So don't overthink this, uh, process is just getting the ideas down, but I wanted to show

78
00:04:32.480 --> 00:04:35.880
you some of these consistent little style, uh, choices that we've made.

79
00:04:35.880 --> 00:04:38.920
Just so when you're jumping between projects, you kind of know what things are.