WEBVTT 1 00:00:01.960 --> 00:00:03.880 All right, guys, welcome back. 2 00:00:03.920 --> 00:00:05.880 We're doing another team training here. 3 00:00:05.920 --> 00:00:08.340 I've got my team here on the call. 4 00:00:08.960 --> 00:00:11.040 And we're just going to share this with you guys 5 00:00:11.040 --> 00:00:13.060 if you guys want to tune in and learn about how 6 00:00:13.060 --> 00:00:15.680 we do projects at our agency. 7 00:00:16.400 --> 00:00:19.860 We've been leveraging ShapeUp from Basecamp. 8 00:00:20.000 --> 00:00:21.600 We've been learning a lot from Ryan Singer. 9 00:00:21.720 --> 00:00:24.140 We've been learning and diving into all the AI stuff. 10 00:00:24.200 --> 00:00:25.660 So we have a pretty unique system 11 00:00:25.660 --> 00:00:26.880 of how we manage projects. 12 00:00:27.240 --> 00:00:29.060 And in this video, I'm going to just kind of walk 13 00:00:29.060 --> 00:00:31.200 through, basically from top to bottom, 14 00:00:31.260 --> 00:00:34.800 I'm going to show you how we start a project at the company 15 00:00:34.800 --> 00:00:36.560 and then what are some of the tools we use, 16 00:00:36.820 --> 00:00:40.980 jump into FigJam, how we do task grids, how we use Notion. 17 00:00:41.320 --> 00:00:43.120 And so I'll show you some of the templates we use. 18 00:00:43.480 --> 00:00:45.980 And that way, if you're getting started either working 19 00:00:45.980 --> 00:00:47.520 with us or you're working on your own projects, 20 00:00:47.820 --> 00:00:49.020 this will hopefully help someone out. 21 00:00:49.340 --> 00:00:52.040 And you can always drop comments and questions below. 22 00:00:52.540 --> 00:00:54.100 So I'm going to share my screen. 23 00:00:54.800 --> 00:00:58.800 We typically kick off all of our projects in Notion. 24 00:00:59.980 --> 00:01:05.560 And so one thing that we have, so I'm going to share this here. 25 00:01:06.420 --> 00:01:10.480 And let's go to, give me one second. 26 00:01:11.180 --> 00:01:13.040 I'm going to pull up a graphic as well 27 00:01:13.040 --> 00:01:14.340 that I'd like to show you guys. 28 00:01:16.340 --> 00:01:18.820 So we kind of, if you heard about the hill chart 29 00:01:20.000 --> 00:01:21.780 from Basecamp, there's kind of like this, 30 00:01:22.020 --> 00:01:23.700 when you start a project, you're kind of starting out 31 00:01:23.700 --> 00:01:26.500 at the beginning and you're kind of working your way up 32 00:01:26.940 --> 00:01:29.320 into a kind of the top of the hill. 33 00:01:29.540 --> 00:01:32.280 And the way that we like to think about this 34 00:01:33.540 --> 00:01:36.760 is in this sort of hill chart example. 35 00:01:36.820 --> 00:01:41.780 So let me just make this in a quick board here for you guys. 36 00:01:43.560 --> 00:01:46.120 Sorry, that didn't sync quite well the way I wanted it to. 37 00:01:46.160 --> 00:01:46.880 But here we go. 38 00:01:49.400 --> 00:01:49.740 OK. 39 00:01:49.740 --> 00:01:53.500 So when I share this, I don't know if you guys can see that. 40 00:01:53.860 --> 00:01:55.820 It's a very simple graphic here. 41 00:01:55.840 --> 00:01:59.500 But basically what happens is we, in this uphill, 42 00:01:59.700 --> 00:02:01.220 this is where we kind of think about the project 43 00:02:01.220 --> 00:02:02.180 as framing and shaping. 44 00:02:02.300 --> 00:02:04.300 Now a lot of people go and do all the framing and shaping 45 00:02:04.300 --> 00:02:05.060 ahead of time. 46 00:02:06.020 --> 00:02:08.660 We like to make this part of the first part of the project. 47 00:02:08.740 --> 00:02:10.419 And we spend a lot more time on this 48 00:02:10.560 --> 00:02:13.220 than most other teams would. 49 00:02:13.740 --> 00:02:15.920 In fact, I think if you think of it more 50 00:02:15.920 --> 00:02:17.420 like the first half of the project 51 00:02:17.420 --> 00:02:18.800 is just getting clarity. 52 00:02:18.800 --> 00:02:20.940 Like getting clarity in all the different pieces. 53 00:02:21.520 --> 00:02:23.720 And it really frees you up to use a lot more time 54 00:02:23.720 --> 00:02:25.280 on this part of the process. 55 00:02:25.440 --> 00:02:27.660 So when we have a project come in, 56 00:02:27.660 --> 00:02:29.900 it's a client saying, hey, I would like to now 57 00:02:29.980 --> 00:02:31.940 have a way to manage quotas. 58 00:02:32.120 --> 00:02:35.280 Let's say for my CMS, I have a video streaming platform. 59 00:02:35.320 --> 00:02:40.260 I now want to have different tiers of subscriptions. 60 00:02:40.480 --> 00:02:42.360 And this person can upload five videos a month. 61 00:02:42.500 --> 00:02:43.780 This person can upload 10. 62 00:02:44.020 --> 00:02:44.480 OK, great. 63 00:02:44.480 --> 00:02:45.060 That's the problem. 64 00:02:45.120 --> 00:02:46.980 You kind of just little paragraph, a little nugget 65 00:02:46.980 --> 00:02:48.020 of what that is. 66 00:02:48.020 --> 00:02:50.640 So we would sit down on a call either with the client 67 00:02:50.640 --> 00:02:51.440 or just internally. 68 00:02:51.540 --> 00:02:52.980 And we'd start the framing process. 69 00:02:54.160 --> 00:02:56.480 We would start to figure out kind 70 00:02:56.480 --> 00:02:59.260 of how this project will work. 71 00:02:59.440 --> 00:03:03.600 And so we do that using this framing template up here. 72 00:03:03.840 --> 00:03:06.160 So I have when you hit a new project in Notion, 73 00:03:06.660 --> 00:03:09.640 we start to define things like what is the problem. 74 00:03:10.360 --> 00:03:12.420 And all we do here is we don't write paragraphs. 75 00:03:12.680 --> 00:03:13.960 We don't draw drawings. 76 00:03:14.040 --> 00:03:15.920 It's just bullet point format. 77 00:03:16.500 --> 00:03:19.540 Four to six bullets or so of what the actual problem is. 78 00:03:20.100 --> 00:03:21.460 Why are we actually doing this? 79 00:03:22.340 --> 00:03:22.720 Why now? 80 00:03:23.500 --> 00:03:25.120 Why do we care about this right now? 81 00:03:25.200 --> 00:03:27.260 Why is it urgent in this moment? 82 00:03:28.240 --> 00:03:31.120 What is the bottleneck that we're currently running into? 83 00:03:31.720 --> 00:03:33.300 And then we kind of focus on the outcome. 84 00:03:33.420 --> 00:03:36.520 Well, the outcome of this is not go add a UI 85 00:03:36.520 --> 00:03:38.560 to the app that does x, y, and z. 86 00:03:38.920 --> 00:03:41.200 You're thinking of outcomes in the terms 87 00:03:41.200 --> 00:03:45.260 of by the end of this project, I will now be able to do x. 88 00:03:45.260 --> 00:03:49.220 And so once we have a number of outcomes listed, 89 00:03:49.320 --> 00:03:51.580 it kind of frees us up to adjust the solutions 90 00:03:51.580 --> 00:03:52.620 as part of the projects. 91 00:03:52.660 --> 00:03:55.700 We don't know what the solution is at the moment just yet. 92 00:03:55.780 --> 00:03:58.960 So it gives us a lot of flexibility as a team 93 00:03:58.960 --> 00:04:02.320 to figure out solutions that then fill into that outcome. 94 00:04:03.160 --> 00:04:05.420 Next, we move into out of bounds. 95 00:04:05.560 --> 00:04:07.920 And we say like, hey, what are we not doing in this project? 96 00:04:08.060 --> 00:04:11.740 So you may say, hey, we're going to deal with this part 97 00:04:11.740 --> 00:04:14.640 of the, let's say this user quota or user kind 98 00:04:14.660 --> 00:04:17.060 of limitations for the content they're uploading 99 00:04:17.060 --> 00:04:18.459 for that example project. 100 00:04:18.820 --> 00:04:19.760 Things we're not doing, 101 00:04:19.880 --> 00:04:21.000 we're not going to integrate with Stripe. 102 00:04:21.079 --> 00:04:22.660 We're not going to integrate with this. 103 00:04:22.740 --> 00:04:24.040 We're not going to do this automation piece. 104 00:04:24.080 --> 00:04:25.200 We're kind of get really specific. 105 00:04:25.700 --> 00:04:29.180 And this is very good for the team who's building it. 106 00:04:29.180 --> 00:04:31.780 It's also extremely good for the stakeholders 107 00:04:31.780 --> 00:04:34.300 or the clients that are investing in this project 108 00:04:34.700 --> 00:04:35.820 because everything's great. 109 00:04:35.820 --> 00:04:37.640 And we like can complain about all the problems 110 00:04:37.640 --> 00:04:39.300 and then outcome like, yeah, great. 111 00:04:39.300 --> 00:04:40.520 We'll come up with a lot of list of things. 112 00:04:40.520 --> 00:04:42.120 But once you start getting into this, 113 00:04:42.620 --> 00:04:45.800 it forces you to take the kind of the scalpel 114 00:04:45.800 --> 00:04:48.320 and the knife, the project knife and kind of cut away 115 00:04:48.480 --> 00:04:50.100 at different parts of the project 116 00:04:50.100 --> 00:04:53.480 and get really, really clear about what we're not doing. 117 00:04:53.540 --> 00:04:55.580 And so much clarity will come out of this. 118 00:04:56.120 --> 00:04:58.840 And the whole process of how we think about this 119 00:04:58.840 --> 00:04:59.980 at our team here. 120 00:05:00.000 --> 00:05:04.240 here is we just like to go and be as totally upfront 121 00:05:04.340 --> 00:05:05.700 and honest about all the things. 122 00:05:06.100 --> 00:05:07.820 There are going to be things that are unclear 123 00:05:07.820 --> 00:05:09.400 in the project at some point. 124 00:05:09.760 --> 00:05:12.960 Try to surface all of that confusion, the vagueness, 125 00:05:13.200 --> 00:05:16.560 any of that, back into the first part of the project. 126 00:05:16.960 --> 00:05:18.960 So if you're looking back at the hill chart here, 127 00:05:19.180 --> 00:05:22.840 let's surface these things somewhere in here, 128 00:05:22.980 --> 00:05:24.960 in this early start of the project. 129 00:05:24.980 --> 00:05:26.280 Because what a lot of times happens, 130 00:05:26.760 --> 00:05:27.960 we take a little project requirements, 131 00:05:27.960 --> 00:05:29.500 we go straight to making tasks, 132 00:05:29.940 --> 00:05:31.340 we jump and we start building it. 133 00:05:31.340 --> 00:05:33.720 And then we're somewhere in the downhill over here. 134 00:05:33.720 --> 00:05:36.540 And then all of a sudden this clarity sort of pops up like, 135 00:05:36.820 --> 00:05:38.480 oh, the client thought we're going to do this, 136 00:05:38.580 --> 00:05:40.840 but actually the developers thought we're going to do that. 137 00:05:40.920 --> 00:05:43.840 And now there's friction and confusion. 138 00:05:44.440 --> 00:05:46.500 And at that point, we're like kind of through the budget, 139 00:05:46.760 --> 00:05:48.000 that's way more stressful. 140 00:05:48.760 --> 00:05:51.300 We're now putting, going into extra hours, 141 00:05:51.720 --> 00:05:53.260 the deadline's not getting met. 142 00:05:53.640 --> 00:05:55.180 So you definitely want to surface these things 143 00:05:55.180 --> 00:05:58.800 as early as possible. 144 00:05:59.980 --> 00:06:03.220 So the framing doc, when it's finished, will look like this. 145 00:06:03.800 --> 00:06:06.440 And we also do this, can do this in a notion, 146 00:06:06.840 --> 00:06:08.340 our FigJam board as well. 147 00:06:08.720 --> 00:06:09.540 Just sketch it out. 148 00:06:09.680 --> 00:06:13.020 This typically happens live with the client. 149 00:06:13.220 --> 00:06:15.980 We'll sort of interview them and any other stakeholders 150 00:06:15.980 --> 00:06:19.340 in the project and kind of uncover what this is. 151 00:06:19.660 --> 00:06:22.880 And so let me pull up a quick example maybe 152 00:06:22.880 --> 00:06:24.840 of what one of these might look like. 153 00:06:25.780 --> 00:06:30.220 So it could look like a document like this, 154 00:06:31.020 --> 00:06:33.520 where we have like the problem listed out, 155 00:06:33.700 --> 00:06:35.400 like here's the project outcome. 156 00:06:35.540 --> 00:06:37.360 And then we kind of talk through the different, 157 00:06:37.720 --> 00:06:38.400 like here's what we're not doing. 158 00:06:38.480 --> 00:06:39.880 So you can kind of put in a little board. 159 00:06:40.260 --> 00:06:42.080 This is very nice because you can move things 160 00:06:42.340 --> 00:06:43.200 around a little bit. 161 00:06:43.340 --> 00:06:43.940 It's very visual. 162 00:06:44.860 --> 00:06:48.120 And so I do like to do this live on the call in FigJam. 163 00:06:48.380 --> 00:06:51.280 And it's very helpful tool to use something visual 164 00:06:51.280 --> 00:06:52.700 like this when you're talking with clients 165 00:06:52.700 --> 00:06:53.700 who maybe aren't technical, 166 00:06:54.500 --> 00:06:56.680 just to kind of visually see what everybody's doing. 167 00:06:56.820 --> 00:06:58.620 And also if someone throws out an idea 168 00:06:58.620 --> 00:06:59.540 and we put it in the not, 169 00:06:59.800 --> 00:07:01.220 and then all of a sudden, no, we say, 170 00:07:01.260 --> 00:07:02.360 actually, we do want to take that. 171 00:07:02.480 --> 00:07:06.320 We can drag this not into the outcome 172 00:07:06.480 --> 00:07:07.960 and reword it a little bit. 173 00:07:08.360 --> 00:07:10.280 So it's very helpful because it feels very, 174 00:07:10.800 --> 00:07:13.260 there's a lot of clarity for all the people 175 00:07:13.260 --> 00:07:15.300 who are involved in that. 176 00:07:15.880 --> 00:07:18.180 And so once we're going through that, 177 00:07:18.280 --> 00:07:19.460 we've kind of get our document. 178 00:07:19.460 --> 00:07:22.620 And that's typically where we will get sort of final sign off 179 00:07:22.620 --> 00:07:24.520 from the two sides. 180 00:07:24.760 --> 00:07:26.120 So think of this like we've got, 181 00:07:26.380 --> 00:07:29.120 there's sort of two people, two sides to this. 182 00:07:29.300 --> 00:07:31.480 We have developers who are agreeing to, 183 00:07:31.660 --> 00:07:33.080 let's say two weeks for this project. 184 00:07:34.020 --> 00:07:35.840 And we also have a client who's agreeing 185 00:07:35.840 --> 00:07:37.320 to pay for two weeks. 186 00:07:37.400 --> 00:07:40.140 So we all know what two weeks costs in dollars. 187 00:07:40.360 --> 00:07:41.300 We know what it is in hours. 188 00:07:41.400 --> 00:07:43.020 We know what it is in terms of a timeline. 189 00:07:43.320 --> 00:07:45.700 So we're looking at the frames documents 190 00:07:45.700 --> 00:07:47.440 and we're looking at the appetite 191 00:07:47.440 --> 00:07:49.860 and we're all agreeing on both sides. 192 00:07:49.920 --> 00:07:51.220 So the developers are saying, yes, 193 00:07:51.220 --> 00:07:53.720 I will do all of this stuff we talked about for two weeks. 194 00:07:53.860 --> 00:07:55.200 And the clients are like, hey, 195 00:07:55.200 --> 00:07:57.600 I'm going to pay for all of that for two weeks. 196 00:07:57.640 --> 00:07:59.100 And then we're all agreeing to that little, 197 00:07:59.100 --> 00:08:01.300 that sort of container of a project. 198 00:08:02.760 --> 00:08:05.640 What we're not doing here is the reason we do it 199 00:08:05.640 --> 00:08:07.620 with the developers that way and the clients 200 00:08:07.740 --> 00:08:09.780 is because now there's like, 201 00:08:09.780 --> 00:08:12.240 we're equally sharing in the risk for the developers. 202 00:08:13.020 --> 00:08:16.260 What doesn't work well if like me as the third party 203 00:08:16.260 --> 00:08:19.480 as like a Novo says, yeah, we'll do that for two weeks, 204 00:08:19.560 --> 00:08:21.480 but the developer's not agreed to the two weeks. 205 00:08:21.880 --> 00:08:24.120 Now we kind of want people to have the, 206 00:08:24.400 --> 00:08:26.660 the developers have the buy-in of those two weeks 207 00:08:26.660 --> 00:08:28.640 so that they kind of win and lose with us. 208 00:08:28.640 --> 00:08:32.820 And it helps just take us that little extra push 209 00:08:32.820 --> 00:08:34.080 on getting extra clear. 210 00:08:34.080 --> 00:08:35.760 Cause we're sort of both all committed. 211 00:08:35.919 --> 00:08:37.539 The old parties are sort of committing 212 00:08:37.539 --> 00:08:39.039 to that budget equally. 213 00:08:39.700 --> 00:08:41.840 So once the frame doc is completed, 214 00:08:42.480 --> 00:08:46.600 that's where we will move into the breadboarding 215 00:08:46.600 --> 00:08:47.820 kind of getting even more clarity. 216 00:08:48.000 --> 00:08:49.360 So we do this little checklist. 217 00:08:49.560 --> 00:08:50.600 When you create a new project, 218 00:08:50.600 --> 00:08:53.040 you can go into the projects and hit new. 219 00:08:53.240 --> 00:08:54.920 And then this little checklist will be here. 220 00:08:54.960 --> 00:08:56.560 So you can kind of go through the frame doc 221 00:08:56.740 --> 00:08:57.840 like we just did. 222 00:08:57.920 --> 00:09:01.540 And then we would create what we call a breadboard 223 00:09:01.780 --> 00:09:06.100 and link it here in the breadboard link here in Notion. 224 00:09:06.280 --> 00:09:08.380 So Notion becomes kind of like our little dashboard 225 00:09:08.380 --> 00:09:10.740 and you can click out to other tools from here. 226 00:09:10.740 --> 00:09:14.960 And so the breadboard may look something like this. 227 00:09:15.440 --> 00:09:18.760 We use very simple process where maybe we're looking 228 00:09:18.760 --> 00:09:20.200 at something that says client files. 229 00:09:20.480 --> 00:09:22.580 Then there's like, you know, you click this dropdown 230 00:09:22.940 --> 00:09:23.940 in the dropdown. 231 00:09:24.640 --> 00:09:25.860 We have like a list of things 232 00:09:25.860 --> 00:09:27.440 that has two different things in it. 233 00:09:27.540 --> 00:09:29.740 You click on this and it takes you to an editor. 234 00:09:29.960 --> 00:09:32.380 So it's not a wireframe at all. 235 00:09:32.380 --> 00:09:34.180 This is not showing like, this is on the left. 236 00:09:34.380 --> 00:09:35.040 That's on the right. 237 00:09:35.280 --> 00:09:36.680 We're not showing UX. 238 00:09:37.000 --> 00:09:39.640 We're just showing like kind of the process 239 00:09:39.640 --> 00:09:41.780 of like this button is wired up to this. 240 00:09:42.080 --> 00:09:43.160 And this is a thing. 241 00:09:43.220 --> 00:09:44.080 It's literally just a thing. 242 00:09:44.180 --> 00:09:44.740 It's a component. 243 00:09:45.380 --> 00:09:45.940 It's a page. 244 00:09:46.180 --> 00:09:48.460 It's just a thing and with things underneath it. 245 00:09:48.980 --> 00:09:51.500 And you'll see a lot of times we'll do things like this. 246 00:09:51.760 --> 00:09:54.320 We'll use like a purple color to show logic. 247 00:09:54.440 --> 00:09:57.500 Like, hey, if this is requested, like then yes 248 00:09:57.500 --> 00:09:58.600 then we'll have a different flow. 249 00:09:58.800 --> 00:09:59.980 If not, then it'll do. 250 00:10:00.000 --> 00:10:00.640 something else. 251 00:10:01.420 --> 00:10:03.260 And then you can kind of wire this all up 252 00:10:03.740 --> 00:10:07.240 to how you would actually want to when you finish this thing, 253 00:10:07.260 --> 00:10:08.600 you basically come back to that. 254 00:10:08.960 --> 00:10:10.300 And that's sort of the flow there. 255 00:10:11.240 --> 00:10:13.920 I don't have in this one, but we'll also typically mock up 256 00:10:14.380 --> 00:10:15.980 a database structure as well. 257 00:10:16.400 --> 00:10:20.060 Sometimes we'll have a database just sitting there 258 00:10:20.060 --> 00:10:24.520 where we may show, here's the specific items we have, 259 00:10:24.860 --> 00:10:28.120 let's say, for we've got this table. 260 00:10:28.340 --> 00:10:29.080 We've got these items. 261 00:10:29.080 --> 00:10:31.780 We typically do the table little block in gray. 262 00:10:32.260 --> 00:10:35.440 And then we'll have that. 263 00:10:35.460 --> 00:10:37.240 So let me just pull that right back up again. 264 00:10:37.620 --> 00:10:39.440 Sorry, it's just glitched on me here. 265 00:10:40.660 --> 00:10:44.540 And so we'll have that table header in gray. 266 00:10:44.600 --> 00:10:47.380 And then the columns, so to speak, 267 00:10:47.380 --> 00:10:49.760 will be in different colors. 268 00:10:49.860 --> 00:10:52.320 I'll grab this one here so you can see something 269 00:10:52.320 --> 00:10:53.100 with the database. 270 00:10:54.720 --> 00:10:56.500 So this is a pretty complicated one. 271 00:10:56.500 --> 00:11:01.520 This is where we had kind of a table here 272 00:11:01.520 --> 00:11:02.820 with different things inside. 273 00:11:02.940 --> 00:11:05.580 And we were showing, here, this thing links to this. 274 00:11:05.920 --> 00:11:07.240 This transaction ID links to this. 275 00:11:07.640 --> 00:11:09.480 This loan ID links to this in this column. 276 00:11:09.700 --> 00:11:11.400 And we don't have to put every single column. 277 00:11:11.520 --> 00:11:13.980 You'll see a lot of times we'll just put dot, dot, dot. 278 00:11:14.080 --> 00:11:15.260 Like, there's other stuff in there. 279 00:11:15.540 --> 00:11:17.100 It doesn't matter right at this point. 280 00:11:17.180 --> 00:11:18.720 And what's helpful about doing it this way 281 00:11:18.720 --> 00:11:21.180 is we can have the breadboard up here 282 00:11:21.420 --> 00:11:23.300 and kind of how the app's going to flow. 283 00:11:23.560 --> 00:11:26.240 And then down here, we can have sort of the data flow 284 00:11:26.240 --> 00:11:26.640 as well. 285 00:11:26.680 --> 00:11:28.600 So we can reference those things back and forth. 286 00:11:29.020 --> 00:11:32.200 And once we finish all of that, we've kind of got it built out, 287 00:11:33.200 --> 00:11:35.080 other tools that we'll use here, if we're 288 00:11:35.080 --> 00:11:37.000 doing this with a client, can be particularly helpful 289 00:11:37.000 --> 00:11:39.660 if this is a brand new project for the developer 290 00:11:39.940 --> 00:11:41.500 or it's new for the client. 291 00:11:42.040 --> 00:11:48.860 One thing we will do is we will just create a heading here. 292 00:11:48.960 --> 00:11:51.020 That'll just kind of go to a little empty space. 293 00:11:51.140 --> 00:11:52.760 And we'll do that whole thing. 294 00:11:52.840 --> 00:11:53.940 And we'll just say current. 295 00:11:53.940 --> 00:11:56.200 And we'll map the entire workflow out 296 00:11:56.680 --> 00:11:58.040 how it works currently. 297 00:11:58.460 --> 00:11:59.920 And just going through that process, 298 00:11:59.980 --> 00:12:02.300 you'll get in a crazy amount of clarity 299 00:12:02.720 --> 00:12:05.100 seeing the different flows of how everything's connected. 300 00:12:05.500 --> 00:12:07.220 And then once you go through that, 301 00:12:07.660 --> 00:12:09.680 then you can just literally select that whole thing, 302 00:12:10.140 --> 00:12:11.060 paste it again, and say, OK, this 303 00:12:11.060 --> 00:12:12.400 is what the new thing is going to look like. 304 00:12:12.420 --> 00:12:13.540 So there's kind of like the old way. 305 00:12:13.780 --> 00:12:14.900 And then we put it right next to it. 306 00:12:14.960 --> 00:12:16.420 We put, like, here's what the new way is going to look. 307 00:12:16.420 --> 00:12:19.020 And we can kind of reference the current, go back and forth. 308 00:12:19.120 --> 00:12:20.740 And it creates a lot of clarity for people. 309 00:12:20.960 --> 00:12:23.400 Because just going through how something currently works, 310 00:12:23.400 --> 00:12:27.200 you'll be surprised at how clients, other stakeholders, 311 00:12:27.500 --> 00:12:29.860 people who have joined the team, new developers will be like, 312 00:12:29.920 --> 00:12:31.980 oh, I didn't even know that was connected to that. 313 00:12:32.800 --> 00:12:35.240 So these things are just we kind of gloss over 314 00:12:35.240 --> 00:12:36.160 in these projects. 315 00:12:36.360 --> 00:12:41.600 And this is why there's a lot of friction that 316 00:12:41.600 --> 00:12:42.440 happens later in the projects. 317 00:12:42.560 --> 00:12:43.380 We don't spend a lot of time. 318 00:12:43.640 --> 00:12:45.840 So I drew this this way because I 319 00:12:45.840 --> 00:12:48.260 want people to really take the time getting this. 320 00:12:48.260 --> 00:12:49.480 Because you can look at this and be like, man, 321 00:12:49.480 --> 00:12:51.960 that sounds like a lot of work to draw this whole thing. 322 00:12:51.960 --> 00:12:53.760 I thought I was going to be writing code. 323 00:12:54.360 --> 00:12:57.660 Well, this is kind of the freeform piece 324 00:12:57.660 --> 00:13:00.360 before we get to writing code to make sure we 325 00:13:00.360 --> 00:13:01.600 know exactly what to go build. 326 00:13:02.920 --> 00:13:05.180 And so framing there, this is what 327 00:13:05.180 --> 00:13:06.500 we call shaping, breadboarding. 328 00:13:06.920 --> 00:13:08.260 That's all part of the breadboarding 329 00:13:08.260 --> 00:13:09.540 is part of the shaping process. 330 00:13:10.080 --> 00:13:11.680 The other thing I would do in here 331 00:13:11.680 --> 00:13:13.960 is we say, like, creating AI prototypes. 332 00:13:14.520 --> 00:13:16.940 We'll have another video we can link to potentially 333 00:13:17.300 --> 00:13:21.540 that has how we use V0 to do really quick mockups. 334 00:13:21.540 --> 00:13:23.320 And we'll do these mockups sometimes 335 00:13:23.740 --> 00:13:25.460 on a Zoom call with a client. 336 00:13:25.700 --> 00:13:28.040 We may be talking about a little feature, 337 00:13:28.100 --> 00:13:30.320 like, what if we had a little button set that did x, y, 338 00:13:30.320 --> 00:13:30.640 and z. 339 00:13:31.120 --> 00:13:33.160 And then while we're on the call with them, 340 00:13:33.280 --> 00:13:35.680 we'll actually mock that up and show them. 341 00:13:35.820 --> 00:13:38.060 Because you can throw a little prompt into V0, 342 00:13:38.160 --> 00:13:39.860 and then we'll keep breadboarding and shaping. 343 00:13:39.920 --> 00:13:41.820 And then I'll just bring it in at some point. 344 00:13:42.300 --> 00:13:45.880 And I think we did this for this user role preset. 345 00:13:46.020 --> 00:13:47.300 Let me see if I can share this real quick, 346 00:13:47.740 --> 00:13:48.640 see if this will load. 347 00:13:49.140 --> 00:13:50.400 Yeah, we had this thing where you 348 00:13:50.400 --> 00:13:52.480 wanted to give people different roles. 349 00:13:53.060 --> 00:13:55.540 And maybe we hit Editor and a bunch of choose, 350 00:13:55.620 --> 00:13:57.500 and then you hit Administrator or Viewer. 351 00:13:57.900 --> 00:14:00.160 And so we were talking about it. 352 00:14:00.300 --> 00:14:01.000 I prompted it. 353 00:14:01.020 --> 00:14:01.940 This is not a lot. 354 00:14:02.000 --> 00:14:04.240 See, look, it's a little, like, hey, give me an example of this. 355 00:14:04.640 --> 00:14:05.640 It was a couple of sentences. 356 00:14:05.860 --> 00:14:08.700 And so I was able to do that on the call, throw this in there. 357 00:14:08.700 --> 00:14:11.300 And that all of a sudden quickly gave just a ton of clarity 358 00:14:11.780 --> 00:14:12.780 to everybody involved. 359 00:14:12.840 --> 00:14:14.720 Like, oh, OK, now I see what we're trying to build. 360 00:14:15.640 --> 00:14:17.060 Doesn't mean, and then we just throw this away. 361 00:14:17.060 --> 00:14:20.400 That's the key part of this is we're not going in here 362 00:14:20.400 --> 00:14:22.540 and being like, oh, cool, let's try to reuse some code. 363 00:14:23.080 --> 00:14:23.520 None of that. 364 00:14:23.800 --> 00:14:25.640 Just that has served its purpose. 365 00:14:25.780 --> 00:14:27.440 The little prototype is good. 366 00:14:27.500 --> 00:14:28.400 We can throw it away now. 367 00:14:28.940 --> 00:14:30.460 So that's why we like to do in this part 368 00:14:30.460 --> 00:14:32.520 to get just crazy levels of clarity 369 00:14:33.240 --> 00:14:35.540 and link to those V0 things if you want. 370 00:14:36.140 --> 00:14:36.680 You can do that. 371 00:14:37.160 --> 00:14:39.420 And then we're kind of ready to start working. 372 00:14:39.480 --> 00:14:40.320 So there's little prototypes. 373 00:14:40.440 --> 00:14:45.080 There could be you jumping into the code using whatever LLM 374 00:14:45.080 --> 00:14:48.540 to search the code base, find out what the tables are. 375 00:14:48.680 --> 00:14:51.420 Because if you have to go put this table together here 376 00:14:51.420 --> 00:14:53.320 and you're new to the project, this 377 00:14:53.320 --> 00:14:57.760 is a great question for Claude or for in Cursor. 378 00:14:57.900 --> 00:14:59.420 You can throw in some different prompts. 379 00:15:00.000 --> 00:15:02.460 Okay, tell me, like, tell me what the database structure is. 380 00:15:02.460 --> 00:15:06.600 Cause I actually need to draw these things out and just you having to like 381 00:15:06.600 --> 00:15:12.660 duplicate it and it feels really, um, maybe overly simplified or like, why 382 00:15:12.660 --> 00:15:13.900 are we doing this in 2025? 383 00:15:14.000 --> 00:15:16.100 Like we had an LLM could make this little diagram. 384 00:15:16.480 --> 00:15:17.400 That's not the point. 385 00:15:17.400 --> 00:15:21.080 The point is that you had to make the diagram and it forces you to kind of take 386 00:15:21.180 --> 00:15:26.220 notes and figure out what's in there and, and kind of go deep enough into it. 387 00:15:26.220 --> 00:15:28.920 Cause that's the problem with this stuff is you, you typically, we like to just, 388 00:15:28.920 --> 00:15:34.480 um, go pretty shallow and then, um, we don't really go deep enough to, so we 389 00:15:34.480 --> 00:15:36.640 don't really, really understand the details of it. 390 00:15:36.880 --> 00:15:41.280 Um, so once we reach this, this point of clarity, um, at this point is where we 391 00:15:41.280 --> 00:15:43.700 want to create a, what we call a task grid. 392 00:15:43.840 --> 00:15:47.280 So we've created the breadboard, we've linked it in here. 393 00:15:47.280 --> 00:15:50.600 We'll drop, you know, and all we do is we grab and grab the link like this. 394 00:15:50.600 --> 00:15:51.580 We'll paste it in there. 395 00:15:51.600 --> 00:15:53.700 And now I've got a little link to jump to it later. 396 00:15:54.380 --> 00:15:57.160 Um, we create a, what we call it as a task grid here. 397 00:15:57.160 --> 00:16:01.500 So this is just, um, an example here where we, it's essentially just a list of 398 00:16:01.760 --> 00:16:07.760 nine things again, um, where, uh, we take the different parts of the 399 00:16:07.760 --> 00:16:09.560 app and bring them into two sections. 400 00:16:09.560 --> 00:16:12.240 So here we're, we're having to like figure out payments work. 401 00:16:12.700 --> 00:16:15.320 Um, here we're going to track like user income and expenses. 402 00:16:15.400 --> 00:16:17.420 I know I'm jumping between lots of different projects. 403 00:16:17.440 --> 00:16:20.680 You can kind of see like, these are the scopes or the sections of the project. 404 00:16:20.800 --> 00:16:22.960 Um, here we've got some UI stuff to mock up. 405 00:16:22.960 --> 00:16:27.900 Um, I want to build this AI framing page that has these little things. 406 00:16:27.900 --> 00:16:30.540 And I have it, this is totally up to you. 407 00:16:30.800 --> 00:16:35.620 Um, it's really just for you, uh, as a developer and it's for the team to kind 408 00:16:35.620 --> 00:16:38.520 of glance at and be like, Hey, how far are we along? 409 00:16:38.560 --> 00:16:40.980 Cause anyone can look at this grid and be like, okay, cool. 410 00:16:41.000 --> 00:16:42.100 So you've done two things. 411 00:16:42.160 --> 00:16:44.940 You have two things in progress and bunch of stuff you haven't started yet. 412 00:16:45.260 --> 00:16:49.220 So it's pretty quick to see where the status of this project is. 413 00:16:49.220 --> 00:16:53.660 Um, and this is a helpful little tool and you can kind of rearrange these boxes. 414 00:16:53.660 --> 00:16:56.540 If you want, you can move, you know, tasks from one to the other. 415 00:16:56.960 --> 00:16:59.060 Um, and then you can just set the status of the box. 416 00:16:59.180 --> 00:16:59.780 Super simple. 417 00:17:00.300 --> 00:17:02.120 Um, you can do this in notion. 418 00:17:02.200 --> 00:17:03.180 You could do this in another project. 419 00:17:03.180 --> 00:17:06.420 I really like this because I don't have to scroll or go anywhere. 420 00:17:06.460 --> 00:17:09.640 I can just see everything on one page and it's very difficult. 421 00:17:09.640 --> 00:17:13.260 If you are looking at, you know, we do have some tasks options here in notion. 422 00:17:13.260 --> 00:17:14.640 You can track your tasks there. 423 00:17:14.760 --> 00:17:18.319 This is great for bugs or we're in clients are sending us a bunch of stuff. 424 00:17:18.319 --> 00:17:20.160 We can create tasks for each one. 425 00:17:21.040 --> 00:17:24.780 And, um, the, the difficulties here, it's hard to look at a list of all the tasks, 426 00:17:24.920 --> 00:17:26.200 even though it's a Kanban board. 427 00:17:27.180 --> 00:17:30.380 Um, you know, it's hard to look at all that and say, okay, are we halfway there? 428 00:17:30.400 --> 00:17:31.940 Are we two thirds of the way there? 429 00:17:31.940 --> 00:17:33.640 Where are we at with this project? 430 00:17:33.880 --> 00:17:35.880 But in this view, you can take something. 431 00:17:35.880 --> 00:17:38.440 I'll try to grab another, a little example here. 432 00:17:39.260 --> 00:17:41.960 Um, and, uh, I want to show you one here. 433 00:17:41.960 --> 00:17:43.640 I've got a few going at the same time. 434 00:17:44.980 --> 00:17:46.680 Um, so I think it's this one. 435 00:17:46.900 --> 00:17:47.300 Yeah. 436 00:17:47.300 --> 00:17:49.880 So this is a project I was working on this weekend and you can quickly 437 00:17:49.880 --> 00:17:53.140 see like most of this project is actually done and you can just visually 438 00:17:53.300 --> 00:17:56.060 see, you know, there's one little thing there, this has got a couple 439 00:17:56.060 --> 00:17:58.740 of little things here and then we're running, wrapping up the landing page. 440 00:17:58.740 --> 00:18:00.220 And then this whole project's ready to ship. 441 00:18:01.280 --> 00:18:04.480 Um, so you don't have to know what's all going on in the project or what 442 00:18:04.480 --> 00:18:05.760 the scope is, this is sort of taking. 443 00:18:06.240 --> 00:18:09.800 You know, the process after the breadboard make a little kind of scope 444 00:18:09.800 --> 00:18:13.640 out different sections that can be completed independently, and then we, 445 00:18:13.820 --> 00:18:15.520 um, start, you know, working our way through. 446 00:18:16.000 --> 00:18:19.900 I highly recommend to do the breadboarding and then the task grid. 447 00:18:20.020 --> 00:18:23.380 If you spend an hour and a half, two hours doing the breadboard, you can 448 00:18:23.460 --> 00:18:27.200 have the entire list of tasks in the next 10 to 15 minutes, and we've done 449 00:18:27.460 --> 00:18:32.280 that over and over again on calls where we will show, um, you know, we'll 450 00:18:32.280 --> 00:18:35.020 get to that point, we've all a little bit tired, we're kind of at the end. 451 00:18:35.100 --> 00:18:37.360 We're like, cool, let's look, pick this up tomorrow and we'll make the task. 452 00:18:37.360 --> 00:18:37.480 Great. 453 00:18:37.480 --> 00:18:38.460 It's like, let's just push through. 454 00:18:38.560 --> 00:18:43.300 Cause in 10 more minutes of having all those things kind of held in your brain 455 00:18:43.300 --> 00:18:46.340 of where all the pieces are to just jot everything down. 456 00:18:46.840 --> 00:18:50.740 And, um, when you're done with this, it should feel the feeling you should have. 457 00:18:50.740 --> 00:18:54.560 Uh, we heard this from Ryan Singer was you should have this thing of like, I 458 00:18:54.560 --> 00:18:56.080 just can't wait to go get started. 459 00:18:56.100 --> 00:18:57.780 Like I, this is so clear. 460 00:18:57.860 --> 00:18:59.060 I know exactly what to go build. 461 00:18:59.160 --> 00:19:01.160 Just, just let me get in there and start building it. 462 00:19:01.160 --> 00:19:04.740 Then, you know, we we've kind of got this really concrete, super 463 00:19:05.240 --> 00:19:07.380 clear, um, plan to go execute on. 464 00:19:07.780 --> 00:19:09.500 So that's where we build the task grid. 465 00:19:09.600 --> 00:19:11.760 And then, you know, we'll add some more pieces here. 466 00:19:11.760 --> 00:19:15.640 But, um, when we get started and we're kind of ready to start on that kind of 467 00:19:16.140 --> 00:19:20.120 top, um, you know, at the reached point of clarity, now we're going to go start 468 00:19:20.200 --> 00:19:23.140 building, that's where we would actually kick the project off to the client. 469 00:19:23.180 --> 00:19:27.220 Say, then we would start those two weeks, um, you know, counting from, from there. 470 00:19:27.620 --> 00:19:32.960 Um, and so, uh, that's, that's kind of how we would think about the project and, 471 00:19:33.640 --> 00:19:34.820 um, that that's it. 472 00:19:34.960 --> 00:19:38.840 So, um, I'm trying to think of anything else, uh, we'd want to touch on as far 473 00:19:38.840 --> 00:19:41.140 as the, you know, our specific systems go. 474 00:19:41.280 --> 00:19:42.500 Let me just talk about this. 475 00:19:43.000 --> 00:19:45.540 Um, typically the project will start, it'll be in framing. 476 00:19:46.200 --> 00:19:49.720 Um, then we can move it to shaping and then dev ready means we're in that point. 477 00:19:49.720 --> 00:19:52.480 We're in that like super clear, ready to go get started. 478 00:19:52.600 --> 00:19:53.380 Task grid's done. 479 00:19:53.580 --> 00:19:54.160 Everything's done. 480 00:19:54.740 --> 00:19:58.460 Um, when once put into dev ready, it means that it's, it's, you can 481 00:19:58.460 --> 00:19:59.760 start working the next day on it. 482 00:20:01.220 --> 00:20:03.980 Inbox, we typically reserve for just kind of ideas 483 00:20:03.980 --> 00:20:05.800 and things we haven't even started to frame. 484 00:20:06.340 --> 00:20:08.060 So that's typically where a client's on a call, 485 00:20:08.420 --> 00:20:09.780 they throw out something and they're like, 486 00:20:09.880 --> 00:20:11.380 hey, one day, it'd be cool to have this. 487 00:20:11.580 --> 00:20:14.080 Great, we throw it in the inbox, we save it there. 488 00:20:14.540 --> 00:20:15.860 In progress, easy. 489 00:20:16.080 --> 00:20:17.280 In review means we're done, 490 00:20:17.380 --> 00:20:19.040 we're just getting the client to sign off, blocked, 491 00:20:19.200 --> 00:20:20.920 clear what that is, complete. 492 00:20:20.980 --> 00:20:23.260 And then sometimes we just actually discard the projects 493 00:20:23.260 --> 00:20:25.620 and take them off of our board entirely. 494 00:20:26.700 --> 00:20:28.620 We have a billing status that's separate. 495 00:20:28.620 --> 00:20:30.440 Estimate means we're still figuring out 496 00:20:30.440 --> 00:20:32.020 all this framing, shaping side. 497 00:20:32.780 --> 00:20:34.620 Pending approval means we've sent it to the client. 498 00:20:35.260 --> 00:20:37.380 Sometimes they've approved, but they haven't paid yet, 499 00:20:37.380 --> 00:20:39.080 so that's in here, and then we've gotta pay it. 500 00:20:39.080 --> 00:20:40.940 So you can quickly see a lot of clarity 501 00:20:40.940 --> 00:20:45.020 for all people involved on what the status is here. 502 00:20:45.340 --> 00:20:48.620 Obviously, once things are approved or paid, 503 00:20:48.680 --> 00:20:50.020 you can definitely start working on it. 504 00:20:50.020 --> 00:20:53.280 But this helps know if we have shaped something, 505 00:20:53.340 --> 00:20:55.740 it's all clear, but the client hasn't said yes, 506 00:20:55.740 --> 00:20:57.800 you can kind of see like, oh, this is pending approval, 507 00:20:57.800 --> 00:20:59.360 and this is dev ready, 508 00:20:59.700 --> 00:21:02.080 means you actually can't start working on this. 509 00:21:02.180 --> 00:21:04.440 But if it was approved, you can start working on it. 510 00:21:04.440 --> 00:21:05.940 If it's paid, obviously, you can start working on it. 511 00:21:07.060 --> 00:21:08.320 So just really, really clear. 512 00:21:08.800 --> 00:21:10.660 There's everybody knows what is going on. 513 00:21:10.760 --> 00:21:12.340 And the last thing here, we'll have a little, 514 00:21:12.660 --> 00:21:15.860 if you slide the sidebar out, you can hit the dates here, 515 00:21:16.260 --> 00:21:17.060 add the end dates. 516 00:21:17.200 --> 00:21:19.180 Let's say we're gonna start on this date, 517 00:21:20.720 --> 00:21:23.520 so we'll say we start today and we'll end in two weeks. 518 00:21:24.200 --> 00:21:27.800 And what happens here, once you set that start and end date, 519 00:21:28.060 --> 00:21:30.620 your schedule will show you what's going on here. 520 00:21:30.620 --> 00:21:34.180 So you can see that, hey, we have 13 days left in this. 521 00:21:34.260 --> 00:21:36.680 And then the budget will also start sinking immediately 522 00:21:36.680 --> 00:21:37.580 once you use toggle. 523 00:21:38.000 --> 00:21:40.460 So you'll actually see that budget start to fill up 524 00:21:40.460 --> 00:21:43.120 based on the hours, and it's using this appetite here, 525 00:21:43.140 --> 00:21:46.340 which you can set any of those scale weeks, 526 00:21:46.380 --> 00:21:47.380 we only go one through six. 527 00:21:47.600 --> 00:21:48.780 So if I change it to two, 528 00:21:48.880 --> 00:21:50.820 the budget will adjust accordingly, 529 00:21:51.220 --> 00:21:52.360 and it tracks time in toggle, 530 00:21:52.360 --> 00:21:54.340 and toggle feeds back into Notion automatically. 531 00:21:54.340 --> 00:21:55.720 So you can, in real time, 532 00:21:55.840 --> 00:21:58.220 see what the status of the budget is there. 533 00:21:58.520 --> 00:22:00.540 So that's our whole little template. 534 00:22:00.740 --> 00:22:01.500 Hope that's helpful. 535 00:22:02.080 --> 00:22:04.000 We'll drop some links to the templates below, 536 00:22:04.480 --> 00:22:06.280 or if you guys are watching this 537 00:22:06.280 --> 00:22:08.360 and you're not on our team yet, but you'd like to be, 538 00:22:08.820 --> 00:22:10.600 there's always a option to, 539 00:22:11.340 --> 00:22:13.060 in the comments here, in the description there, 540 00:22:13.060 --> 00:22:14.820 you can apply and work with us. 541 00:22:14.900 --> 00:22:16.840 So we're gonna jump over to the team now 542 00:22:16.840 --> 00:22:18.600 and do some internal discussion on this. 543 00:22:18.920 --> 00:22:20.760 I just wanted to share this with you guys, 544 00:22:20.760 --> 00:22:22.220 and we'll catch you on the next one.