Designing & Optimising Websites

Keith Feighery: Digital Strategist

Design Case Studies, Info Architecture & Open Source

Solutions

Open Source Solutions

Drupal

JOOMLA

Wordpress

Building and Decorating Case Studies

Builders and Decorators

Broad Selection of Irish Sites

Irish Case Studies

Before and After

Case Studies

Design with Clear Intent

Clear Layout

Obvious Benefits

Appropriate Channel Design

Decluttered Logical Flow

Demonstrate clear Call to Action

Clear and Intuitive Messages

Intuitive Info Flows

eCommerce Case Study

Case Study: Wiltshire Farm Foods

Key Take-Aways

• Remove Clutter – focus on key goals all the time – Remove any obstacles

• Provide lots of visual feedback – Users know that actions have been successful

• Adhere to affordance rules – make them obvious– Big Buttons, Clear Large Links

• Anticipate and Answer questions upfront – Embed as part of user experience

• Knit USPs in copy and images of site– Emphasise all your differentiators

Website Optimisation

• Dynamically Test key elements of site– Test Copy, Calls to Action, Images, Placement– The $300,000,000 Button

• Both Split (A/B) and Multi-Variate Test– Google Website Optimiser or Proprietary tools

• Define and set up conversion points– Need to track and measure user actions

• Clear calls to action significantly augment optimisation goals– Don’t force user to think – TELL THEM WHAT TO DO

Test Process

• Never stop testing and tracking user actions on website• A/B Split Testing

– Define specific site goals (sale, sign-up etc..)– Test two specific pages (typically high volume landing pages)– Commercial tools (Vertster) or Google Optimiser – Monitor which test is performing better– Use Variable rate or throttle testing to vary the percentage of traffic that

gets routed to the various pages• Multi-Variate testing

– Enables variable testing of elements within single pages– Different copy text, form layouts and even landing page images and

background colours together– Track combinations that achieve predetermined goals

Web 2.0 Design Process

What is Web2.0 Design

• Simple Front-Facing Brand• Open, Frank and Honest Communication• De-cluttered Information Architecture• Clear Calls to Action• Less Design is ‘More”• Design is functional only – to aid user

experience

Irish Web2.0 Examples

More Web 2.0 Design

International Examples Web 2.0

Exercise

• Write down all the features you want on your site

• Design on paper how your site will look• Create key categories of information• Design your top navigation menu bar – with

core categories of accessible info• Design 3 USPs of your service and include calls

to action on Front Page