Hey, welcome back.
We're going to jump right into Ukraine, our very own site map.
So I have a copied instance of that initial component that I was talking about earlier.
So this is going to signify which page we're on and the different types of hierarchy's and content within.
And yeah, this is going to be great.
I'm going to show you one quick thing.
It's within a frame.
If you notice, the frame has a thing called Autolib, and essentially it's really great for something
like this.
So I'll show you how that works.
It's going to structure the content and vertically and you can set the spacing between.
So this is the container for the pieces within.
So you can set the space on the top and bottom.
You can set the space on the sides.
You can also set the space between components.
So that's really cool.
And if I add a component or remove a component, this whole container will grow.
So it's really great for something like this where we don't have to constantly resize something.
So let's go ahead and just position this in the middle of our frame.
Perfect.
And what we're going to do is we're going to rename the title to Home and let's start thinking about
the different types of content within.
So we're definitely going to have a search that's going to be public.
We're going to have something like a shopping interest thing, I'm not sure exactly what that's going
to be, so I'm going to have to sketch that out later.
So shopping interests and and habits, so we'll have that.
We probably have a login and a sign on that page.
So the reason why I'm even breaking this page down even more is so I can really understand what other
pages I can get to or rather pieces of content I can get to from here.
It also allows me to really understand maybe how I should structure that content when I'm thinking about
how I place those items on a page, especially through wire framing.
So what we'll do is we'll duplicate the search in here.
I guess we're just going to have to detach this whole instance, and that's totally fine, perfect work.
OK, so we have search, maybe I want shopping, interesting habits to be right at the forefront and
maybe I'm not sure that looks like right now, but I know we're going to probably have to have categories
in this section because we don't really have the NAV at the moment.
But we're going to reach out with categories, deals.
We'll probably have a deal section.
Let's just copy this a couple of times, so this is all going to be public.
We're going to have a Cartes.
OK, what else let's think about the other things we're going to have that are related to members only,
so we are definitely going to wish list a way to get to the wish list.
We are going to have borders.
What else do we have?
And a profile.
So these are the different things that we will have, I've kind of listed the navigation in here that
I've kind of proposed prior, it's up to you really.
It's going to depend on whatever your preferences allows me to really think about the structure of the
entire page, as well as navigation in one shot.
So that's, like I said, just a little bit of preference.
So I'm going to I'm going to copy this all the way over here.
And let's start thinking about shopping interests and habits first.
I'm not sure what that's going to look like, but let's start thinking about that, at least the structure
of the page.
So we do know that this is definitely going to be a members only page.
And if you're not signed in, then log in or sign, it's probably going to be at the forefront of that
so we can go ahead and delete all these different public links.
So probably there'll be a way to like discovering new products.
Maybe.
I got my interest portion, like where you can edit them or see what you're currently interested in.
They'll probably be some categories based off of those interests, and they'll probably be maybe like
some deals, I think that's pretty sufficient right now since we're just trying to get a sense of what
the overview of our app looks like.
And the second step is categories.
Let's build out one or two.
So categories we won't necessarily need to have anywhere Loggins.
We can go ahead and actually select all of these groups.
We can delete these.
And a quick way to switch to the.
Public instance is to just go into our innocence panel over here and select public and automatically
that changes to the color.
So let's think about what could be on the category page and what links may link elsewhere, link to
certain pages that may seem redundant, like trending items or whatever that means that may just link
to the page.
That is like a default list that we reuse over and over again, but we just name it differently, whether
that's like DLS results.
So just something to think about.
Trending items maybe.
Oops.
See what else may be on the categories page, probably like this is going to be a page where we can
get to the different categories throughout the entire application.
We do know, like with larger products like this, they'll probably be like categories around, like
gaming all the way to like fashion and maybe health.
So it just is probably pretty fast.
So we'll probably have to break this up just a little bit like and make it more interesting.
So we'll probably have like a trending item section or something like that, maybe some more like most
popular categories.
We'll definitely have like in all categories section and we are going to be off like a deal section
again.
So you'll start seeing like there's a deal section here and deals section here.
And like we probably won't show all the deals, but we'll give them a sneak peek and they'll probably
be redirected to some sort of redonda type of page that we kind of reuse over and over again.
I shouldn't say redundant more so that I just a reuseable kind of like page.
So I think that's pretty sufficient for categories.
What else do we have here?
Deals.
OK, so we've got deals.
And like I said, this could be something easily accessible.
So you can get it primarily, but you can access this from like the categories page and elsewhere.
So the deals page probably has like the trending deals, probably has deals based off of categories.
So I'm not sure if these are the right choices right now.
And that's a good thing to remember when you're designing like everything you're doing without user
research is definitely an assumption and you should treat them as such.
So just something to think about as you're building.
Don't just build the first thing that comes to mind.
Go out and test with users.
I'll definitely cover that.
And another lesson, so we'll have here all categories.
I'm just going to go no only so they're probably like a member only section if you are signed in and
if you have enough content or data that our developers will be able to pull from and match you with
certain deals like deals just for you, there are good deals just for you.
I like that.
I think that's pretty sufficient for now.
See, now we're getting a sense of like what each page should probably have and where you can access
it through the hierarchy wish list.
I'm going to call it a wish list for now.
We've been calling it saved, but I don't think that really does a good job of indicating what exactly
it is.
I'm going to actually steal that button.
Because this is going to be a members only section, definitely A members only section, so we have
probably like years saved items.
Maybe there's multiple lists, but we can handle that.
Once we start wireframe in sharing, we'll be able to share.
So we have to think about maybe where that leads.
And similar items, so another way to get them into the funnel of buying other items that are probably
relevant to their needs, so we have a wishlist, what else is there?
Let's copy this.
And so we have orders over here, so that, again, is going to be a members only section, so let's
do that.
So well, if they do come into these pages, I'm thinking about having them.
Be hit with like a registration block, so you can't necessarily create a wish list if you don't have
an account with us or you can't really order if you don't have an account with us.
So if somebody comes in and they don't necessarily sign up yet, then they'll be blocked to actually
access these types of pages.
So we're definitely to let them try out our up, but they're going to be blocked for the majority of
it.
Search and filter will probably be on the order screen, so they'll be able to search through past orders.
What else do we have here?
We have in progress orders and passed orders.
Maybe there is somewhere like a customer service base thing like a help.
Maybe a health section, so that's that's good to just think about what happens if an order is lost,
what happens if an order is late.
So customer satisfaction is very important and we have orders, profiling cards.
OK, let's think about her first.
This is not a members only page, you can view your cards.
You just won't be able to check out.
Let's just touch out with the public so we'll be able to see, like items in cards.
What else will be able to see?
But let's duplicate a couple of times, I'll probably be able to see maybe similar items, I'm not sure
if that's relevant right now, but I'm going to put it in there anyways.
And I think that.
Is fine, so items in the car and the last minute we're running out of space, so I'm just going to
shift these all over a bit.
About then and there we go and profile.
So this is definitely another member's only section, so I'm just going to copy that and bring it in.
Oops, you see how they just kind of like the layout, you can just kind of like place things so easily.
It's really great if you're like designing for one use case.
FEMA has yet to really implement something that makes it totally responsive.
So I wouldn't necessarily use them like when creating containers for a responsive website for mobile.
If you're focused on just creating something that's maybe like growing or shrinking, then I think it's
really great.
And we'll build that out as well eventually.
So profile, what do we need to think about?
If they are not signed in, they're just going to get hit by a wall here.
So let's just do a members only section and so the different types of things they can see here, the
bill to see, like my profile, I'm guessing like four counts.
Hmm.
So account settings.
And see.
We're just going to.
Karpeles.
They'll probably be able to see, like their insurance, maybe stuff like customer service will be it
could be here tucked in somewhere.
What else could be here?
I think that's fine for now.
Actually, so their account settings, that could be anything from like their profile image to payment
methods to address settings.
Interest is definitely just like categories that they fall into.
And we have customer service just in case.
We can link back to if they need help or something and possibly orders, maybe it's another way to get
to the audio screen.
OK, so that looks like the first kind of tier, we can easily lay this out nicely.
What I want to do is just select all of them and.
Go and click up here and distribute horizontal spacing.
So now they're all evenly distributed and will just center that as well.
Well, we can also do is there's a plug in called auto flow.
So we'll click that plug in and there it is.
And this is really cool.
I'll show you how it works.
So if I selected this container and then this container, it'll automatically create a line and you
can customize what that line will look like.
Right now, it has a hundred mile radius.
If I like zero, it'll just make a straight line so we can use that.
That looks great.
So now we have our structure.
I like this a lot.
And we can remove that for now and we can just select all of these and, you know, I'm not really worried
about like this structure of what my current page structure looks like here on the side.
I mean, these are meant to constantly be reworked, shared with others and kind of like constantly
recreated and refined.
So don't spend too much time on making things perfect.
So that's our first layer.
Let's take another look at it.
We have shopping interests.
We have categories, deals, wish lists, orders, car profile.
That seems pretty sufficient.
And let's stop here and our next video, we'll get into building this out just a little bit more.