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
• [Link]

• [Link]

• [Link]
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
[Link]

• 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

[Link]
ce-online-value-proposition-case-study-sportshoes-com/

[Link]
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.
• Theamount 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.
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.
 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
• 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
• The search traffic depends on CTR(click through rate) which depends on the
position in SERP(search engine result page)
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
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.

• LastInteraction 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 economic value
per visit from different channels such as paid search, organic etc
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

[Link]
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.
• Socialmedia 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.
[Link]
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.
 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. [Link]
• 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
[Link]
• Local website navigation
Local navigation is the links within the text of a given web page, linking to other pages within
the website.
 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.
[Link]

• 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
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, and Axure
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, [Link]

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
 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

[Link]
WiTI
8 principles
• In 2010, Dan Brown, founder 1. Principles of object
of design firm Eight Shapes 2. Principle of choice
and information architect
outlined 3. Principle of disclosure
eight guiding principles for des 4. Principle of exemplars
igning information architecture
. 5. Principle of front door
6. Principle of multiple classification
7. Principle of focused navigation
8. The principle of growth
• The principle of objects — Treat content as a living, breathing thing, with a lifecycle, behaviors
and attributes.
• The principle of choices — Create pages that offer meaningful choices to users, keeping the
range of choices available focused on a particular task.
• The principle of disclosure — Show only enough information to help people understand what
kinds of information they'll find as they dig deeper.
• The principle of exemplars — Describe the contents of categories by showing examples of the
contents.
• The principle of front doors — Assume at least half of the website's visitors will come through
some page other than the home page.
• The principle of multiple classification — Offer users several different classification schemes to
browse the site's content.
• The principle of focused navigation — Don't mix apples and oranges in your navigation scheme.
• The principle of growth — Assume the content you have today is a small fraction of the content
you will have tomorrow.
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.
[Link]

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
• 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.
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