CIS 421 EXERCISE 1
Dean West – 004242472 – MW 6-8PM
I. Strategy plane defines developer goals and user goals in using site
1. Business Goals:
a. What are your goals in developing the website?
My goal by developing this website is to raise $6,000 for the Marie Curie Cancer Care in
order to go on a 7-day hike to the top of Mount Kilimanjaro in Tanzania.
b. What are your site objectives?
My site objective is to create a functional website will attract sponsors to donate money.
2. User Needs:
a. What are the user needs you are planning to resolve?
I am planning to resolve the users’ sponsoring needs.
b. Who are users? Demographics (age, education, socio-economic
status), interests, technological qualifications, etc. Describe your
intended audience (not entire world).
The audience I am trying to reach is 18 – 60 year old males and females, of all races. I
intend to reach audiences of a somewhat educated background, with a middle class socio-
economic standing. I realize this is a broad range of people, however, I feel it is
necessary at this point to reach as many people as possible, and I feel I can create a
website that reaches all people in this age range. However, this site will be more
appealing to users between the ages of 40 – 60 because they may be suffering themselves
from cancer, or know of a relative or a friend that has passed away from cancer.
c. What are the user goals in using your website?
The user goals for using my website are: To gain awareness of what exactly I am raising
money for, to gain knowledge on where Tanzania is located, learn about Mount
Kilimanjaro, and to donate money.
Task analysis – precise steps users take to accomplish their goals (affects
functionality and navigation).
The precise steps that users will have to take to accomplish their goals would be to watch
the introduction, click on the appropriate links to be educated on what exactly I am
raising the money for, and finally, click on a separate link that leads them to my donation
page which will be setup via PayPal, or the medium of transfer that the Marie Curie
Cancer Care feels is the best for the money to be transferred.
3. Success Metrics
a. User tests (exercise 2). – User has to be able to understand site and
accomplish tasks, navigate, etc.
8 – The user will be able to clearly understand the site and accomplish the task of
educating him or herself on the subject, and will be able to donate the money
b. Usability rating level for which you will aim. Will be affected by your
user demographics. (exercise 3).
5 – The user will be able to use and navigate the website using a consistent layout.
c. Accessibility rating (exercise 4). Has to achieve 508 level? What is
reading level of target audience? Etc.
7 – This site will achieve the 508 level.
II. Scope plane defines various features and functions of site and how they fit
together – based on strategy plane analysis.
1. Precise topic of your project
My precise topic is Dean West’s hike up Mount Kilimanjaro to raise $6,000 for the Marie
Curie Cancer Care.
2. Scope of project – be precise so you know what you are including and what
you are not including. You will only include content inside the scope of the
a. What part of the topic is inside the scope of your project?
The parts of the topic that is inside the scope of my project are: informational page on a
brief summarization of Tanzania and where it is, a more in-depth look at Mount
Kilimanjaro, a page describing where the money is going, and lastly a page where one
will be able to donate.
b. What part of the topic is outside the scope of your project?
The part of my topic that is outside my project is Tanzanian politics, history, and it’s
3. Web as software interface:
a. What is the functionality (feature set) of the website (only needs to be
i. What functionality does your feature set require so that users
can accomplish their user goals and complete their tasks?
The functionality of the website will include buttons to click on in order to be guided
around the website, an informative flash animation that can be skipped, stopped, or
viewed again, and will also have an interactive chart which will show how far I have
come to completing my goal of $6,000.
ii. Emotional design requirements: How will your site appeal to
users’ behavioral processes - How well does the functionality
work? (not in Garrett book)
I will appeal to the users’ behavioral process by using different colors for each separate
section of my website. I will also use some background music for the introduction.
1. Make site functionality easy to learn and understand
(e.g., how users do tasks).
My site will be quite self-explanatory, and users will be able to understand my website
2. Make site functions perform reliably so users are not
I will make the site functions perform reliably so users will not be disappointed.
1. The site will comply with XHTML version 1 transitional
I will make the site comply with XHTML version 1 transitional W3C standards.
2. The site will use external cascading style sheets to
separate content from presentation.
My site will use external cascading style sheets to separate content from presentation.
3. The site will comply with CSS 1.0 W3C standards.
My site will comply with CSS 1.0 W3C standards.
5. The site will comply with section 508 of the
My site will comply with the section 508 of the rehabilitation act.
4. Web as hypertext system:
a. Content requirements
i. What types of content will you need?
I will need informative content that both educates and appeals to my audience.
ii. How will you make sure that the content is attractive and
engaging to your defined audience – How will you make it
appeal emotionally to the users and cause them to feel pleasure
in using your site? (Not in Garrett book – see ppt).
In order to keep my webpage attractive and appealing I need to use emotionally appealing
information, and will be more appealing for some because some may be affected by
cancer, and will feel pleasure in donating money and knowing that it will go towards a
1. Appeal to Users’ Visceral Processes – initial, quick,
unconscious reactions that users do not think about.
a. Colors affect hormones and emotional reactions
I will be using a color scheme similar to that of Tanzanian national colors.
b. Music does the same – can excite or calm you
The music I will be using is a familiar ‘Americanized’ African song which people will
associate with Africa.
c. Design and style that appeals to your audience
and what you want them to experience.
I want a simple design. I want to have a clear website without any clutter. I want them to
experience a refreshing website that will show them that I am doing this for a good cause
which will want them to donate money.
d. Conventions – ways of doing things that
everyone understands and to which we can react
automatically without thinking (e.g., routines).
My website will provide simple conventions in order for users to react automatically
2. Appeal to users’ reflective processes – how the site
affects the users’ thought processes:
a. The message, the culture, the meaning of the
content you present causes users to stop and
think about what they are experiencing.
My message will be very powerful and emotional, and will make my users stop to think
about what they are experiencing.
b. Nostalgia: connects users to good memories of
My users will have a sense of nostalgia when they reminisce about friends or family that
may be or may have been affected by cancer.
c. Appeals to the users’ self-image (makes them feel
hip, part of a community of people who do good
deeds, raise fish, play on-line games, etc).
This will appeal to users’ self image, because they will feel good donating this money
towards a charitable cause.
iii. What is your target download speed (based on user
My target download speed will be targeted for both 56k dial-up connection, as well as
high speed internet.
1. Define file size limits for different types of media.
The file size for video will no larger than 5 megabytes. The file size for audio will be
nothing over 2 megabytes. GIFs and JPGs will be no larger than 900kbs.
2. Define file size limits for entire content on individual
pages in your site.
The total file size limit for the entire individual page on my site will be several megabytes
large. Each page will only be a couple of megabytes large, if that.
iv. Where will you obtain original content?
Most of my original content will come directly from my knowledge. I have read
extensively over what I will be doing, so I have most of it that I can put back in my own
words. I will have to, however, get some images (with artists’ consent) to put on my
webpage such as pictures of Mount Kilimanjaro because I do not have original pictures of
v. How frequently will you update content?
I will update my website each time a donation is made. I will list the sponsor and
decrease the target money that I have to attain. I also may create a blog for people to
write on if they so wish.
5. Validate each of your decisions in this plane against the strategy plane
requirements to be sure they are consistent.
III. Structure Plane – how users get from page to page, arrangement of
navigation objects. Both sides of this plane emphasize definition patterns
and sequences in which options are presented to users.
6. Web as software interface: Interaction Design.
a. Describe possible user behavior (based on user tasks)
i. What conventions will you use? For example, blue colored,
underlined hyperlinks are a convention that is widely followed.
The conventions that I will use will be the blue colored underlined links for external
links, flash animation for my primary navigational structure, and blue colored hyperlinks
for my secondary navigational structure.
ii. Consistency in design and functionality, including navigation
across entire website. How will the users know where they are
and what they can do (what clues will you provide in your
In order for the user to know where he or she is, there will be a ‘greyed-out’ link of the
page they are currently on. The links will be of a Flash nature, and you will be able to
interact with the link.
iii. Error handling
There will be an error handling exception included in the design of my website if the user
does something that they are not meant to do.
7. Web as hypertext system: Information Architecture
a. What are the categories of content on your website (top-down
The categories of content will be: Introduction, main page, informational page, and
b. What are the subcategories of content (bottom-up approach).
The subcategories of the main page will be the information and the donations page. The
subcategory for the information page will be external links leading to other informational
websites relating to Tanzania or Mount Kilimanjaro. The subcategory for the donations
page will a donation link leading to PayPal.
c. What organizational and navigational schemes will allow users to
navigate the site effectively and efficiently through the categories and
sub-categories of content? Or where will the main, global navigation
be? And the secondary local navigation for a subsection?
The main global navigation will be at the top of the page, while the secondary local
navigation will be in 12pt. font at the bottom of the page.
d. Define specialized terms you will use consistently throughout the site.
Some specialized terms that I will be using are: Kilimanjaro – Shining Mountain, the
pound exchange rate = $1.86 to the British Pound. Everything else will be defined in the
website if specialized terms come up.
e. Include a drawing of your website information structure (you don’t
need to diagram all of the links on a page) (see p. 108)
8. Validate your decisions against the previous planes’ decisions for
IV. Skeleton plane defines what form the functionality you defined in the
structural plan will take, using more refined detail at the level of
individual pages and their components.
9. Information design communications ideas to the user – cuts across both web
as software interface and Web as hypertext system.
a. Wayfinding – information or signposts to help the user know.
i. Where they are (e.g. color coding of different sections, page
Each section will have a corresponding color in order for the user to know where they
The site will also include bread crumbs for each subcategory.
ii. Where they can go.
The primary and secondary navigational system will always be visible for the user.
iii. What choices will get them close to their objectives (integrated
with Navigation design)
Their choices that will get them close to their objectives will be to educate themselves on
the subject matter at hand, and then to make the final decision if they would like to
donate money towards the charitable cause.
b. Provide a graphic of page schematic or wireframe – barebones
depiction (template) for how pages will be laid out with colors, rows,
and cells for different parts of pages. You can do this in Photoshop,
Fireworks, Dreamweaver, etc (see pg. 136).
10. Web as software interface: Interface Design – provides users with ability to
a. How will you make your interface consistent with others with which
your users are familiar? Name some websites your intended users
In order to keep my interface consistent, I will be using a common navigational scheme
found in many websites. There will be clear consistency in not only the navigational
scheme, but as well as the graphics and potential downloadable assets. Some websites
that my intended users may use are:
b. Make your interface consistent with itself. What parts of your
interface design will be internally consistent so users only have to
learn them on time?
The internal design that will be consistent throughout the website is the navigational
scheme at the bottom of the page, as well as the mailto link on the bottom right of the
c. How will you make it easy for users to accomplish their goals and
complete their tasks?
In order for users to easily complete and accomplish their goals of being educated and
informed on my website would be to create material that is clear, concise, and to the
point. I find that this would be the most effective way to help my users accomplish their
d. What functionality needs to be on the same page? How will the user
get to another page if they need to?
Their will be two navigational sections on the website that will on every webpage. The
user can decide between either the more interactive link at the top of the page, as opposed
to the generic hyperlinks found on the bottom of the page.
e. Journey through the website that user can take to accomplish their
i. First you do this, then this, then this.
ii. E.g. buying a product on amazon.com
iii. Who controls the progress through the story? User? System?
iv. Who thinks they are in control?
The journey through my website: There will an introduction of Mount Kilimanjaro, and
the challenge that I am facing. The users will then have the option of skipping through
the introduction, or replaying it. If the user leaves the Flash video, it will automatically
go to the homepage of my website. From there, the user can click on a link which they
would like to be informed on. They can click on the informational part of the website
which will educate them on Mount Kilimanjaro as well as the goal that I am trying to
achieve. From there they can click on external links which will take them to
informational websites about Tanzania, Mount Kilimanjaro. From there they can go back
and click on the goal link which will lead them to a brief statement on what the goal is
that I am trying to achieve. This will have an external link to the Marie Curie Cancer
Care society. When they go back to the homepage, they can then click on the last
remaining tab which is the donations page. The donations page will have an external link
to donate to PayPal.
f. Continuity throughout website: What happens as users move through
i. Beginning: 5 seconds to catch attention, set initial expectations
ii. Middle: Where most of activity occurs; interruptions (e.g.,
iii. End: “Twister” that tells the user the end is coming.
iv. Example: Story of buying something and checking out on e-
When the users move through the website their will be a common banner through each
page. There will also be the common primary navigation scheme, as well as the common
secondary navigational scheme.
Beginning: The first 5 seconds of the user’s experience will be watching the Flash
animation that I am going to create. The initial expectation of the user will be that it is a
professionally designed website, and that it is an interactive website.
Middle: The middle section of my website will be where the users can choose between
the three sections of South African history, South African culture, and South African
End: There is no real end to the website, this is an educational website, and is not a
website designed like an e-commerce website.
11. Web as hypertext system: Navigation design – provides users with ability to
a. Describe how the user will navigate within the website?
The user will navigate via the primary and secondary navigational scheme that will be
provided within the website.
b. Describe the groups of navigational objects that belong together.
The external links that connect the users to similar and other helpful websites will be the
navigational objects that will be grouped together.
c. How will the users know where they are within the website?
The users will know where they are within the website by seeing that the link they just
clicked to that section of the page will be grayed out. It will also have a header of what
link they just clicked on.
d. What global navigation (persists throughout entire site) will you
The global navigation that will be found throughout the entire site will be the three
sections found at the top of the webpage below the banner.
e. How will you handle local navigation within a subsection of the site?
The local navigation will be handled with appropriate anchors or links that lead to the
appropriate local pages within the site.
f. How will you handle the supplementary navigation that provides
shortcuts to related content that is neither global nor local?
The supplementary navigation will be handled via external links.
g. What about contextual navigation (inline links within content).
h. Identify any courtesy navigation your site might need to external sites.
The external links that will be a part of the courtesy navigation are the links that will
complement the corresponding sections to appropriate sites.
i. Provide a picture of site navigation down two levels of site hierarchy
(Global and local) – can be a diagram such as pp. 125 – 127 or can be
depiction on wireframe of locations of global and local navigation.
12. Validate your decisions against the previous planes’ decisions for
When I validate my decision against the previous planes’ decisions for consistency,
most of my decisions match up, however, a few are inconsistent with what is
V. Surface Plane – Arrangement of elements to enable interaction,
navigation design, information design, and their visual presentation –
what they see.
1. How does the visual design support the objectives defined in the lower planes?
The visual design supports the objectives defined in the lower plane by grouping objects
together in an attention-grabber way, the eye-tracking test will be taken into
consideration when designing my website, the site will be consistent, the colors will be
smooth and subtle.
2. How does the style support the brand identity?
The style will support the brand identity by having a common link between the two (such
as a watermark).
3. What is the single focal point in your page design (you can refer to a location on
The single focal point in my page design will be the chart of how much money I have
raised so far, and what is still needed.
a. How does the layout, color, contrast, bring the users’ eyes to the focal point
so they get the message?
In order to bring the users’ eyes to the focal point, I will create the chart with attractive
colors, and an interactive design.
4. Designing in black, white and gray before adding color – what parts of your page
design will be darkest, lightest, midtones?
The top portion of my webpage will be the darkest, followed by my pictures being gray,
and my text being midtones.
5. How will you ensure the text you use is readable (contrast, size, font-family?)
To make sure that the text is readable, I will take the advice given in class to increase text
size, and have my text size at least a 14pt. font. I will most likely use the generic Arial
6. Describe the color scheme you plan to use.
The color scheme I plan to use will be of up to four colors (the colors of the Tanzanian
flag). For my informational section, I will use a soft green color scheme. For the goal
section of my page, I will use a soft yellow. For the donations part of the webpage, I will
use a soft cyan.
7. Validate your decisions against the previous planes’ decisions for consistency as
When I validate my decisions against the previous planes’ decisions for consistency as
software interface, my decisions mostly match up with what is recommended.