One of the tools that we use a lot is FigJam, and we use this for breadboarding.
So in this video, I'm going to show you a little bit of how we breadboard at Enovo and
some of the tools that we are using.
So if you look in here, I've got a FigJam set up here, you can just create a new, typically
a new FigJam project to match the project that we're working on from Notion, just make
sure those titles match exactly so it makes it easier for people to find.
The other thing you can do is make sure that it's in one of our shared projects here.
So we have a number of folders, and these are all shared with the teams so that everybody
can access all of the files as you create them.
We don't have to keep sharing each individual one.
So some of the logic we use here is the color coding is we use orange to signify a place
or a component.
And this could be anything, it could be navigation bar, it could say, you know, a table, and
then they could have different items in the table.
And it could typically not be like a page level where you can do that, where you can
say, hey, there's a login page.
And then, you know, we've got maybe, yeah, this would be your email, password, and then
like a login button, maybe there's a sign up button as well.
So you'd click that sign up button, for example, you'd go to another place, which is, you know,
whatever this piece is, and you'd keep kind of progressing through it like this.
The idea is to use shorthand like this, where you don't have to write out every single thing
in the UI, we can do something like have like dot dot dot here just to signify that there's
other stuff here.
But the important things that we want to pay attention to is, you know, item one and two.
And the other thing you can do is you can use a purple box like this to signify some
sort of logic.
So if x is true, then also show item three, for example.
And we like to do this, you know, organizing sort of a flow down here.
And we may call this, you know, option A, and then say, hey, we actually have a different
idea for this.
Just take the whole thing and make option B and keep working through this.
We may say, you know what, instead of this, we're going to, you know, work from this one.
And you know, instead of this, we're going to do whatever.
So kind of put them side by side, the goal is not to generate a perfectly, you know,
a perfect breadboard right up front.
It's more to get something out on paper and then iterate down, you know, to different
options.
We rarely use the breadboard as we get into the project.
It's more to create a bunch of clarity.
And then once we do that, we can move on.
So the last piece here is just the database.
So if you want to signify database, you can use this darker gray.
And then you can specifically say, like, column one, two, three, like this.
And it's a nice way to organize if you have this table, you know, now we're going to join
this to that and so forth.
We can kind of see how the database is structured.
And a lot of times, especially if you're getting first time into a project, it's very helpful
to just draw this thing out or have someone explain it or go through the database yourself
or look through the code and just say, okay, now there's a table named this and there's
these different fields.
And like, how does this one connect to that?
As you draw it, amazing amount of clarity will come just from you drawing out the process.
So the same thing here is feels a little bit overly simplified.
And like, do we really need to do this step?
But so much time, so many times when we do this, we create an unbelievable amount of
clarity when we're working, especially with clients and other stakeholders in the project.
So this is, again, this is a whiteboard.
So have things like, hey, if you've got a link out to V zero, like put a little link
there.
If you've got screenshots, you know, make this easy for yourself.
If you've got a screenshot of the app, for example, you know, we head over to a dashboard
like this and I want to screenshot this navigation, just bring it in and just paste it right over
here and just have it off to the side.
So if I'm building out this component, I can just glance at it and say, I've got these
different buttons here.
I don't have to keep flipping back and forth.
So it's just a, a way to sort of organize like a, think of it like a virtual whiteboard,
get all your ideas and thoughts down on, um, on the whiteboard.
And then the team can look at it and we can kind of comment and share it.
A lot of this time we do this breadboarding process live together, um, in the pairs, uh,
or sometimes with a client.
So just practice it, get good at it.
Um, what I would love to do is, you know, when you're working on your first project,
go ahead and breadboard your first project as much as you can just for the sake of practicing.
And when you're done with that, um, you know, we can keep iterating, get, get better at
it.
So don't overthink this, uh, process is just getting the ideas down, but I wanted to show
you some of these consistent little style, uh, choices that we've made.
Just so when you're jumping between projects, you kind of know what things are.