Module 3: Web Hosting & Analytics (in brief)

• Introduction to site design

• Online value proposition
• Web Hosting
• Introduction to web analytics
• Data collection– weblogs, key metrics- visits, unique visitors, time on site, page
views,
bounce rate, exit pages, Traffic sources, Share of voice, outcome analysis- conversion
analysis, average order value,
•A/B testing, customer orientation, design and personalization, aesthetic page design,
content strategy & copywriting, navigation and structure interaction
• Website prototyping, Web Accessibility, localization, Information architecture (IA),
• Methods of IA design- card sorting, sitemaps, wireframe, UI/UX
Why do we need websites ?
⮚ To Provide logical structures that help us find answers and complete tasks.
⮚ To present an intelligible organization and avoid frustrating navigation

“Bad websites remind us of buildings that fail: houses with flat roofs that leak,
kitchens with no counter space, office towers with windows you can’t open, and
maze like airports with misleading signs”
PROBLEMS with bad one :

o We can’t find the product we need;

o we can’t locate the report we found last week;
o we’re lost inside an online shopping cart.
 Components
https://colibriwp.com/blog/website-layout-design-ideas/

• Homepage
• ‘About Us’ page
• Magazine or blog
section
• Merchandise selling
• Case Studies / Clients /
Portfolio Page
• Landing pages
• Contact page
• Privacy policy page
 ONLINE VALUE PROPOSITION
An online value proposition is closely tied to your brand
positioning which answers questions like: who we are, what we offer,
which markets do we serve, what makes us different?

But the OVP extends this the difference is that it identifies the
reasons why customers will click on, return, register or buy from your
site and ideally feel motivated enough to share their experience

It is better to over-deliver on the online value proposition than under

deliver against promises you can't keep - remember that you
generally have only one opportunity to impress.

For example: olx, uber, housejoy

https://www.davechaffey.com/digital-marketing-strategy/r
etail-e-commerce-online-value-proposition-case-study-sp
ortshoes-com/

https://neilpatel.com/blog/effective-value-proposition-101
/
Web Hosting

Web hosting is a service that allows users to store their

website files on a server and make them accessible to
the public through a web browser. It's similar to renting
space on the internet.

When choosing a web hosting service, you can consider

factors like uptime, scalability, and cost
Web Analytics
Refers to the analysis of quantifiable and measureable data
of your website with the aim of understanding and
optimizing the web usage and focuses on various issues.
For example,
• Detailed comparison of visitor data, and Affiliate or
referral data.
• Website navigation patterns.
• The amount of traffic your website received over a
specified period of time, search engine data.
Some of the web analytics tool are crazyegg, Yahoo!
Web analytics, Google Analytics, Kissmetrics, Adobe
analytics
Data collection techniques for Web Analytics
Web Logs: This process refers to the tracking files that are
routinely stored on a web host’s server. These files automatically
record visitor behavior (such as time on site, pages visited, exit
pages, visitor’s IP address, HTTP code, and much more).

These web logs details are not publicly available and require
admin’s access to the server where the website is hosted.

Benefits of Weblogs:
• Using log files, you can track every file on your server.

• Using log files, you can better detect crawler activity, deep
linkers, click fraud, spammers and errors.
• Using log files, you can track every file on your server.
• Using log files, you can better detect crawler activity,
deep linkers, click fraud, spammers and errors.
• Page caching by ISP
• Dynamic IP addresses
• Proxy servers
CATEGORIES OF ANALYTICS
Behavioural Analysis

1) Visits/Sessions – It is defined as a series of page

requests with a gap of not more than 30 minutes between
each one. When someone visits your page it is called a visit
or session.

 Click versus visit – Click is when a person clicks on an

ad or a link. Upon clicking, the user visits the webpage. In
this case the number of clicks and visit should remain the
same. But in some cases it is not always the same.
Unique Visitors – They are the number of different users
requesting webpages from a website during a given period,
regardless of how often they visit those webpages.
This is also called Visit by Cookie. A unique visit will tell
you which visits from item 1 are visiting your site for the first
time. The website can track this as unique by the IP address
of the computer. *The number of unique visits will be far less
that visits because a unique visit is only tracked if cookies
are enabled on the visitors computer*

2) Time on Site:
Indicates the engagement of the visitor. More the time spent
on site, greater is the stickiness of the site . Depends on the
nature of the webpage eg FAQ vs blog
3) Page views: This is also called Impression. Once a
visitor arrives at your website, they will search around on a few
more pages. On average, a visitor will look at about 2.5 pages.
Each individual page a visitor views is tracked as a page view.

Every unique URL is a page. The number of page views also

depend on the design of the website. For example if a site uses
slides or flickers, then the time spent would be more but the page
views may be less as the user is on the same URL but is reading
more content.
4) Bounce rate
• It is the %age of single page visits.
• These are the visits in which the user leaves from the landing
page without interacting with the page. If the user interacts with
the page- like poll/play a video, close a pop up- not counted as
bounce.
• Some pages- contact us/faq have a high bounce rate.
• 30% bounce rate is considered as acceptable.
• Visitor can bounce from ones site by – clicking on a link to a page
on a different website, clicking on a back button to leave the
website, closing an open window or tab, typing a new url, session
timeout.

5) Exit pages: Pages from where visitors are dropping off in the
process of buying a product are called as exit pages. Business
need to analyse why users are exiting a page- high
price/unavailability of product/payment issues.
6) Traffic sources
• Direct visitors- users that visit your website by directly typing
your url in the browser address bar.
• Search visitors: users that visit a website based on search query
in the search engine.
• Referral visitors: users that visit a website because it was
mentioned on another blog or website.

7) Share of voice in search

• It is the percent of search traffic a brand gets from SERP as
compared to competition.
• The search traffic depends on CTR which depends on the position
in SERP.
OUTCOMES ANALYSIS
We may get many sessions and visitors in our website but what is important is
their business outcomes. You may be interested in knowing how much revenue
was generated or conversions happened. We need to implement conversion
tracking and analyse business outcomes. Some outcome metrics are mentioned
below.
1) Conversion rate
• It is % age of users who perform an action that is desired by the website
owner. Generally it is the % age of website visitors who do any kind of
transaction on your website.
• It can also be the following: - Allow the website to store credit card
information , sign up for a subscription –
• Download a file/trial version
• Ask for more information
• Use a certain feature of application
• Upgrade to a higher level - Download the mobile app and use it
• Spent time on website and read it
• Return to site
2) Average order value (AOV): It is the sum of revenue generated
divided by a number of orders.
• Major business outcome of online business.
• Can segment customers on basis of high, medium, low AOV
• Impacts revenue and profitability of the company

3) Multichannel funnel: It helps you understand the different traffic

sources that sent visitors to your site during the consideration process.
This can include Organic Search, Paid Advertising, Direct, Referral,
Display, Social Network, or Other Advertising. This is great because
you’re able to see your marketing initiatives that work together to
produce conversions.

The reports available in Multi-Channel Funnels are: Assisted

Conversions, Top Conversion Paths, Time Lag, and Path
Length.
a) Top Conversion Paths: It show popular channel combinations
users interact with before conversion. These include: Paid and
organic search, Referral sites, Affiliates, Social networks, Email
newsletters, Custom campaigns that you’ve created, including
offline campaigns that send traffic to vanity URL.

b) Assisted Conversion: This metrics shows the contribution of

each channel towards conversion. There can be three ways in which
channel can contribute.

• Last Interaction is the interaction that immediately precedes the

conversion.
• Assist Interaction is any interaction that is on the conversion path
but is not the last interaction.
• The First Interaction is the first interaction on the conversion path.
c) Time Tag: These reports can help one
understand how many days users take to convert.
Many days may indicate that users are finding it
challenging to take the final leap of faith in a product
or services. One can see how to use testimonials,
ratings and video to increase credibility and thus
conversion.

d) Path Length: It shows how long is the sales

cycle. It shows how many interactions users do
before conversion.
4) Visitor frequency and recency: Visitor frequency means that during the
reporting time period how often do users visit a website. Visitor recency is how long
has it been since a visitor last visited a website.

5) New versus Return Visitor Conversion – One must keep an eye on how many
new visitors they have in comparison to returning visitors. In case you have a store
where returning visitors bring you much more money than your new visitors, it might
be possible for you to invest a lot into acquiring a new customer – much more
than that visitor will buy from you for the first time, as long as you have a
good customer retention strategy in place.

6) Value per Visit - The value of each visit is a simple metric to understand.
Basically, it asks how much each visit is worth. It can be categorised in two
conversion.
a) Micro Conversion: They are basically assist conversion and are not ultimate
sales, but the visitors is moving towards it by downloading an eBook or
registering.

b) Macro Conversion: It is ultimate sale or conversion. One must calculate

7) Percent of Visitors who view Product Pages –
It is one of the important metric because the ultimate objective of
any business is to get sales and that will happen only when the
users visit the product pages. It is important to observe if the
visitors is less because it could be that users are distracted by
blog, or navigation to product pages.
EXPERIENCE ANALYSIS
This is the third category of web analytics. It is used to find out what
is the users experience while visiting your website and whether their
purpose is solved or not. You can measure by the given below ways.

1) Research data
• Site surveys- take user feedback, purpose of visit, ability for task
completion.
• Usability testing: functioning, navigation of website
• Site visits: observe on real time basis

2) Website experimentation and testing

• A/B testing: split testing to check which website version performs
better
• Multivariate testing- testing multiple variants concurrently
a) A/B Testing - A/B Testing or split
testing is a comparison between two
variants of one aspect, say, two versions of
a webpage. It is like running an experiment
between two or more pages simultaneously
to discover which one has the potential to
convert more.
Multivariate Testing (MVT) –

Unlike A/B testing, the goal of multivariate

testing is to determine not which page, but which
combination of variations is the most effective in
improving the target metrics. The number of
variations can vary, but you can test elements
like the pictures on a page, the buttons, the
headlines, the fonts, and you can create two or
more variations for each element, then test all
the combinations to find the winning one. The
following figure will explain in detail
CUSTOMER ORIENTATION
Customer Orientation in the Digital World. Customer orientation is concerned
with helping customers to meet their long-term needs and wants and to satisfy
them.
User-centred design starts with understanding the nature and variation within
the user groups. According to Bevan (1999a), issues to consider include:
• Who are the important users?
• What is their purpose for accessing the site?
• How frequently will they visit the site?
• What experience and expertise do they have?
• What nationality are they?
• Can they read your language?
• What type of information are they looking for?
• How will they want to use the information: read it on the screen, print it or
download it?
• What type of browsers will they use? How fast will their communication links
be?
• How large a screen or window will they use, with how many colours?
PERSONALIZATION
Personalization is one of the biggest digital trends that
brands are aiming at today. It is the practice of providing
a customer experience which is well-aligned with the
consumer's preferences and specific needs.
Example : Zivame, Amazon

https://www.youtube.com/watch?v=m2sMsyUN7FY
AESTHETIC PAGE DESIGN
In website design terms, aesthetics is our perception or opinion based on
what we see, feel, hear. The main components of an aesthetically (and
strategically) appealing website are:

• Flow: This is the navigation of your website. It shouldn’t jump all over
the place and have too many boxes or confusion. It should be simple,
straightforward and easy for customers to find things they want to look
at.
• Branding: Your website should reflect your brand, with an easy-to-
identify corporate logo and colours that make your customers feel
warm.
• Images: Stock images might be easy, but people will definitely know if
you have that stereotypical boardroom photo of six perfect looking
people in business suits and ties smiling and ready to charge their
credit cards. Instead, opt for custom photos of REAL people who work
at your company, preferably doing REAL tasks or showcasing REAL
products that you sell.
• Colors: Don’t go for shock factor. Color choices should again,
give off a good aura and put your customers in the mood to buy.
The colors reflect the energy of your website.
• Balance: This is about the content and the balance of your web
pages. If you have a consistency on each page, it will look more
professional than having one page that has a couple of sentences
and then another that you have to scroll down to read ten
paragraphs.
• Social media integration: These days, you need to have your
blog, “Like us on Facebook” and all other social media
opportunities clearly displayed on your website. This way they
can subscribe to your newsletter and stay in touch with you.
https://www.impactbnd.com/blog/18-award-winning-website-design
s
Content
In publishing, art, and communication, content
is the information and experiences that are
directed toward an end-user or audience.
• Taxonomy: In reference to Web sites and
portals, a site s taxonomy is the way it
organizes its data into categories and
subcategories, sometimes displayed in a site
map.
• Categories:
hierarchy/matrix/alphabetical/user/topic
• Tags: A post filed in the Book Review
category can optionally have tags like Fiction,
Mystery, Stephen King.
• Meta data: Metadata is "data that provides
information about other data". In other words,
it is "data about data.“ example library card
catalogs. For instance, the data contained in a
digital photo file often includes ownership,
copyright, and creation information.
Content strategy
• Reflect your organization's goals and user's needs
• Understand how user's think and speak about a subject
• Communicate to people in a way that they understand
• Be useful
• Stay up-to-date and remain factual
• Be accessible to all types of people(internet users)
• Be consistent.
• Following style guides, both for language and design, helps
people understand and learn what you are trying to
communicate.
Copywriting
COPYWRITING: It gets a reader to take a specific action.
Sometimes that’s making a purchase, but it can also be
subscribing to your email list, signing up for your content
library, or calling you for more information

https://www.youtube.com/watch?v=YlVUD6yoFbs
Types of web navigation

The use of website navigation tools allow for a website's visitors to experience the site with
the most efficiency and the least incompetence. A website navigation system is analogous
to a road map which enables webpage visitors to explore and discover different areas and
information contained within the website.

There are many different types of website navigation:

• Hierarchical website navigation
The structure of the website navigation is built from general to specific. This provides a clear, simple
path to all the web pages from anywhere on the website.
• Global website navigation
Global website navigation shows the top level sections/pages of the website. It is available on each
page and lists the main content sections/pages of the website it is also the machine that help in
making searching easy for us
• Local website navigation
Local navigation is the links within the text of a given web page, linking to other pages within the
website.
A global navigation:

• Answers the question of —

“does this site have what
I’m looking for?” when a
new user first lands on the
website.
• Helps users to get a sense
of the size and the
complexity of the site.
• Helps users to reset their
navigation path when they
are lost.
 Local navigation

• A local navigation systems help users to explore what is

nearby. It is also known as sub-navigation or page navigation.
We can view it as ‘an extension’ of the global navigation.
• There are 3 common ways to arrange the global and the local
navigation — inverted-L, horizontal and embedded vertical.
Supplemental navigation tools

• These tools live outside the content pages of

a site. Allowing another form of access to the
same information. The following are
examples of these tools:
• Sitemaps – Provide a broad overview of the
content provided within the website. They
promote random access allowing users to
quickly jump to a particular area within a site.
They reinforce the sites hierarchy without
overwhelming users with too much content.
https://www.tatapower.com/

• Site Indexes – Provide a web based index of

keywords or phrases usually in alphabetical
order.
They are handy if the user knows a keyword
of the content they are searching for without
knowing where it is in the sites hierarchy.
WEB ACCESSIBILITY
• Web accessibility is another core requirement for
websites. It is about allowing all users of a website to
interact with it regardless of disabilities they may have,
or the web browser or platform they are using to access
the site.

• The visually impaired and visitors with other disabilities

including motor control, learning difficulties and deaf
users. Users whose first language is not English can also
be assisted.
Let us strive to make it better

• Auditory
• Cognitive
• Neurological
• Physical
• Speech
• Visual
Web accessibility encompasses all disabilities
that affect access to the Web
Please make it inclusive
• When websites and web tools are properly designed and
coded, people with disabilities can use them. However,
currently many sites and tools are developed with
accessibility barriers that make them difficult or
impossible for some people to use.
• Making the web accessible benefits individuals,
businesses, and society. International web standards
define what is needed for accessibility.
https://www.w3.org/WAI/fundamentals/accessibility-intro/
#examples
Website prototyping : a key part of the UX process

• A website prototype can be any mock-up or demo of

what a website will look like when it goes live. It can be
anything from a paper sketch to a clickable HTML
prototype.
• There are a variety of different ways to create an
interactive prototype. We’ve seen clickable prototypes
in PowerPoint, PDF documents and even MS Word. But
there are a variety of specialist prototyping tools
available on the market that are specifically designed to
make prototyping easy. Check out Blasamiq, Axure and
Mockingbird for just a few examples.
 LOCALIZATION OF WEBSITES

Localisation means tailoring of website information for

individual countries. In other words, it is the process of
adapting an existing website to local language and culture
in the target market.

For example, https://www.dell.com/en-in

It is highly country-specific localized websites with

language translation; they also include other localisation
efforts in terms of time, date, postcode, currency formats,
etc.
 INFORMATION ARCHITECTURE

It is important to recognize that every information system,

be it a book or an intranet, has an information
architecture.

Information architecture is the structural design of

shared information environments; the art and science of
organizing and labelling websites, intranets, online
communities and software to support usability and
findability
Books vs. Website
 Information architecture
• Organise content
• Which is easy to find and discover
• Online journey is usually on its
own so we need landmarks and
signage
• Be it blog/website/videos
• It makes navigation easier

https://www.youtube.com/watch?v=UmFp
vz2WiTI
8 principles
• In 2010, Dan Brown, 1. Principles of object
founder of design firm 2. Principle of choice
Eight Shapes and
information architect 3. Principle of disclosure
outlined 4. Principle of exemplars
eight guiding principles fo 5. Principle of front door
r designing information ar
chitecture 6. Principle of multiple
. classification
7. Principle of focused navigation
8. The principle of growth
Methods of IA design
1. Card sorting or web classification: The process of arranging a
way of organizing objects on the website in a consistent manner.
Card sorting is a low cost, simple way to figure out how best to group
and organize your content based on user input.
In card sorting, participants are presented with a list of items (for
example, all the products featured in an online supermarket) and
asked to group them in a way that makes the most logical sense to
them.
https://www.youtube.com/watch?v=2YSKSVz2gm0

2. Sitemap : It shows how all the pages on your site are grouped,
what order they appear in, A visual representation of the website
structure, showing how pages are organized and linked together.
sitemaps give search engines a website’s URLs and offer data a
complete map of all pages on a site. This helps search engines
prioritize pages that they will crawl.
sitemap
• A site map is a list of pages of a
web site.
• There are three primary kinds of
site map:
1. Site maps used during the
planning of a Web site by its
designers.
2. Human-visible listings, typically
hierarchical, of the pages on a
site.
3. Structured listings intended for
web crawlers such as search
engines
3. Wireframe is a visual representation of a website or app's
layout, showing the basic structure of pages, navigation
elements, and content placement.
It essentially acts as a skeletal blueprint to visualize how
information will be organized and accessed by users, without
the distraction of detailed design elements like color or
graphics; it's a key tool for testing and refining the user flow and
information hierarchy within a product.
User flow
• User flow is the path taken by
a prototypical user on a
website or app to complete a
task. The user flow takes
them from their entry point
through a set of steps towards
a successful outcome and final
action, such as purchasing a
product.
• Path within finding a product
• Pin code/destination
• Search results
Splash page
• Splash/landing page: A
splash screen is a video
segment containing text
• They can give the
appearance of faster
loading times and provide
users with something fun
and engaging to look at
while the main site assets
finish loading behind it.
UI/UX Design
UI and UX design (user interface and user experience
design)
User experience (UX)
• UX is how a user perceives an interaction with a company's
website or product.
• Involves research to understand user needs
• Considers how easy it is for users to accomplish their goals
User interface (UI)
• UI design is how it looks on the computer screen, tablet, or
mobile device. It focuses on the visual and interactive
elements of a website.
• Creates digital products that are both aesthetically and
functional.
Tools for Website Storytelling:
Some tools that can be used for website storytelling
include: Canva, Adobe Spark, Storybird, Animoto,
Infogram, Visme, Thinglink, WeVideo, Pixton, and Twine; all
of which allow you to create visually engaging content with
images, text, and multimedia elements to effectively tell a
story on your website.
Choosing the right tool depends on your specific needs:
• For basic visual storytelling: Canva, Adobe Spark
• For data-driven narratives: Infogram
• For interactive experiences: Thinglink, Twine
• For video creation: Animoto, WeVideo