sitemaps as well as designers like to show off to other people just to prove that we're also capable of doing complicated things it's not complicated what's up everybody welcome to another one another one my name is ari i'm a product designer and developer consultant based in sydney australia let's unpack sitemaps there are a lot of things that we need to cover in order to explain sitemaps like what a sitemap is why should it exist when is it required what to include in the sitemap and then at the very end a very quick sidemap tutorial on
how to build an actual sitemap as usual i've included a timestamp down below so feel free to jump to the chapter that's actually good for you or feel free to just sit back enjoy and watch the whole thing let's start with what is a map it's how people navigate your website app or platform just like how a blueprint or a floor plan depending on where you're from gives us a high level view of the actual structure sitemap does the same thing with your website app or platform it showcases the unique name of each section the
hierarchy and the relationship of each section and at what level each section lives how a user moves through each section and a high level user flow we can also include more things like the type of the page high level view of the components that would live on each page in order to get a better understanding of both macro information architecture and the micro information architecture and it also helps us to understand what pages exist for reference and better management let's also not confuse a site map with an actual information architecture a sitemap is just a
piece of an information architecture more on that in a later video so why should a sitemap exist it helps us to get a better understanding of the size of our platform it gives us a high level view of what pages we need to build or design which pages are related and can share the same templates makes us to think about the user's movement and flow within the app or the website guys the flow a user goes through in order to discover specific information and it could also be useful in order to map out some high-level
components on each page to give us an understanding of the complexity of each section as well so when is the sitemap required well honestly with smaller projects you could probably get away without really building one since the entire complexity of the site map is only on one level maybe two levels if it gets more complicated so what i'm talking about over here are information websites that include maybe five to ten pages as the relationship between the pages are fairly obvious however i would say that every medium to large project can absolutely benefit from having a
site map on board cool now the fun part what to include in the sitemap you want to include things like the page name the level of the page the type of the page the flow between the pages maybe a high-level view of the page components and the page structures and potentially tiny little keys on the side to explain what every single thing on your site map is you see the idea over here is to be able to look at the site map and very quickly understand what is going on things like how the website flows
what is the relationship between each section and maybe a little bit more information depending on what you include in there with all of that out of the way let's take a look at how to create a sitemap in 10 simple steps later when i'm going to include the example in a tutorial i'm going to showcase the e-commerce platform as i think that most of us would really understand what that is since most of us would have used an online shopping thing like an amazon or something else let's imagine that our client is a furniture store
and they've approached us in order to improve their website experience by redoing their architecture where do we start well every single project is different depending on the amount of information that you have on hand and the amount of information that you need to find out but a typical project runs something like this if there is an existing website i usually stop with a heuristic evaluation this is where i would go through the website look at how it's currently experienced by a typical user i will also try and collect as much assets and information that the
client currently has on hand since this is a heuristic evaluation for a sitemap specifically i would start by evaluating the current flow of information and map out how the customer would really move around the website and note down any issues that i come across this can be in a simple form of a document or a spreadsheet it doesn't have to be anything fancy at this point yet also if this is a brand new website obviously there is nothing to evaluate so i would go straight to step number two which is content auditing this is where
you want to go through and audit every single thing that lives on the website like about pages blog pages article pages contact pages different product pages faqs and every single other thing that you come across this step is very crucial to get a grasp of the overall size of the project and how we might want to go ahead and approach this project again a simple spreadsheet or word doc will do at this stage too nothing fancy is required after we've done our auditing we can move on to step number three which is data analysis if
our client has access to any data we want to know about it and if you do get access to data you want to look at things like page traffic time of the traffic customer demographics drop-off rates at each section and anything else that you think might be useful in your case any data that you can get your hands on will help you out greatly later down the road as you can understand the customers what you want to flow a little bit further up and what you want to flow a little bit further down and so
much more usually most places have access to google analytics but ask for other stuff that they might have access to as well something like mixpanel or any other data that you can get your hands on once you're done with data let's move on to step number four competitor analysis probably the most important step of any project if you were to skip any of the steps above i wouldn't really skip this one there is so much we can learn just by looking at what competitors are doing but in this section not only we want to understand
what our competitors are doing but we really really want to get a good grasp of why they're doing it as well so a bit of an investigation there might be required we want to understand what they're doing better than us what they're doing worse what the current opportunities are can we catch up on what they're doing better can we even improve it a little bit further what is their customer experience like how do their customers move around the website and maybe lastly how could we differentiate ourselves and make our platform better than theirs a simple
spreadsheet over here will do as well nothing fancy is required once you get the competitor analysis on the control you want to move on to personas whether the company already has personas or we need to create one from scratch understanding our customers is super important in order to create anything we really want to get a grasp of who our customers are their demographics what are we selling to them why should they buy from us what should we prioritize to them in terms of content and flow and more again it's a broken record but a simple
word document or a spreadsheet will do nothing fancy is required with the personas out of a way step number six sketch different flows and ideas with all the information that we've gathered thus far we're really ready to start sketching some ideas on pen and paper sketching is a super great tool in any concept in stage of any design process since it doesn't really take long to create sketches and it doesn't necessarily need to look great we could get some very quick concepts down and out of a way without really getting attached to our ideas step
number eight let's talk tools once you get your sketches and concepts out of the way it's time to create an actual sitemap honestly it doesn't really matter what you use at this point to create it it could be post-it notes it could be pen and paper or it could simply be an app use something that you're most comfortable with and one that suits your work style i've used a lot of different apps in the past mira figma illustrator slickplan sketch or adobe xd and they all do a great job at creating a simple sitemap however
my current workflow is more like this if i need to collaborate with my team in a workshop then mira is my go-to if i need to put together something quick just to grasp on an idea then sleek plan is my go-to if i'm finalizing the site map to hand it over to a client then i would probably go to figma or illustrator to create something that looks better all i'm trying to say is i use something that suits your situation better however i will leave a link down below for every single tool that i just
mentioned above if you want to check any of them out for yourself step number nine validate after you've created your sitemap the very final part is validation and iteration we really want to make sure that our customers understand the sitemap and the flow as well as we do and depending on the situation there are quite a few different ways that we can test and validate our site maps a few of those things are card sorting tree testing a b testing or maybe even user testing just to name a few i will create tutorials and videos
about everything that i just mentioned above so go ahead and subscribe so you don't really miss out on that content now with all the theory out of the way it's time for step 10 which is creating the actual site map for that let's go to the computer hello and welcome to the computer this is where i'm going to take you through my process in order to create the sitemap and it's a step-by-step tutorial i'm going to be using two different tools over here one is going to be google sheets which is a high-level map of
everything that i've just audited and then the other one is going to be mira which is this guy over here and that is a tool that we're going to be creating the site map in let's start with the google sheets from all the research that we just went through and gathered i would have created a sheet like this which includes everything from different products for our store different types of pages and different types of requirements and i've done this by color coding the different sections which i will explain them in a moment we can do
our best with the help of our stakeholders and our research to put a sheet like this together however at this point it's still just an educated hypothesis at best and it will require further analysis and research going forward but it's always good to have a visual starting point like this now let's talk about mira why do i use mira well there are a couple of different reasons for starters if i use something like google sheets i could very simply go in here and i could select everything in this row i'm gonna do it all the
way to our stories copy it paste it over here and as you can see it very simply just pastes the cards as tiny little post-it notes and i'm gonna do the rest with the rest of the list by the way i'm doing this because it can only handle a certain number of items and i just don't want to risk missing out on them and there you go here's a block and at this point you could very simply just categorize them exactly how you have them up here now the different colors that i have i i
did this on purpose so for me a gray would represent organizational labels so this is the top hierarchy of all the items that i have the yellows are specific list or category pages the greens are detailed landing pages the purples are authenticated pages so pages that people need to log in and the blues are the functional pages which i'll come back to in a second but from here what i would usually do i just go around and lay this out in a way where it's a little bit easier to read so i'm gonna go ahead
and do this and i'm gonna fast forward through this so you don't have to watch me do this one by one all right now we've laid everything out like this and we can start looking at this in a way that it makes a little bit more sense everything's already categorized for us we know where our sections and categories are we know how pages kind of flow together but not exactly but the idea is to just lay everything down and just realize at a very very high level where our site map might be going if you've
never used mirror before here's a couple of reasons why i've recently started using it for creating site maps it has great collaboration capabilities so i could simply just go over here and invite different team members that i wanted to have access to this board and we could collaborate together or share it with anyone within the company or with my clients or so and so forth it gives you access to these tools that you're kind of familiar with from if you've ever used a different type of design tools like figma or sketch or anything else it
gives you access to some pre-built templates over here it's text as text is usually done so you could either resize this or you know size it back down you have access to post-it notes of course and there are different colors of them you have access to all of these shapes which is what we're going to use mostly for the site maps which we'll come back to in a sec we've got arrows that you could potentially connect different items together which again we'll come back to this in a sec as well you've got these pen tools
and this other drawing options over here if you want to collaborate or draw on your reward i'm going to delete the stuff that i don't need we have commenting capabilities so people can very easily comment on things and you could even paste different frames exactly like your typical design tools if you wanted to do something like wireframing or user journeys or user flows or anything like that with all of that out of the way let's go through some of the basics shapes so as i mentioned this is probably going to be our best friend over
here for the site map so you can very simply draw a shape you can type stuff in it hello world you could use this bar at the top as you can see it appears you could use this to modify the way that your shape works so i could reduce the text i could increase the size of the text i could add a custom number in there i could come over here and control the way that the borders work so the thickness and everything let me zoom in a little bit so you can see all the
changes a little bit better you can add different opacities to it you can change the shape into dash or types of outlines you can change the color you could add a custom color if you click on it again you can do other things like change the text type to bold italic or whatever you want it to be change the text color give your text a highlight like this if you wanted to or you could even go over here and give your shape a background of a color of your choice so like white this little guy
over here basically acts as a right click like this so you have all of these different options available to you and as you can see to its right hand side you have all of these different shortcuts available to you as well so if i was to go command c and command d i can very simply just paste another card right next to it connections is another thing that i really love about mira so i can simply click on this card and see these tiny little circles i could just click and drag one of these and
it very simply connects this card to the other and it can control how these arrows would look like by clicking over here so i could choose none or i could just choose a type of arrow that i like i could mess around with the colors of that arrow even the type of the arrow which i'll go through in a sec so for example let's say that my card was down here and you can see the arrow is this smooth whoosh that goes from top to the bottom but if i wanted to change that behavior i
would simply click over here i can change the thickness i can very simply change it into a hard edged arrow with straight angles i can even change the type of the arrow that i have so it gives you all of these tools that it allows you to very simply and quickly create these site maps and the other cool thing is that this arrow now follows my card around cool with that out of a way let's go ahead and delete these guys and start from scratch so starting from here i just want to explain that there
is no single approach to creating a sitemap but the more you make them the more you realize what items would suit your specific project and need with my one for example i only want to showcase high level pages so i'm not really going to include specific components that live on each page so for example i'm not going to go home also includes a carousel at the top i want to simply showcase how a user would move around these different pages and i want to showcase the type of the pages that i've created hence these different
color codes which i'm going to explain in just a second so with that in mind let's just go to this side and let's start with the gnomes i'm going to start with a simple rectangle and i'm going to change this to full opacity i'm going to for now i'm just going to change the border color or the outline color to this gray over here and i'm going to decrease the size of that border as well maybe we'll make the border just a little bit thicker like this just so that we can see it better and
within this all i'm going to do at the moment i'm just going to type in double click and type in landing page i'm going to make sure that i'm on size 14 because that's the size that i like for this very specific project i also know that i'm going to need pages like the 404 pages or other error pages that don't necessarily live within the sitemap ecosystem and in order to do that i will simply just click on this card and just go command c to copy this card and then command v to paste it
and now i have a duplicate of this the way that i want to represent pages that live off the ecosystem i'm going to show them with dashed lines so i'm going to go to the outline options over here and change these to dashed lines and i'm going to rename this to landing page off map i also know that some pages like the checkout will have multiple steps which i don't necessarily need to show every single step on the sitemap so the way that i'm going to represent that is to copy the landing page another way
that you could copy by the way is to just very simply on a mac hold down the option key and just drag and it creates a copy for you the way that i'm going to showcase multi pages or stacked pages is i'm going to rename this one to and then i'm going to go command c command v i'm going to delete what's inside here and i'm going to drag it on top right click and find send to back and then i'm going to move this guy five pixels to the top five pixels to the right
and i'm going to repeat the same thing again so i'm going to go command c command v send this guy all the way to the back and repeat the same process but from here and just like that i have this thing that represents stack pages for me but if i go ahead and move this around the rest of these guys won't move around with it so i can simply fix that by holding the shift key on my keyboard and drag my mouse around all of these options to select all of them and either just go
group all of these items by clicking this button over here or just go command g on my keyboard in order to group all of them together and there you go you can ungroup them by going command shift g or by simply selecting ungrouped objects up here cool we've got two things out of the way the next thing that i really want to do is to create a decision indicator for when an action or input from the user is required in order to proceed so i'll do that by creating a shape but this time i'm going
to represent decisions by using a rhombus i'm going to make it slightly wider and slightly taller maybe just so that i could fit more stuff in here because it's a bit of an awkward shape to type in but i wanted to show you guys another thing over here because these decision items usually live off the ecosystem of the site map i want to showcase that with a similar visual language as this guy with a dashed outline i could simply do that by clicking over here and changing this to a dash outline but i wanted to
show you guys one more thing because we're going to be using this a lot and that's just to go right click copy style or just simply click on command option and c which i'll do that command option and c and i could go over here and just go right click paste style or just go command option and v and just like that you get the exact same treatment on this card now i'm gonna make it a little bit taller and i'm gonna type in decision the final thing that i want to introduce are categories i
want to represent categories with another single rectangle just like this it's going to be shorter than the others and you'll see why in a second and with this treatment i wanted to give it solid lines but i want to change the background color so that we don't really get confused with the rest of the pages because these are not functional pages these are just a representation of the categories so i'm going to go ahead and click over here and just type in organization labels we've got all the basic elements out of the way next we
need to come back to all the different cards that we have over here and talk about the different colors so as mentioned before i knew that i need category or list landing cards and i represented those with a yellow color this represents a landing page that groups a bunch of components together like home pages category pages blog lists pages about pages or anything else like that i then need the detail pages so this represents an exclusive landing page like a specific product page or a specific blog detail page i also needed authenticated pages like an
account page but i wanted to indicate that you really need to be signed in in order to access these items over here then i wanted to showcase functional cards and these are pages that serve a function and don't need to be connected to the cms for a cms user to be able to modify them so these could potentially include things like the cart page the checkout steps the confirmation page the search widget anything like that that's really high level engineering functional piece and finally we got the organization labels this is used basically just to group
elements around they have no real functional aspect to them and that's why i really wanted to represent these to look very different to everything else now with all of this information i also need other people to understand what i'm talking about so this is where a sitemap key comes in very handy and the way that i create keys is usually really really simple what i'll do i'm just going to move these guys across over here to start creating the sitemap i usually just grab one of these guys i delete what's inside there and i make
it into a small tiny little square or a squarish shape just tall enough that it's legible and understandable and i'm going to replicate the different colors that i had over here so as we talked about we've got the gray the yellow the green the blue and the purple so let's go ahead and create this into five different rectangles by the way i'm just pressing ctrl d on my keyboard and that just simply duplicates this item for me and then i'm gonna go over here to text and start typing organization labels this one's going to be
my details page this one's going to be my category or list page this one's going to represent my authenticated pages and the final one is going to represent a functional component or page and then i'm going to color code these as well so the first one i'm going to keep gray as an outline but then i'm going to give it a gray background as well so this directly represents this guy over here the details page obviously as we mentioned before the detail pages are in green so i'm going to color those in green i'm going
to choose this for the categories i've chosen yellow so i'll do the same here yellow orangey for the authenticator pages as we talked about this is going to be the purple color and for the functional pages we're going to go with blue and i'm going to group these together as well by just selecting them and just pressing command g in order to be able to move them around a lot easier as well you can clean them up a little bit if you want and i'm just going to use this to type in keys and make
it bold and make it a little bit bigger so we could read it easier so now this represents the key for all of our different pages on the site map that we're going to create now the question is how do we start creating the sitemap well based on the sheets that we had before as i said we started grouping them together and the idea of a sitemap is to just start putting all of these cards in the way that the flow makes the most sense so starting with the highest category of things we've got the
home page right and the home page is simply just a detailed page so i'm going to grab this i'm going to hold option and drag and that creates a copy of that i'm going to call this home page and i'm going to click into this square over here and just go copy style but i'm going to use a shortcut from here onwards but i'm just going to do the first one with just a right click so you guys can see what i'm doing and paste style and very simply i now have the exact same style
as that so the homepage that's what we start with and that's a detail page if we look at our map over here then we have these different high level organizational labels so i'm going to lay these out in a way that makes sense i'm going to do the same thing i'm going to copy this drag it down here on the left hand side because i know that shop is probably going to be the biggest area i'm going to drag it over here and for now i'm just going to make it this long and we could
adjust this as we go on i'm going to make another copy of this and i'm going to create about make it a little bit shorter probably probably as short as these cards right there delete that for now and then i'm going to copy this again i could very simply just do that by pressing command d on my keyboard the next one for me is going to be the block again we could change the hierarchy as we see fit help oops account can't type today and we got legal and at the very bottom this is where
i'm going to keep everything that doesn't necessarily connect to the main sitemap ecosystem and i'm going to call this miscellaneous and we might make this just a little bit longer and we've got the high level organizational labels i also know that my homepage is going to connect to these guys so as i mentioned before the way that you do this on mirror is to simply just indicate where these four dots are and start connecting these guys together i'm just going to change the type to a solid line like this and i'm going to connect to
all of these different pages individually so i'm going to click there again and connect to block and do the same with the rest i use the arrow to indicate that from this page i have actual access via some sort of a link either on the page or the navigation to these other pages over here as i said the cool thing about mira is that as i resize these the lines and everything follows through so it makes life so much easier i'm going to select all of these as well and i'm just going to move them
here awesome now next i want to start indicating what my high level category pages are right so i'm going to start with shop and we're going to go back over here we know that underneath shop we have bits and mattresses as a high level we've got seating and i believe we have these are in the wrong place let me just move those up beds and mattresses we got seating we've got desks and tables and we've got organizations so i'm just gonna start with this just copy the text within and just come over here grab myself
one of these again and just type in bits and mattresses within nice i'm going to copy this again and this time i'm going to call this one seating i'm going to copy this again i'm going to call this one desks and tables i'm going to copy this again i'm going to repeat that and call this one organization perfect now there is no connection between a shop to these because the shop just indicates the overall group category of all of these items for now i'm just going to make them equally distanced apart and i'm just going
to pull them up a little bit just to keep this entire thing a little bit cleaner by the way you do have access to alignment tools like this so you could just align everything to the left or to the right or however that you do it on your typical design tool now past this point i know that all of these are category pages so once again i'm going to come over here i'm going to copy this style i'm going to select all of my cards and i just go pay style and i have the right
type of the card now further down again going back to either the google sheets over here or the cards on the other side i know that i have underneath bits of mattresses i have mattresses i'm going to create this and i got bed bases and i've got bedding perfect oops i'm just going to select these and make sure that they're equally distanced apart and i'm going to throw all of them underneath this guy over here perfect and i'm going to connect to them from here right so the same type of a connection i do want
the arrow on because that's how you get access to each of these pages via that category page and these are still category pages at this point because they're going to represent all the different types of mattresses and everything that we have so if i go back to the cards over here and go underneath mattresses you can see that we've got original hybrid technical so on and so forth so i'm going to just copy these three just so i don't have to go back and forth between these guys paste them over here and i'm going to
again copy this but this time i'm going to make it into a detail page because these are detailed product pages at this point and i know that this is the original mattress got ourselves the hybrid with ourselves the technical perfect and i'm just going to connect through these pages however at this point from the mattress to these pages it is going to be an error because that's how you get access to these pages but i'm not going to use an arrow because you don't need to go to the original in order to get to hybrid
so i'm going to get rid of the arrow and just use none and this simply indicates that these pages are all grouped underneath the same thing i'm just going to move them up a bit just to make it look a little bit nicer and then i'm going to copy these across as all of these categories have three different items on there perfect so with the mattresses that mattresses out of the way i'm going to just select all of these guys move them a little bit to the left i'm going to move my keys to the
left a little bit as well and increase the size of this guy just so that it covers the whole area and then we're going to go into seatings now my sitting structure is very similar to my mattress structure so i'm going to copy all of these across cool now to save timeframe you're not having to watch me do all of these individually i'm going to go ahead and fast forward this portion of the video just so that i could get the whole site map together and i'll come back and explain the whole thing to you
guys in just a second so you can see that our site map is almost done however we don't really have a connection to the checkouts but before we move on let me just explain what's going on over here so as i said we've got the organization labels that indicates all right this is the shop section of the website and that's how you move around the shop section then you got the about then you've got your blog you got your help as i said all of these are authenticated pages so i'm indicating those with a purple
remember if you go back over here authenticate pages are represented with a purple color and then we've got our legal in terms of conditions and as i mentioned before items that don't necessarily belong to a specific page um so in in this case our functional component which is a search engine or other error pages or four or four pages they live onto the website i still want to make sure that i account for them but they don't necessarily need to live within the ecosystem of the site map so i usually just chuck them down here
away from everything just so that we know that they exist but we don't need to deal with them as a part of the ecosystem the checkout is an interesting one there are of course many different ways in order to indicate where the checkout goes but in my case what i'm going to do just like everything else i'm going to grab a organizational label and i'm going to chuck it underneath this i'm going to center it to that guy at the top just like this and move it a little bit further down and the idea is
that you could check out via any of these pages and the way that i want to represent that is to very simply start connecting all of these pages into this organization label so let me just go ahead and do that i'm going to fast forward this so you guys don't have to sit through this perfect so everything feeds into the checkout label and from the checkout label you basically land on the cart page then you go through the checkout steps and you get your confirmation however we also have an account page over here so the
way that i'm going to represent those is that i'm going to create a normal card page grab a copy of this chuck it down here cart page for me is a component is a functional component so i'm going to indicate it that way but then there's a decision to be made over here by the end user to see if they want to sign and sign up or they just want to continue so what i'll do i'll grab my decision rhombus and i'm going to paste it over here i'm going to make sure that it uses
the same color because it's a functional piece and i'm just going to connect to it from here like this and this is a back and forth situation so i'm going to add the other end of the label i'm just going to rename this to optional which is important to include the optional factor to it sign in or sign up and from here again so i'm going to go up because of the fact that i know that my checkout is a multiple step experience i'm just going to copy the style paste they style over here so
they have the same style and then i'm going to indicate to it that way i'm going to get rid of the arrow from the top piece and then post this the final piece over here is going to be the confirmation page just like that and that's how it would represent the checkout steps so i'm just going to go through this one more time you land onto the homepage you get to the shops category you can go through your categories you have access to your detailed pages you can very simply check out that way and at
the very bottom you have your search engine for four pages and other error pages and on the right hand side you have the rest of the website all right that is site maps for you you can let me know if you want me to do this on a different tool you can also just let me know what tool you use in order to do this as well i'm actually interested to know and hope this video was helpful to you guys if you've enjoyed this video please like subscribe and share as all of those actions would
help me out greatly and i'll see you guys in the next one
