Human Interaction Project: Homeschool Hangout Zone Website Redesign

This project focuses on the redesign of the Homeschool Hangout Zone website, addressing issues in the original design to improve user experience and engagement. The assignment includes the creation of sitemaps and storyboards for the website's structure and content, specifically for the homepage, about page, subjects page, meet friends page, and miscellaneous page. The project highlights the importance of user interaction, visual appeal, and effective navigation, with a focus on incorporating images, videos, and a well-organized navigation menu. The redesigned website aims to provide informative content and improve usability by placing the navigation menu at the header and creating separate pages for each section. The report also includes an analysis of the original website's shortcomings and details the improvements made to enhance user experience and overall design.

1
Running Head: HUMAN INTERACTION
Human Interaction
Student’s Name
Institution

2
HUMAN INTERACTION
Human Interaction
Q1. A) Sitemap
B) Storyboard
Storyboard Template
Website Name: Homeschool Hangout Zone
Descriptive name of page: Homepage

3
HUMAN INTERACTION
Description of copy
text:
Text will offer users an introduction to the site, its purpose, and
content available. It is organized in a manner that is informative and
appealing to the audience.
Links on the page: The navigation menu is at the top and contains five links. The links
are displayed consistently in all pages. The links are interactive which
enables users to know the status of the system. Active or hovered
linksare underlined.
User Interaction: Users can only interact click the navigation menu by clicking the links
provided to visit another page.
Graphical
elements/Images:
Two images are prominently displayed on the homepage.
They enhance the outlook of the
homepage and grabs user attention.
Color Specs: The page has white, black, and light pink background color. This is
key in avoiding the monotony of one color background which is
unappealing. Text color used include white and black. Dark text
colors are used against light backgrounds while bright text color is
used for the black background.
Font Specs: Different font size is used for different content. For example, headings
have a large font size while body content has small font size. This is

4
HUMAN INTERACTION
key in attracting users and helping to differentiate the content
presented.
Additional
Comments:
The original website is unattractive and does not engage the target
audience as expected.
The website should incorporate various media such as images and
video to enhance visual appeal.
The navigation bar is found in the content section and this is not
appropriate. It should be placed on the header to enhance usability.
Homeschool
Hangout
Zone
Home Subjects About
Us
Meet
Friends
Miscellaneous
Welcome to Homeschool Hangout Zone

5
HUMAN INTERACTION
Copyright 2017.
Current Website

6
HUMAN INTERACTION
New Homepage design

7
HUMAN INTERACTION
Storyboard Template

8
HUMAN INTERACTION
Website Name: Homeschool Hangout Zone
Descriptive name of page: About
Description of copy
text:
The text provides information about the website including its goals
and how it intends to help people. The length of the text is short and
effectively engages users.
Links on the page: The navigation menu is at the top and contains five links. The links
are displayed consistently in all pages. The links are interactive which
enables users to know the status of the system. Active or hovered
linksare underlined.
User Interaction: Users will interact with the page by playing the video embedded and
clicking the navigation links.
Graphical
elements/Images:
A video is embedded on the page to enhance user interactivity.
Color Specs: The page has white, black, and light pink background color. This is
key in avoiding the monotony of one color background which is
unappealing. Text color used include white and black. Dark text
colors are used against light backgrounds while bright text color is
used for the black background.

9
HUMAN INTERACTION
Font Specs: Different font size is used for different content. For example, headings
have a large font size while body content has small font size. This is
key in attracting users and helping to differentiate the content
presented.
Additional
Comments:
The original website is unattractive and does not engage the target
audience as expected.
The website should incorporate various media such as images and
video to enhance visual appeal.
The navigation bar is found in the content section and this is not
appropriate. It should be placed on the header to enhance usability.
Homeschoo
l Hangout
Zone
Home Subjects About
Us
Meet
Friend
s
Miscellaneous
About Us.
Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum

10
HUMAN INTERACTION
Copyright 2017.
Current Website

11
HUMAN INTERACTION
New About Page

12
HUMAN INTERACTION
Storyboard Template
Website Name: Homeschool Hangout Zone

13
HUMAN INTERACTION
Descriptive name of page: Subjects
Description of copy
text:
Content on this page will provide information about subjects taught in
school which include maths, English, history, science, and social
studies and geography. The content will be separated with headings.
Each subject will be have its own section that displays text describing
the subject which enhances clarity and readability of content.
Links on the page: The navigation menu is at the top and contains five links. The links
are displayed consistently in all pages. The links are interactive which
enables users to know the status of the system. Active or hovered
linksare underlined.
User Interaction: Users interact the website by only using the menu links to navigate
the site.
Graphical
elements/Images:
Several images are included in the page to enhance its visual appeal.
Each image represents a subject and is key in maintaining user
attention.
Color Specs: The page has white, black, and light pink background color. This is
key in avoiding the monotony of one color background which is

14
HUMAN INTERACTION
unappealing. Text color used include white and black. Dark text
colors are used against light backgrounds while bright text color is
used for the black background.
Font Specs: Different font size is used for different content. For example, headings
have a large font size while body content has small font size. This is
key in attracting users and helping to differentiate the content
presented.
Additional
Comments:
The original website is unattractive and does not engage the target
audience as expected.
The website should incorporate various media such as images and
video to enhance visual appeal.
The navigation bar is found in the content section and this is not
appropriate. It should be placed on the header to enhance usability.
Homeschoo
l Hangout
Zone
Home Subject
s
About
Us
Meet
Friends
Miscellaneous
Subjects
Lorem ipsum. Lorem ipsum
Maths
Lorem ipsum. Lorem ipsum. Lorem ipsum.
Lorem ipsum.

15
HUMAN INTERACTION
English
Lorem ipsum. Lorem ipsum. Lorem ipsum.
Lorem ipsum.
Science
Lorem ipsum. Lorem ipsum. Lorem ipsum.
Lorem ipsum.
Social Studies and Geography
Lorem ipsum. Lorem ipsum. Lorem ipsum.
Lorem ipsum.
History
Lorem ipsum. Lorem ipsum. Lorem
ipsum. Lorem ipsum.
Copyright 2017.
Current Website

16
HUMAN INTERACTION
New Subjects Page Design

17
HUMAN INTERACTION
Storyboard Template

18
HUMAN INTERACTION
Website Name: Homeschool Hangout Zone
Descriptive name of page: Meet Friends
Description of
copy text:
Text provided inform users on where they can meet friends from
different parts of the world. The text is short and precise hence is
effective on informing users about importance of friends.
Links on the page: The navigation menu is at the top and contains five links. The links are
displayed consistently in all pages. The links are interactive which
enables users to know the status of the system. Active or hovered
linksare underlined.
User Interaction: Users can only interact with the web page by hovering the menu links or
clicking one of the links to visit another page.
Graphical
elements/Images:
Three images are included to the page content to enhance visual appeal
and reinforce the points made in the content displayed.
Color Specs: The page has white, black, and light pink background color. This is key
in avoiding the monotony of one color background which is unappealing.
Text color used include white and black. Dark text colors are used
against light backgrounds while bright text color is used for the black
background.
Font Specs: Different font size is used for different content. For example, headings

19
HUMAN INTERACTION
have a large font size while body content has small font size. This is key
in attracting users and helping to differentiate the content presented.
Additional
Comments:
The original website is unattractive and does not engage the target
audience as expected.
The website should incorporate various media such as images and video
to enhance visual appeal.
The navigation bar is found in the content section and this is not
appropriate. It should be placed on the header to enhance usability.
Homeschool
Hangout
Zone
Home Subject
s
About
Us
Meet
Friends
Miscellaneous
Meet New Friends
Lorem ipsum. Lorem ipsum. Lorem ipsum.
Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem
ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.
Lorem ipsum. Lorem ipsum.
Copyright 2017.
Current Website
Image

20
HUMAN INTERACTION

21
HUMAN INTERACTION
New Friends Page Design

22
HUMAN INTERACTION
Storyboard Template
Website Name: Homeschool Hangout Zone
Descriptive name of page: Miscellaneous
Description of copy
text:
Text on this page will display additional information about the
website particularly resources that can help students. External links
are included on the page to enable users access these resources.
Links on the page: The navigation menu is at the top and contains five links. The links
are displayed consistently in all pages.
The links are interactive which enables users to know the status of the
system. Active or hovered linksare underlined.
User Interaction: Users will interact with the page by hovering and clicking the links
provided in the body section.
Graphical
elements/Images:
An image is embedded on the page to enhance the visual appeal of
site and grab users’ attention.
Color Specs: The page has white, black, and light pink background color. This is
key in avoiding the monotony of one color background which is
unappealing. Text color used include white and black. Dark text

23
HUMAN INTERACTION
colors are used against light backgrounds while bright text color is
used for the black background.
Font Specs: Different font size is used for different content. For example, headings
have a large font size while body content has small font size. This is
key in attracting users and helping to differentiate the content
presented.
Additional
Comments:
The original website is unattractive and does not engage the target
audience as expected.
The website should incorporate various media such as images and
video to enhance visual appeal.
The navigation bar is found in the content section and this is not
appropriate. It should be placed on the header to enhance usability.
Homeschool
Hangout
Zone
Home Subject
s
About Friends Miscellaneous
Miscellaneous
Lorem ipsum. Lorem ipsum. Lorem
ipsum. Lorem ipsum. Lorem ipsum.
Lorem ipsum. Lorem ipsum. Lorem
ipsum. Lorem ipsum. Lorem ipsum.
Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem
ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.

24
HUMAN INTERACTION
Copyright 2017.
Current Website

25
HUMAN INTERACTION
New Miscellaneous Page Design

26
HUMAN INTERACTION
Question 2

27
HUMAN INTERACTION
Report
URL: http://homeschool-hangout-zone.weebly.com
A website has been created using the Weebly platform. It consists of five pages which include
homepage, subjects, friends, about, and miscellaneous. Each of this page displays specific
information that is aimed at informing users. The homepage provides a brief description of the
site and defines the content available on the site as well as the purpose of the website. This is key
in informing the target audience on what to expect from the student.
The subject page provides information about the subjects taught at school. These subjects include
maths, science, English, history, and social studies and geography. The page provides a
description for each subject which includes defining the purpose of each subject and its impact
on a student. Images relevant to each subject are included to enhance the visual appeal of the
website as well as maintain user attention. The about page provides key information about the
website including its purpose and goals for the target audience. The friends page provides
information on the importance of having friends and includes a link to another site.
Miscellaneous page displays links to other sites which are helpful for students and teachers.
Various changes have been done on the site to enhance the design. The key changes include
placing the navigation menu at the top and creating a page for each key part of the website.
Placing the menu on the header instead of the sidebar improves website usability as users don’t
have to scroll the page to view the link they have to click (Djonov, 2007). The client’s website
has only one page and the menu have external links. In this website, each link points to a page on
the website instead of an external website. These page contain key information that can help
users before they visit the external links included in the content section. The new web design has

28
HUMAN INTERACTION
incorporated various background colors to eliminate the monotony of one background color.
This enhances the visual appeal of the website as well as content readability. Overall, the
changes made were aimed at enhancing usability of the website as well as improving its design
to appeal to the target audience.
The website design has a minimalist layout which is designed to reduce information clutter on
the website. Typically, the design has one responsive column which incorporates a large white
space. A large space is allocated to the web elements to
improve content organization and readability of the site
(Coursaris., 2012). The white space used gives an illusion of a large empty space. The layout is
made up of a header, content section, and footer. The header contains the logo and navigation
menu. The logo reinforces the brand identity of the site.
The navigation menu on the header includes links to all web pages. This enhances website
usability as users can easily find information with just a few clicks.
The content section displays most of the website content including images and content. Images
are incorporated in the website to enhance the visual appeal of the site. Text is appropriately
organized to ensure it is visible and readable. The footer is displayed at the top and is used to
display a copyright statement.
References