Building an effective web
presence.
A look at the website project
assignment instructions.
MGMT 230
Week 3
After today’s class you will
understand…..
• The main steps in the website planning and
development process
• How to identify goals for a particular
organizational website
• How the motivations of website visitors can be
included in site design
• The requirements for the website project
assignment
Phases in the web site
development cycle
Planning and building an Effective Web
Presence
• Creating an effective Web presence is
absolutely critical
• It is the often the ONLY contact that
customers and other stakeholders have
with a firm
• Thorough planning is very important
Steps in planning an effective web
presence
1. Determine site goals
2. Identify the target audience and create user profiles of
audience members
3. Conduct market research and competitive analysis
4. Design the site for audience, functionality, and usability
Identifying the purpose of a web presence for
an organization
• A web site can have many purposes, both broad and
specific. Some examples:
– Provide product or service information
– Sell a product or service
– Increase brand recognition
– Provide help, operational instructions, or
customer support
– Shift customers toward self service
– Induce people to subscribe to a newsletter
– Provide information for the media
– Allow people to make bookings online
Not-for-Profit Organizations
• Key website purpose for a not-for-profit organization may
be:
– information dissemination
– fund raising
– advocacy
• Web is widely used by such organizations as:
–
–
–
–
Political parties
Museums, libraries
Advocacy organizations such as the David Suzuki Foundation
United Way
User oriented design: Motivations and Goals of
Web Site Visitors – why are they there?
•
•
•
•
•
•
•
•
to learn about products or services
to buy the products or services
to obtain information
to obtain contact information for a person or department
in the organization
to interact with other users
to search for something in particular
to browse
to be entertained
• Catering to all these different needs in designing a web
interface can be challenging
• When you set the goals for a site, think about what people
want and why they are there
The purposes that the website will
serve need to be translated into
SMART goals
•
•
•
•
•
Specific
Measurable
Achievable
Realistic / Relevant
Timebound
• These goals need to be reflected in the design
and functionality of the website
How do you know if your site is
meeting its goals?
• Conversion rate: keeping track of the percentage
of your users that you persuade to move to the
“next step”.
• The next step could be
–
–
–
–
registering on your site
customizing your site and saving their preferences
signing up for an email newsletter
making a purchase
• Shopping cart abandonment is a key metric in
assessing eCommerce site success and ROI
• In Week 10 we will look in much more detail at
web metrics
Aims of design for usability
1. Understand user’s goals
2. Anticipate them
3. Make it easy to accomplish them
Web project assignment
• Stage 1 of this assignment is the production of a
planning document (worth 20%) due October
28th
• Stage 2 is the production of the site itself (worth
15%) due November 28th
• Before you develop, you need to PLAN
• Assignment instructions, some samples and the
marking scheme are on the course website
Another way of looking at the
elements of the web design process
https://medium.com/@ireneau/design-is-5b867e9f2614
Select your organization
• Choose a business or non-profit organization
for which you would like to design and
construct a simple website (6 html pages).
• This can be a real or a fictitious business or
organization. You must get approval for your
choice from me by email before beginning
your project.
PART 1 – WEBSITE PLANNING AND DESIGN
DOCUMENTATION
• Sections of your plan
– SECTION 1: Goals, target audience,
business model, and competitors
– SECTION 2: Information architecture, page
layout etc
– SECTION 3: Design “look and feel” and
usability
– SECTION 4: Site content – text and images
SECTION 1: GOALS, TARGET
AUDIENCE, BUSINESS MODEL, AND
COMPETITORS
1. A brief description of the business or
organization for which you are creating the
website.
•
•
•
•
•
•
•
•
Where is it?
What does it do?
Size
Number of employees
How long in business
Target markets
How long has it had a web presence?
Is this site a mini-site or the only web presence for the
organization?
2. A list of 10 – 15 SMART web site goals. Think
of these goals both from the point of view of the
organization and also from the point of view of
web site visitors (what are all the things that site
visitors will expect to do or find there?). For
each goal, indicate what you will measure so
you will know whether or not your site is a
success.
The site must be designed so that these goals
can be met.
Section 1.2 SMART GOALS
• Goal for a typical product page on an ecommerce site selling
outdoor clothing.
• Main user goal: to quickly learn more about this
product’s design, features and specifications to
determine whether it fits their budget, needs and
preferences.
• Secondary user goal: buy a fleece jacket
• Main business goal: encourage the user to purchase
the product thus increasing sales by 20% over the next 3
months.
Web site goal
Metric that will be used to
measure goal attainment
Increase sales of fleece jackets online by 20% over
the next 3 months.
Sales figures of fleece jackets
sold from product page
Setting smart website goals
4. A description of the target audience(s) for the site
(demographics, psychographics etc)
• Description of target audience – listed in bullet form
– Demographics (age, sex, location, job, education level, language
etc)
– Psychographics (interests, attitudes, etc)
5. A detailed user profile of at least one member
of your target audience.
• Sample of a user profile – make your site user a real
person and describe his/her actual use of the site
• Example: online store for yoga gear
– Jenny is a 22 year old female university student from Victoria, who accesses
the web on a daily basis from her iPhone and from her laptop. She is
extremely internet savvy and completes online transactions for clothes, music
etc on a regular basis. She has high speed internet access both at home and
on campus. Typical tasks on the site include browsing for products to
purchase, reading and posting reviews, and checking the forums for
information about what’s new in yoga. She has a username and password and
is able to complete purchases quickly and easily.
6. The domain name and top level domain(s) that you
would choose for your site. These MUST be
available on the date that you choose them
(although they may have been registered by the
time I mark your plan). Include a screen shot as
evidence that the domains were available.
Explain what the most important factors were that
you took into account in selecting this name and top
level domain(s).
7. An explanation of how you will generate
revenue from the site to support your online
activity. If there is no direct revenue from the
site, explain how you will justify the
expenditure on building and maintaining the
site in terms of organizational cost savings,
lead generation etc.
8. A brief overview of two major
competitors (or similar organizations),
including URLs.
SECTION 2: INFORMATION
ARCHITECTURE, PAGE LAYOUT ETC
1. A site map for the site showing how
the pages will link together .
Use the drawing tools in MS Word (or similar
program) to create the diagram
(See sample on course website)
2. “Wireframes” or diagrams of each of the six pages that will be
in your website, (these can be produced in Word, or a
diagramming program of your choice). These will act as the
blueprints from which you will build your site. Each diagram
should show:
a)
The layout (columns, sidebar etc) for each of the 6 pages in your site.
(Use your chosen WordPress Theme Options to find this
information).
b) The position of the navigation menu, and the navigation labels (in
WordPress, the labels will be the same as the "page titles").
c) The headings (these will be the WordPress "page titles") and
subheadings for different areas of the pages.
d) The positioning of the textual contents of each area of the pages and
an indication of what the text will be about in each area (do not
include the actual text itself).
Wireframes (cont’d)
e) The location, names, and URLs of hypertext links to (at least) two
external sites (select appropriate sites that would be of interest to
your site visitors or add value in some way).
f) The location, name, and URL of at least one video that will be
embedded in a page (the video must provide appropriate content for
your site).
g) The position of each image on the page, the filename, the image size
(width and height) in pixels, and a description of what the image
shows (this will be the same as the contents of alt tag). Each page
must include at least one image (in addition to banner images).
h) One of the six pages must include a form so that you can collect
information from your visitors. Include the text that will be on the
page that explains what the form is for, show the different form
elements text boxes, radio buttons etc) that you will use (you must
include at least 3 different types), and the labels and hints that you
will use for your form. (When you build your site you will use Google
Docs to create the form, then embed it into your WordPress page).
Wireframes - tips
• See sample of a wireframe on the course website
• In the lab in Week 7 we will be looking at WordPress themes
in detail
• Your home page may be different in structure and layout that
the content pages
• For pages that have the same layout, use MS Word to create
the first layout containing common elements (navigation bar
etc), then use Save As to create the wireframes for other
similar pages
• Remember you are going to use these diagrams to create your
site
SECTION 3: DESIGN “LOOK AND
FEEL” AND USABILITY
1. Details of the site concept (what “image” will
the site portray to its target audience?)
• “Look and feel” is used to describe the overall external
characteristics of a website, and how the elements of the site
interact to create the user experience
• Includes colours, fonts, graphic style and layout.
• To combine all these elements effectively, you need to
develop a site “image”
• make a list of words that describe what you would like the site to
convey, these might be attributes of the user, or of the experience of
using the site (eg. professional, funky, cool, sophisticated, flowing etc)
2. The name, and a screenshot of the
WordPress theme preview that you have
chosen. Explain the reasons you chose that
particular theme.
3. Screenshots (not printouts) of the home page
from 2 sites from a similar industry or sector
that you feel represent good web design.
Include a brief explanation of why you think
these are effective web sites.
SECTION 4: SITE CONTENT – TEXT
AND IMAGES
Site content
• You should obtain and organize the content of
your site during the planning stage so that it is
ready for when you begin the actual site
development. The content will consist of text,
images, and a YouTube video.
1. Include in your plan a short paragraph
explaining how, when, and from whom you
will obtain the content for your site. Be really
specific.
• 2. Include information about all of your images in
a 5-column table. In the first column list the
filename and extension of the image, in the
second column indicate its width and height in
pixels, in the third column indicate which page it
will be on, and in the fourth column write a
description of what the image shows (the same
wording as you will use for the image alt tag in
WordPress). The final column should include a
link to the source of the image (if you hold the
copyright to the image yourself, or have
permission to use the image, then this is not
necessary).
Image File name &
extension
Width and height (pixels)
Title of page in site
Image description (alt
tag)
Image source (link)
3. Video information
• Include information about your video(s) in a 4
column table
Title and author of
video
Width x height
(pixels)
Title of page in site Video source (link)
4. Include information about your SEO "keywords" in a
two column table. In the first column list the title of
the page and in the second column write the
keywords / phrases that the page is optimized for.
Title of page in site
Keywords / phrases
Search engine optimization (SEO)
• Think about what people might type into a search
engine to find a page with that type of content those are your keywords / phrases.
• Each page in your site will have some keywords in
common, but some will relate to the particular
content on that page
• You will include these keywords / phrases in
headings, subheadings, and in the text itself when
you write your page copy.
• We will be looking at search engine optimization in
Week 5
PART 2 – WEBSITE PRODUCTION
• Due date: Friday, November 28th by 4:30pm
• Part 2 will consist of the development and
production of the website itself using
WordPress.
• The website must include all the elements
shown in your plan, as indicated above.
Next steps
• Read the web project assignment instructions
• Decide the business or non-profit organization
for which you would like to design and
construct a website (real or fictional)
• Email me to get approval for your choice