Hello and welcome back.
We're going to be talking about site maps and we're going to be building our own and.
Before we build our own, I want to go through a couple of different things about my process and how
we can just get started on the right foot.
So what I like to do is I like to grab all those sketches that we created in the beginning, and I'd
like to just drop them into my files wherever they're relevant, of course.
So if I'm done sharing them with the team, I'll put them in some sort of folder or a page where I can
share.
So I'll just click, share and copy that link and just drop it into a slot group or whatever messaging
platform we're using.
And over here, we have all our sketches, so I'm using them in our sitemap file right now, and they're
going to help us really figure out the structure of our application.
They're going to help us think about maybe some details or details on pages that could really influence
the categorization of certain things.
So we started with mapping out the overall journey.
So I know that we need an onboarding screen.
I do know that we need some sort of home screen or this looks like a search results screen that I quickly
marked up.
I know that there's going to be some sort of like order screen says package shipped here and a package
arrived.
So there's probably maybe another screen that will pop up for the user, but that is probably just conditional.
So we're not going to necessarily worry about that kind of stuff just yet.
I do know that there's a product page over here as well and we have a cart.
So I know that there is certain areas where I can get to like the cart differently so I can probably
get to the cart from the product description.
I haven't necessarily thought about that too too much, but is a possibility.
Maybe once you add an item, they'll push you into the cart.
But mainly I think we thought about the cart from a navigation standpoint and keeping it there at all
times.
So we'll probably keep the cart in the navigation and we're going to worry about that when we're talking
about actual site maps.
So it looks like our main navigation is like home save orders cart.
And there's going to be some extra information on each page that we're also going to break down.
So right now we have a home page.
It looks like we have some products here.
I have a profile avatar that'll probably allow users to actually access a profile and maybe account
settings.
So we'll think about that while we're building our name up.
We do have like a saved section.
And this C section probably has different items, more similar items, a way into the card section.
What else do we have here?
We have a car, so we've already thought about that a bit.
And here I'm already thinking about some of the navigation schemes, so I know a search leads to a product
or results, then leads to a product, we have a product that leads right to checkout.
We probably have categories down here that we need to think about.
We spoke about kind of like those primary, secondary and tertiary levels.
So we're going to think about how far we need to go.
Probably not too far.
I'm thinking only like secondary.
So what do we have here?
We have orders, so we probably have an orders page.
OK.
And yes, we do have some sort of navigation scheme that we started building up, and what I have here
is home description.
So what I really want you guys to do is grab all your sketches, digitize them, put them into Fatema
and use them to really help influence what you're trying to build here.
Sometimes people sketch and they forget about the sketch and they start building something entirely
different or they start kind of fresh.
We don't necessarily want to start fresh.
We want to influence the work as we go along based off of our findings.
So whatever feedback you got.
Implements here don't have to necessarily go back and, like, redo everything, just keep moving.
So we have screen flows and we know that a search will lead to results and the results to description.
OK, so we basically know where we're going with some of these sketches.
Now, let's review some of our user flows here.
So we have registering with our product.
We know that there will be a welcoming or on boarding, I'm not sure what that will look like, but
leading to a registration floor.
Which we need to think about, which would push us into the home page.
So that's helpful.
Over here, we have finding the right products through search, so we've done this already with our
sketches, so we this is just more refined.
Yeah, that yeah, we've done that and we are making a purchase, and so we understand the car, so
we have a lot of refined little flows here.
And since our application isn't too detailed or complex, we have a good starting off point based off
of what we have here.
And you'll probably have much more than this.
And, you know, you should start thinking about all the different types of flows.
But like I said earlier, the design process is just constantly evolving.
You don't necessarily stop sketching.
You don't necessarily stop creating user flows.
Everything's always kind of happening simultaneously in a way, especially with sketching and user flows.
So don't worry, if you don't have too much, you'll figure it out once you start building out the site
map that maybe just doesn't necessarily make sense.
And I need to go back and think about it.
So don't be too hard on yourself if you forget something, because it definitely will happen.
Especially once you start talking to more people and getting feedback, so before we begin, I just
want to explain what I have here.
And these are a couple of components.
And you know how much I hate recreating the wheel.
These are some components that I kind of took from a resource for site maps, because if somebody else
created it and it's a free resource, I am down to use it because it's going to make my life easier
and link that original resource for you.
But you can use that.
You can use what I've created here.
I've kind of modified it a bit.
It's just what I need at least.
So let me just break this down.
These are the individual components that will be using and I know I explained same a little differently
in terms of just having a label, but I really like to build site maps in a way where I can start understanding
the content structure inside so each page may have their own set of content that will link elsewhere.
And you can kind of start merging some sort of site map with like a little bit of a flow diagram.
I mean, like you don't want to get too complex, but it really helps you think about different types
of content that you're going to need on the page.
So this kind of stuff will be obviously influenced by your sketches and your user flows.
And it'll give you a good overview if you have redundant content somewhere or if you don't have a piece
of content that you forgot about.
And we'll probably figure that out now.
So what do we have here?
So I have a public component.
So this basically means that if a person uses our app and doesn't have an account, it's a nice shade
of blue.
If they're a member, they'll only be able to see content that is member based.
And we have a log in or sign up button and we have an outside link.
I'm not sure I'm going to be using outside links, but it definitely helps to have some variety and
we can obviously create more of these.
And if you option Command B, we will essentially detach that instance and we can recreate our own instance
by going option command communicate and we can rename it to something else.
OK, so let's just camenzind out of that and in here, this is just the container, so I kind of have
it set up similar to what the original file had, which is this nice, cool little browser looking in
window has a title and this is going to be the title of our page and we are going to name all these
pieces based off of the content.
So I will show you what that looks like right when we get into creating a sign up.