Please enable JavaScript.
Coggle requires JavaScript to display documents.
Chương 6: Website design - Coggle Diagram
Chương 6: Website design
Introduction to site design
Form
Visual Design
Persuasion to Deliver Commercial Results
Organization
Information Architecture and Findability
Legal Requirements
Content
Search Engine Optimization (SEO)
Digital Analytics
Interaction
User-Centred Design and Usability
Digital Marketing Planning
Function
Accessibility
Web Standards
Aesthetics
Aesthetics
Graphics + Colour + Style + Layout and Typography
Design Constraints
Modems & download time
Screen resolution
Number of colours
Browsers
Plug-ins & download time
Font sizes
Platform
Example
Apple’s clean, modern interface aligns with its premium brand image
Online value proposition & Customer orientation
Online value proposition
Finding a Value Proposition
Different from competitors
Not available in the real world
Makes a difference in customers’ lives
Definition (Molineux, 2002)
Describes the total customer experience
Not limited to the point of sale
Customer Orientation
Rank importance of each to the business
List the three most important information needs of each audience
Identify different audiences
Ask representatives of each audience type to develop their own wish lists
Example
Airbnb offers unique home stays that hotels don’t provide.
Content strategy and copywriting
Content Strategy
Content Engagement Value
Content Media
Content Syndication
Content Participation
Content Access Platforms
Copywriting
Chunky
Relevant
Accurate
Brief
Scannable
Example
HubSpot blogs provide practical, well-structured marketing insights.
Page design
Common Layouts Across Sites
Company Name & Logo
Navigation Menu (and sub-menu)
Footer (Copyright & Privacy Information)
Page Title
Good Page Template Design
Aesthetic Layout
Emphasis on Content Types
Visual Hierarchy
Marketing Message Prioritization
Clear Navigation Options
Page Types
Home Page
Product/Service Pages
Product Category/Sub-category Pages
On-site Search Results Page
Landing Pages
Content Marketing Pages
Social Hub Page
Blog Page
Utility Pages
Example
Amazon’s product pages display reviews, ratings, and related items for upselling.
Mobile experience design
Optimizing for mobile devices
Mobile-first design
Responsive layouts
Fast loading speed
Mobile Marketing Options
SMS
Quick response codes (QR codes)
Bluetooth
Mobile applications
Mobile site
Mobile site and app advertising
Location-based advertising
Social network-based advertising
Example
Grab’s mobile app ensures easy ride-booking with a simple, responsive UI.
Integrated design
User-Centered Design
Reasonable Functional Allocation
Prototyping & Review
User Involvement and Understanding of Requirements
Multi - disciplinary Design
Design Process
Tracking & Analysis
Web Analytics, Optimization using agile development, Cookie compliance audit.
Discovery
Focus groups/User groups, Personas, Storyboards/Scenarios, Card sorting, Accessibility audit, Web analytics, Cookie compliance audit.
Design
Wireframing, Sitemaps, User Journeys, Prototyping, Co-creation workshops
Testing
Usability evaluation, Remote Usability Testing, Evaluation, Usability audit, Eye Tracking, Mobile user testing, Accessibility testing
Multichannel Integration
Online and offline value delivery and internal communications
Mixed-mode buying / multichannel behaviour
Example
Starbucks integrates its app with a rewards program and in-store purchases
.
Dynamic design and personalization
Personalization helps
to Sell, Serve, Speak and Sizzle
Example
Spotify recommends songs based on listening history.
Options for
personalization
Customer or company name, Country, Customer preferences, Recommendation algorithms, News and events, Viral personalization, Referrer string, Location, Multivariate, real-time, conversion-optimized personalizatio
Online retail
merchandising
Expanding navigation through synonyms, Applying faceted navigation or search approaches, Featuring the best-selling products prominently, Use of bundling, Use of customer ratings and reviews, Use of product visualization systems
Navigation and structure
Ease of use
Structure + Navigation + Page layout + Interaction
Interactivity in the Buying Process: Learning, Deciding, Buying