Websites, User Experience and Conversion

Introduction

A website is often the most important controlled digital channel in a marketing system. Social platforms, search engines, email and online advertising may attract attention, but the website commonly provides the environment in which people evaluate an offer, develop trust and take action. That action may be a purchase, enquiry, booking, registration, download or store visit.

Digital marketing therefore requires more than attractive web pages. It requires an understanding of how information is organised, how users move through a site, how interfaces reduce effort, how persuasive messages support decisions and how technical performance affects behaviour. These concerns are connected. A clear website architecture supports findability; good user experience supports confidence; a relevant call to action supports decision-making; and fast, accessible pages reduce abandonment.

This chapter examines the practical foundations of website architecture, landing pages, mobile-first design, user experience, calls to action, e-commerce journeys, conversion rate optimisation and basic web performance.

Learning objectives

By the end of this chapter, you should be able to:

• explain the purpose and components of website architecture;
• distinguish websites, landing pages and campaign destinations;
• apply mobile-first and user-centred design principles;
• analyse user journeys and e-commerce conversion stages;
• design effective calls to action;
• calculate and interpret basic conversion metrics;
• plan a simple conversion rate optimisation programme;
• identify core accessibility, privacy, security and performance requirements; and
• evaluate a website from both marketing and user perspectives.

1. Website architecture and information structure

Website architecture is the planned organisation of pages, content, navigation, technical resources and relationships among them. It is not merely the visual appearance of a homepage. Architecture determines whether users and search engines can understand what a site offers and how its content is related.

A typical commercial website contains several layers:

1. Entry points: search results, advertisements, social links, email links, QR codes and direct visits.
2. Primary sections: such as Products, Services, About, Resources, Support and Contact.
3. Content pages: product descriptions, articles, case studies, FAQs and policy pages.
4. Conversion points: enquiry forms, checkout pages, booking systems, registration screens and download forms.
5. Supporting systems: content management systems, analytics, customer relationship management tools, payment services and search functions.

A useful architecture separates information according to users’ tasks rather than the internal structure of the organisation. For example, a company may internally divide responsibility among sales, operations and customer service. A customer, however, may simply want to compare plans, understand delivery, check compatibility or obtain help. Navigation should reflect customer goals and familiar language.

Hierarchy and navigation

A hierarchy moves from broad categories to more specific content. A shallow structure allows important content to be reached with relatively few steps, while a deep structure may require users to pass through many levels. Depth is not automatically harmful, but unnecessary depth increases cognitive and navigational effort.

Effective navigation usually includes:

• a consistently placed logo or home link;
• clear primary navigation;
• descriptive labels rather than internal jargon;
• visible indication of the current location;
• search where the content collection is large;
• useful footer links, including contact, privacy and accessibility information; and
• a predictable way to return to previous levels.

A page should also have a clear purpose. A page attempting simultaneously to sell, educate, recruit, provide technical support and collect unrelated data will often be difficult to use. Content should be prioritised around a principal user task and a principal business objective.

Content modelling and consistency

A content model defines recurring content types and their fields. A product model might include product name, price, images, features, availability, delivery information, reviews and related products. Consistent models make content easier to maintain and allow information to be reused across web pages, mobile interfaces and other channels.

Consistency applies to language, visual hierarchy and interaction. If a blue button means “continue” on one page but “cancel” on another, users must repeatedly reinterpret the interface. A design system can document colours, typography, spacing, buttons, forms, alerts and interaction states. This improves efficiency and reduces accidental variation.

2. Landing pages and campaign destinations

A landing page is a page designed for a particular visitor, offer or action. It may be reached through paid search, display advertising, email, social media, an influencer link or a QR code. Unlike a general homepage, it normally has a narrow purpose and a deliberately limited set of choices.

A strong landing page aligns four elements:

• Audience: whom the page is intended to serve;
• Source: what promise or message brought the visitor there;
• Offer: what value is being proposed; and
• Action: what the visitor should do next.

This is called message match. If an advertisement promises “20% off annual membership” but the landing page opens with a generic corporate message and hides the discount, visitors may doubt whether they reached the correct destination.

A practical landing-page structure may include:

1. a concise headline stating the main value;
2. supporting copy explaining relevance and distinguishing benefits from features;
3. evidence such as testimonials, ratings, certifications, demonstrations or case results;
4. an image or video that clarifies rather than distracts from the offer;
5. important conditions, price or eligibility information;
6. a prominent call to action; and
7. reassurance about privacy, payment, cancellation or support where relevant.

The page should answer the visitor’s likely questions at the point at which they arise. For example, a form requesting an email address should explain why the address is needed. A price-sensitive visitor may need delivery costs before committing. A business buyer may need procurement, security or integration information.

A landing page should not remove necessary information merely to create a short page. Minimalism means removing irrelevant friction, not concealing material facts. Deceptive scarcity, hidden fees and forced continuity can produce short-term transactions but damage trust and create regulatory risk.

3. Mobile-first and responsive design

Mobile-first design begins by designing for the constraints of smaller screens and touch interaction, then progressively enhancing the experience for larger screens. It is not the same as creating a miniature desktop page. Mobile users may have limited screen space, variable connectivity, one-handed use, location-dependent attention and touch rather than mouse precision.

Responsive design allows layout, typography, images and controls to adapt to the viewport and device capabilities. Important practices include:

• using flexible layouts rather than fixed-width assumptions;
• ensuring readable text without unnecessary zooming;
• making buttons and links sufficiently easy to tap;
• keeping essential actions visible and logically ordered;
• avoiding horizontal scrolling;
• compressing and appropriately sizing images;
• supporting keyboard and assistive-technology access; and
• testing on real devices and realistic networks.

Mobile-first design also requires prioritisation. A mobile screen cannot display every navigation item, promotional panel and supporting message at once. The designer must decide what is essential, what can be grouped and what can be deferred. However, content should not be removed simply because mobile users are presumed to need less information. Content priority should be based on user tasks and evidence.

Responsive design is also relevant to search visibility and maintenance. Maintaining one adaptable site can reduce duplication and inconsistent content, although implementation must still be tested carefully. Mobile performance matters because delays are more noticeable on mobile networks and users may have limited data allowances.

4. User experience as a marketing discipline

User experience (UX) is the totality of a person’s perceptions and responses resulting from interacting with a product, service, interface or organisation. Website UX includes usability, usefulness, accessibility, credibility, emotional response and the quality of the wider service promise.

A convenient interface cannot compensate for an unavailable product, misleading price or poor fulfilment. UX therefore extends beyond screen design into policies, customer service, logistics and post-purchase support.

Usability dimensions

A practical usability review considers:

• Effectiveness: Can users complete the intended task?
• Efficiency: Can they complete it without unnecessary time or effort?
• Learnability: Can new users understand how to begin?
• Error tolerance: Can users prevent, recognise and recover from errors?
• Memorability: Can returning users use the interface without relearning it?
• Satisfaction: Does the experience meet reasonable expectations?

UX work should begin with user and business research. Useful evidence includes interviews, search queries, customer-service records, analytics, usability tests, accessibility reviews and competitor analysis. Personas can summarise patterns in users’ needs and constraints, but they should be based on evidence rather than stereotypes.

A journey map represents stages such as awareness, consideration, selection, purchase, delivery and retention. At each stage, the analyst can record user goals, questions, emotions, touchpoints, barriers and opportunities. The map prevents a narrow focus on the checkout page when the real problem may be unclear product information earlier in the journey.

Accessibility and inclusive design

Accessibility means designing so that people with different abilities can perceive, operate, understand and interact with the site. Inclusive design also considers language, literacy, age, culture, temporary impairments, slow connections and different devices.

Basic practices include semantic headings, meaningful link text, text alternatives for informative images, captions for important video, visible keyboard focus, sufficient colour contrast, labels associated with form controls, error messages that explain correction and content that remains understandable when text is enlarged. Accessibility is both an ethical responsibility and a practical market consideration. It can expand reach, improve clarity for everyone and reduce legal exposure. Organisations should consult applicable accessibility standards and local law rather than relying only on automated checkers.

5. Calls to action and persuasive interaction

A call to action (CTA) is an instruction or prompt inviting a user to take a particular step. Examples include “Buy now”, “Request a quotation”, “Start free trial”, “Book an appointment” and “Download the guide”. A CTA is more effective when its wording communicates the action and its value.

Good CTA design involves:

• Specificity: “Compare plans” is clearer than “Submit”.
• Visibility: the action should be visually identifiable and placed near relevant content.
• Context: the user should understand what happens after activation.
• Appropriate commitment: early-stage visitors may need “Learn how it works” rather than “Buy now”.
• Consistency: the same action should not be described by several confusing labels.
• Honesty: the button must not promise an outcome the organisation cannot provide.

A hierarchy of CTAs can support different readiness levels. A primary action may be “Purchase”, while secondary actions are “View specifications” or “Ask a question”. Too many equally prominent CTAs create decision friction. The correct number depends on the page purpose, but every prominent action should have a defensible role.

Forms are part of the CTA experience. Asking for unnecessary information increases effort and may reduce completion. Forms should state required fields, provide appropriate input types, preserve entered information after an error and explain how data will be used. Consent should not be hidden in general terms and conditions.

6. The e-commerce journey and conversion funnel

An e-commerce journey commonly includes discovery, product evaluation, selection, cart review, checkout, payment, confirmation, fulfilment and post-purchase support. The journey is not always linear. Users may compare products, return later, use multiple devices or contact staff before purchasing.

Typical friction points include:

• unclear product benefits or specifications;
• inadequate images or absence of demonstrations;
• unavailable stock revealed too late;
• unexpected delivery charges;
• compulsory account creation;
• a long or confusing checkout;
• limited payment options;
• weak security or returns information;
• technical errors; and
• poor confirmation or delivery communication.

Trust is cumulative. Accurate information, recognisable branding, transparent prices, secure payment handling, credible reviews and clear returns policies all reduce perceived risk. Reviews can be persuasive, but organisations should not fabricate, selectively manipulate or obscure them. Sponsored or incentivised reviews should be disclosed where required.

A checkout should support completion rather than marketing distraction. It should show progress where the process has multiple stages, allow correction, make total cost visible and provide a clear confirmation. The confirmation page is not merely an endpoint: it can provide order details, expected delivery, support contacts and an appropriate invitation to create an account or receive updates.

7. Conversion measurement

A conversion is a defined action that supports a business or communication objective. The action may be a transaction or a micro-conversion, such as viewing a key page, beginning a checkout, submitting a form or subscribing to email. The definition must be explicit because different definitions produce different results.

The basic conversion rate is:

The denominator must be stated. A visitor-based rate counts distinct users where identification is reliable; a session-based rate counts visits. Neither is universally correct. For a campaign landing page, sessions may be useful for operational reporting. For customer-level analysis, visitors or users may be more appropriate. Avoid comparing rates calculated with different denominators.

Worked example. A campaign receives 4,000 eligible sessions and produces 120 completed registrations.

Conversion rate = (120 ÷ 4,000) × 100% = 3%.

If 900 sessions begin a form and 120 complete it, form completion rate is:

= (120 ÷ 900) × 100% ≈ 13.3%.

These measures answer different questions. The first evaluates the overall campaign destination; the second identifies what happens after users begin the form.

Other useful metrics include bounce or engagement measures, product-detail views, add-to-cart rate, checkout initiation, checkout completion, average order value and revenue per visitor. Metrics should be interpreted with context. A high conversion rate on a small, highly qualified audience may produce less revenue than a lower rate on a larger audience. Tracking should distinguish valid business actions from accidental clicks, duplicate events and automated traffic.

8. Conversion rate optimisation (CRO)

Conversion rate optimisation is a structured process for improving the proportion of users who complete a defined objective. It is not the same as making a page more attractive, and it should not be reduced to changing button colours without understanding the problem.

A disciplined CRO cycle is:

1. define the objective and measurement unit;
2. establish a reliable baseline;
3. diagnose barriers using quantitative and qualitative evidence;
4. develop a prioritised hypothesis;
5. implement one or more controlled changes;
6. measure the result over an appropriate period; and
7. document the decision and continue learning.

A hypothesis should state the proposed change, its expected mechanism and its measurable outcome. For example: “If delivery charges are displayed beside the product price, more users will proceed to checkout because price uncertainty will be reduced.”

A/B testing compares a control experience with a variant. Ideally, users are assigned consistently and randomly, other important conditions are controlled, and the test has a predetermined primary metric. Results should not be declared successful merely because the variant has a higher observed rate. Analysts should consider sample size, random variation, test duration, seasonality, traffic sources and unintended effects such as reduced conversion quality or increased returns.

CRO has ethical boundaries. It should reduce unnecessary effort and improve understanding, not exploit vulnerability. Dark patterns include disguised advertisements, difficult cancellation, preselected consent, misleading countdown timers, hidden costs and interfaces that steer users away from privacy choices. A conversion gained through confusion may create complaints, chargebacks and reputational damage.

9. Basic web performance requirements

Web performance concerns how quickly and reliably a page becomes usable and responds to interaction. Performance is a user-experience issue and a marketing issue: delays can increase abandonment, particularly on mobile devices and low-quality networks.

Important performance areas include:

• server response and hosting reliability;
• efficient delivery of HTML, stylesheets and scripts;
• image dimensions, compression and modern formats where supported;
• limiting unnecessary third-party tags and trackers;
• caching and content delivery strategies;
• avoiding layout shifts as content loads;
• fast availability of the main content; and
• responsiveness when a user taps, types or submits.

Performance should be measured with both laboratory tests and real-user data. Laboratory testing offers controlled diagnosis; field data shows what actual users experience across devices, locations and networks. A single overall score should not replace examination of specific problems.

A simple operational model for total page weight is:

This is an accounting identity for transferred resource sizes, not a prediction of loading time. Actual time also depends on network throughput, latency, server processing, browser behaviour, compression and caching. Consequently, reducing bytes usually helps but does not guarantee a proportional reduction in time.

Performance requirements should be connected to user tasks. A product page must reveal product information and purchase controls promptly; a news article must make its principal content readable; a form must become usable before non-essential scripts load. Teams should set budgets for page weight, image sizes and third-party scripts, monitor them during development and review performance after releases.

Security is foundational. Sites should use encrypted connections, protect accounts and payment information, validate input, manage permissions and keep software dependencies updated. Marketing tags and analytics tools should be reviewed for data leakage, performance cost and lawful use.

10. Applied case: improving an online stationery retailer

This is an illustrative case. PaperTrail, a fictional online stationery retailer, receives substantial traffic from social media and search advertising. Analytics shows many visitors view product pages, but relatively few complete purchases. Customer-service staff report that shoppers frequently ask about delivery cost, paper size and return conditions.

Background and problem

The retailer’s advertisements promote “next-day delivery on selected notebooks”. However, landing pages lead to a general category page. Product pages display attractive photographs but place delivery information in a distant FAQ. On mobile, the product image occupies most of the initial screen, while the price and purchase control require scrolling. Checkout reveals delivery charges only after an address is entered.

The problem is not simply a low-performing button. There is message mismatch, information uncertainty, mobile prioritisation failure and late disclosure of cost.

Analysis

The team combines analytics with five moderated mobile usability sessions, search-query analysis and customer-service records. The evidence indicates that users want to know four things quickly: whether the notebook meets their paper-size requirement, when it will arrive, what delivery costs and whether it can be returned. Users also hesitate when variants are represented by ambiguous colour swatches.

The team defines the primary conversion as completed purchase and secondary measures as product-to-cart rate, checkout initiation, checkout completion and customer-service contact about delivery.

Approach and solution

The retailer creates campaign-specific landing pages that repeat the advertised delivery promise and link directly to eligible products. Product pages are redesigned mobile-first. The price, stock status, delivery estimate and primary purchase control appear near the product title. Paper size is written in text beside images, and variant selections use labelled controls. Delivery cost and returns information appear before checkout.

The team reduces non-essential scripts, resizes images for the displayed device and tests keyboard access and screen-reader labels. It runs a controlled test comparing the existing product page with the revised version. The primary success measure is purchase conversion, while guardrail measures include returns, complaints and average order value.

Outcome

After the test period, the revised experience records a higher purchase rate and fewer delivery-related support contacts. The team does not attribute the result to one isolated change because several coordinated barriers were addressed. It documents the test conditions and continues monitoring performance, accessibility and post-purchase satisfaction.

Learning points

The case illustrates that conversion depends on the complete journey. Message match brings the right expectation; architecture and content answer questions; mobile-first layout makes information available; transparent pricing supports trust; performance reduces delay; and measurement connects design decisions to outcomes. It also illustrates why a responsible team measures quality, not merely the number of clicks.

11. Professional practice and governance

Website decisions involve several professional responsibilities. Privacy notices should explain relevant data collection in understandable language. Consent mechanisms should not use coercive design, and organisations should collect only data with a legitimate purpose. Personalisation and automated recommendations should be proportionate, explainable where appropriate and monitored for unfair outcomes.

Marketing claims must be accurate, supportable and not materially misleading. Prices, delivery conditions, subscription renewal, cancellation and promotional limitations should be clear. Applicable consumer-protection, accessibility, copyright, electronic communications and data-protection laws vary by jurisdiction; practitioners must consult current local requirements.

Artificial intelligence can support content drafting, search, recommendation, chat and anomaly detection, but human review remains necessary. AI-generated content may contain factual errors, biased recommendations, inaccessible wording or inappropriate collection of personal data. A chatbot should provide an effective route to human assistance and should not obstruct cancellation or complaint handling.

A professional website team includes marketers, designers, writers, developers, analysts, accessibility specialists and subject experts. Shared objectives and a documented measurement plan reduce the risk that one department optimises a local metric while damaging the overall customer experience.

Best-practice checklist

Before launch or major revision, ask:

• Is the purpose of each page clear?
• Does the landing page match the campaign promise?
• Can users find important content through understandable navigation?
• Are mobile users able to read, select, complete and recover from errors?
• Is the primary CTA specific, visible and honest?
• Are price, delivery, returns and privacy information available before commitment?
• Are forms limited to necessary information?
• Can people using keyboards and assistive technologies complete the main task?
• Are performance, security and third-party scripts monitored?
• Are conversion definitions, denominators and data-quality rules documented?
• Are experiments ethically designed and evaluated beyond short-term clicks?

Chapter Summary

A website is a connected marketing and service system rather than a collection of isolated pages. Website architecture organises information and tasks so that users can find relevant content. Landing pages should align audience, traffic source, offer and action through message match. Mobile-first and responsive design prioritise essential tasks while adapting presentation to device and context.

User experience includes effectiveness, efficiency, learnability, error recovery, satisfaction, accessibility, credibility and the wider service promise. Clear calls to action reduce uncertainty when they communicate a specific and proportionate next step. E-commerce journeys require attention to product information, trust, delivery, checkout, payment and post-purchase support.

Conversion rate is meaningful only when the conversion and denominator are clearly defined. CRO is an evidence-based cycle of diagnosis, hypothesis, controlled change and evaluation, not superficial button experimentation. Performance depends on resources, networks, browsers and servers, so both laboratory and real-user measurement are valuable. Ethical design, privacy, security, accessibility and truthful marketing are essential conditions of sustainable conversion.

Key Terms

Website architecture: The organised structure of pages, content, navigation and technical relationships in a website.

Information architecture: The practice of organising and labelling information so users can find and understand it.

Landing page: A focused page designed for a specific audience, offer or action.

Message match: Consistency between the promise that attracts a visitor and the content of the destination page.

Responsive design: Design that adapts layout and presentation to different screens and devices.

Mobile-first design: Designing initially for mobile constraints and progressively enhancing for larger displays.

User experience (UX): A person’s perceptions and responses resulting from interaction with a product, service or interface.

Usability: The extent to which users can achieve goals effectively, efficiently and satisfactorily.

Accessibility: Designing content and interaction so that people with diverse abilities can use it.

Call to action (CTA): A prompt inviting a user to perform a defined action.

Conversion: A completed action that supports a defined business or communication objective.

Conversion rate: The percentage of eligible visitors or sessions that complete a specified conversion.

Micro-conversion: A smaller action indicating progress toward a primary objective.

Conversion rate optimisation (CRO): A structured process for improving the proportion of users who complete an objective.

A/B test: A controlled comparison of two experience variants.

Dark pattern: A design practice that manipulates or misleads users into actions they may not freely choose.

Page weight: The total amount of data transferred to deliver a page and its resources.

Message hierarchy: The planned order and visual emphasis of information on a page.

Journey map: A representation of user stages, goals, touchpoints, barriers and opportunities.

Review Questions

Short Answer Questions

1. What is website architecture, and why is it important for digital marketing?
2. Define message match in the context of a landing page.
3. State two differences between mobile-first and desktop-first design.
4. What is a call to action? Give one suitable example.
5. Why must the denominator be stated when reporting conversion rate?

Long Answer Questions

1. Explain the main principles of effective website navigation and information architecture.
2. Discuss how usability and accessibility contribute to marketing performance.
3. Describe the stages of an e-commerce journey and identify common sources of friction.
4. Explain a responsible conversion rate optimisation process, including the role of hypotheses and A/B testing.
5. Discuss the relationship between web performance, user experience, trust and conversion.

Analytical / Application Questions

1. A campaign attracts visitors with an advertisement promising free delivery, but the destination page does not mention delivery until checkout. Analyse the likely UX and conversion problems and propose improvements.
2. An online service has a high number of form starts but few completed forms. Design an investigation using analytics, usability research and a testable CRO hypothesis.
3. Evaluate a mobile product page using the following criteria: information priority, CTA clarity, accessibility, trust, performance and privacy. Recommend the three changes that should be implemented first and justify your priorities.

Multiple Choice Questions with Answers

Question 1

Which feature best distinguishes a focused landing page from a general homepage?

A. It has a narrow purpose linked to a specific audience, offer or action.

B. It contains every available navigation link.

C. It is always the first page users see.

D. It excludes all supporting evidence.

Correct Answer: A. It has a narrow purpose linked to a specific audience, offer or action.

Question 2

What does message match mean?

A. Using the same font throughout a website

B. Ensuring the destination page reflects the promise that attracted the visitor

C. Matching website content to the organisation’s internal departments

D. Displaying identical content on desktop and mobile

Correct Answer: B. Ensuring the destination page reflects the promise that attracted the visitor

Question 3

Which practice is most consistent with mobile-first design?

A. Designing a fixed desktop layout and shrinking it for phones

B. Removing all detailed information from mobile pages

C. Prioritising essential tasks and adapting the layout to smaller screens

D. Requiring users to zoom before they can read content

Correct Answer: C. Prioritising essential tasks and adapting the layout to smaller screens

Question 4

A site receives 2,000 eligible sessions and records 80 purchases. What is its session-based conversion rate?

A. 0.4%

B. 2%

C. 4%

D. 25%

Correct Answer: C. 4%

Question 5

Which CTA is generally the most specific?

A. Submit

B. Click here

C. Continue

D. Download the pricing guide

Correct Answer: D. Download the pricing guide

Question 6

What is the main purpose of a CRO hypothesis?

A. To guarantee that a design change will succeed

B. To state a proposed change, its expected mechanism and measurable outcome

C. To replace the need for analytics

D. To increase the number of website pages

Correct Answer: B. To state a proposed change, its expected mechanism and measurable outcome

Question 7

Which action most directly reduces checkout friction?

A. Hiding delivery costs until after payment details are entered

B. Adding unrelated promotional pop-ups

C. Showing total cost and allowing users to correct errors before purchase

D. Requiring account creation before product information is visible

Correct Answer: C. Showing total cost and allowing users to correct errors before purchase

Question 8

Why is total page weight not, by itself, a precise measure of loading time?

A. Page weight is unrelated to images

B. Loading time also depends on networks, servers, browsers, caching and latency

C. HTML bytes are never transferred

D. Loading time depends only on screen size

Correct Answer: B. Loading time also depends on networks, servers, browsers, caching and latency

Question 9

Which is an example of a dark pattern?

A. A clearly labelled cancellation option

B. A form that explains why information is needed

C. A preselected consent choice designed to steer users without clear notice

D. A visible keyboard focus indicator

Correct Answer: C. A preselected consent choice designed to steer users without clear notice

Question 10

Which evidence is most appropriate for diagnosing a website conversion problem?

A. Only the designer’s personal preference

B. A combination of analytics, user research and usability testing

C. The number of colours used on the homepage

D. A single social-media comment without further investigation

Correct Answer: B. A combination of analytics, user research and usability testing