Designing & Optimising Websites Keith Feighery: Digital Strategist
<ul><li>Design Case Studies, Info Architecture & Open Source Solutions </li></ul>
<ul><li>Open Source Solutions </li></ul>
Drupal
JOOMLA
Wordpress
<ul><li>Building and Decorating Case Studies </li></ul>
Builders and Decorators
<ul><li>Broad Selection of Irish Sites </li></ul>
Irish Case Studies
<ul><li>Before and After  </li></ul><ul><li>Case Studies </li></ul>
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
<ul><li>eCommerce Case Study </li></ul>
Case Study: Wiltshire Farm Foods
Key Take-Aways <ul><li>Remove Clutter – focus on key goals all the time  </li></ul><ul><ul><li>Remove any obstacles </li><...
Website Optimisation <ul><li>Dynamically Test key elements of site </li></ul><ul><ul><li>Test Copy, Calls to Action, Image...
Test Process <ul><li>Never stop testing and tracking user actions on website </li></ul><ul><ul><li>A/B Split Testing </li>...
<ul><li>Web 2.0 Design Process </li></ul>
What is Web2.0 Design <ul><li>Simple Front-Facing Brand </li></ul><ul><li>Open, Frank and Honest Communication </li></ul><...
Irish Web2.0 Examples
More Web 2.0 Design
International Examples Web 2.0
Exercise <ul><li>Write down all the features you want on your site </li></ul><ul><li>Design on paper how your site will lo...
Upcoming SlideShare
Loading in …5
×

Online Design Optimisation

381 views

Published on

Walk through of online design and case studies.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
381
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Online Design Optimisation

  1. 1. Designing & Optimising Websites Keith Feighery: Digital Strategist
  2. 2. <ul><li>Design Case Studies, Info Architecture & Open Source Solutions </li></ul>
  3. 3. <ul><li>Open Source Solutions </li></ul>
  4. 4. Drupal
  5. 5. JOOMLA
  6. 6. Wordpress
  7. 7. <ul><li>Building and Decorating Case Studies </li></ul>
  8. 8. Builders and Decorators
  9. 9. <ul><li>Broad Selection of Irish Sites </li></ul>
  10. 10. Irish Case Studies
  11. 11. <ul><li>Before and After </li></ul><ul><li>Case Studies </li></ul>
  12. 12. Design with Clear Intent
  13. 13. Clear Layout
  14. 14. Obvious Benefits
  15. 15. Appropriate Channel Design
  16. 16. Decluttered Logical Flow
  17. 17. Demonstrate clear Call to Action
  18. 18. Clear and Intuitive Messages
  19. 19. Intuitive Info Flows
  20. 20. <ul><li>eCommerce Case Study </li></ul>
  21. 21. Case Study: Wiltshire Farm Foods
  22. 22. Key Take-Aways <ul><li>Remove Clutter – focus on key goals all the time </li></ul><ul><ul><li>Remove any obstacles </li></ul></ul><ul><li>Provide lots of visual feedback </li></ul><ul><ul><li>Users know that actions have been successful </li></ul></ul><ul><li>Adhere to affordance rules – make them obvious </li></ul><ul><ul><li>Big Buttons, Clear Large Links </li></ul></ul><ul><li>Anticipate and Answer questions upfront </li></ul><ul><ul><li>Embed as part of user experience </li></ul></ul><ul><li>Knit USPs in copy and images of site </li></ul><ul><ul><li>Emphasise all your differentiators </li></ul></ul>
  23. 23. Website Optimisation <ul><li>Dynamically Test key elements of site </li></ul><ul><ul><li>Test Copy, Calls to Action, Images, Placement </li></ul></ul><ul><ul><li>The $300,000,000 Button </li></ul></ul><ul><li>Both Split (A/B) and Multi-Variate Test </li></ul><ul><ul><li>Google Website Optimiser or Proprietary tools </li></ul></ul><ul><li>Define and set up conversion points </li></ul><ul><ul><li>Need to track and measure user actions </li></ul></ul><ul><li>Clear calls to action significantly augment optimisation goals </li></ul><ul><ul><li>Don’t force user to think – TELL THEM WHAT TO DO </li></ul></ul>
  24. 24. Test Process <ul><li>Never stop testing and tracking user actions on website </li></ul><ul><ul><li>A/B Split Testing </li></ul></ul><ul><ul><ul><li>Define specific site goals (sale, sign-up etc..) </li></ul></ul></ul><ul><ul><ul><li>Test two specific pages (typically high volume landing pages) </li></ul></ul></ul><ul><ul><ul><li>Commercial tools (Vertster) or Google Optimiser </li></ul></ul></ul><ul><ul><ul><li>Monitor which test is performing better </li></ul></ul></ul><ul><ul><ul><li>Use Variable rate or throttle testing to vary the percentage of traffic that gets routed to the various pages </li></ul></ul></ul><ul><ul><li>Multi-Variate testing </li></ul></ul><ul><ul><ul><li>Enables variable testing of elements within single pages </li></ul></ul></ul><ul><ul><ul><li>D ifferent copy text, form layouts and even landing page images and background colours together </li></ul></ul></ul><ul><ul><ul><li>Track combinations that achieve predetermined goals </li></ul></ul></ul>
  25. 25. <ul><li>Web 2.0 Design Process </li></ul>
  26. 26. What is Web2.0 Design <ul><li>Simple Front-Facing Brand </li></ul><ul><li>Open, Frank and Honest Communication </li></ul><ul><li>De-cluttered Information Architecture </li></ul><ul><li>Clear Calls to Action </li></ul><ul><li>Less Design is ‘More” </li></ul><ul><li>Design is functional only – to aid user experience </li></ul>
  27. 27. Irish Web2.0 Examples
  28. 28. More Web 2.0 Design
  29. 29. International Examples Web 2.0
  30. 30. Exercise <ul><li>Write down all the features you want on your site </li></ul><ul><li>Design on paper how your site will look </li></ul><ul><li>Create key categories of information </li></ul><ul><li>Design your top navigation menu bar – with core categories of accessible info </li></ul><ul><li>Design 3 USPs of your service and include calls to action on Front Page </li></ul>

×