1
00:00:00,000 --> 00:00:01,440
How did it go?

2
00:00:01,440 --> 00:00:04,423
Were you able to tackle
the sitemap challenge?

3
00:00:04,423 --> 00:00:08,922
I'll walk you through the process I went
through to create my sitemap diagram.

4
00:00:08,922 --> 00:00:12,902
It will probably be different than yours,
and that's okay.

5
00:00:12,902 --> 00:00:18,366
First, I researched a few elementary
school websites to see what features and

6
00:00:18,366 --> 00:00:23,191
pages they had in common,
while keeping our persona thandy in mind.

7
00:00:23,191 --> 00:00:26,216
I listed them out in
this doc to keep track.

8
00:00:26,216 --> 00:00:31,599
I thought things like the calendar,
staff list, student handbook,

9
00:00:31,599 --> 00:00:37,271
and more, would all be necessary for
Northeast Elementary's website.

10
00:00:37,271 --> 00:00:40,756
Next, I added any additional features or

11
00:00:40,756 --> 00:00:46,331
pages I thought the audience might
want on this website to my list,

12
00:00:46,331 --> 00:00:49,632
like photos and videos and donations.

13
00:00:49,632 --> 00:00:54,195
Now with everything listed out,
I'm going to organize the pages and

14
00:00:54,195 --> 00:00:57,901
features into logical groupings
to create my site map.

15
00:00:57,901 --> 00:01:02,086
There are many great tools out there
to create a sitemap diagram, so

16
00:01:02,086 --> 00:01:07,480
feel free to use a diagramming tool of
your choice, or even a design tool.

17
00:01:07,480 --> 00:01:09,643
I'll add a link to draw.io,

18
00:01:09,643 --> 00:01:13,631
which is the one I am using
in the teachers notes below.

19
00:01:13,631 --> 00:01:18,003
First, I'm going to add
each item to its own box.

20
00:01:18,003 --> 00:01:22,283
Then I'm going to organize them
into groups that makes sense.

21
00:01:22,283 --> 00:01:27,135
Side note, a great way to do this is
to have users do the card sort to

22
00:01:27,135 --> 00:01:31,307
see the organization that
makes the most sense to them.

23
00:01:31,307 --> 00:01:37,452
But you can also do it yourself and
then test it with users afterward too.

24
00:01:37,452 --> 00:01:39,393
Let's get to organizing.

25
00:01:39,393 --> 00:01:42,324
The first group I am
seeing is an about group,

26
00:01:42,324 --> 00:01:46,120
where users would find out
information about the school.

27
00:01:50,017 --> 00:01:52,971
I'm grouping the mission statement,

28
00:01:55,474 --> 00:01:59,842
Staff list, News,

29
00:02:03,771 --> 00:02:11,900
Contact information, And
directions to this group.

30
00:02:19,551 --> 00:02:22,921
The second group I'm
going to call families.

31
00:02:22,921 --> 00:02:26,712
This is the information parents and
guardians will want to access

32
00:02:38,032 --> 00:02:40,877
Here, I placed the school calendar,

33
00:02:43,303 --> 00:02:48,223
Lunch schedule, Lunch fees,

34
00:02:50,570 --> 00:02:57,673
Volunteering, PTA,
the Parent Teacher Association,

35
00:03:00,635 --> 00:03:05,540
Donations, And the student handbook.

36
00:03:08,582 --> 00:03:11,091
The third group is the academics group.

37
00:03:11,091 --> 00:03:14,737
Programs vary from school to school, so

38
00:03:14,737 --> 00:03:20,313
I just grouped an item called
programs here as a place holder,

39
00:03:20,313 --> 00:03:23,543
and I also added photos and videos.

40
00:03:23,543 --> 00:03:27,633
I think users would like to see
the programs and not just read about them.

41
00:03:27,633 --> 00:03:32,865
The final group is called activities.

42
00:03:32,865 --> 00:03:37,012
I added sports and clubs here, and

43
00:03:37,012 --> 00:03:41,593
I also added photos and videos again.

44
00:03:41,593 --> 00:03:46,499
Seeing all the different activities
available would be great for adults and

45
00:03:46,499 --> 00:03:47,731
for the students.

46
00:03:47,731 --> 00:03:51,002
Let's put these together into a sitemap.

47
00:03:51,002 --> 00:03:53,800
And here's the final diagram.

48
00:03:53,800 --> 00:03:58,702
Having the layout for the overall
site now lets me focus on designing

49
00:03:58,702 --> 00:04:01,632
individual pages and common features.

50
00:04:01,632 --> 00:04:03,795
This will also help the team or

51
00:04:03,795 --> 00:04:07,612
client better understand
the scope of the project.

52
00:04:07,612 --> 00:04:09,200
Nice job designers.