By Chitpong WuttananDefining StrategiesFrom The Value of Website Design
What your websitedelivering value to customers??
And, How can websitereturn value to my corporate??
How many customers??
Worldwide Internet User2.4Billion
Worldwide Internet User (Penetration)
Worldwide Smartphone UserImage By New Relic.Image By New Relic.
Thailand Internet and Smartphone Face
Global : Computer and Mobile share of timeahead of TVImage By InMobi
Global : Mobile device usage is throughout the dayImage By InMobi
Thailand : Computer and Mobile share of timeahead of TVImage By InMobi-- -
Thailand : Mobile device usage is throughout the dayImage By InMobi
Thailand : Mobile directly influencing decision makingImage By InMobi
Now, Everything can do onMobile Phone and Internet
What’s value of Website DesignBranding ( )Usability/Lead Generation ()Accessibility ()
Branding ( )
Branding ( )A corporate website should communicate the brand’s main value proposition.The logo, color scheme, and language...
Branding ( )Apple is a great example of consistent branding that matches the philosophy ofthe company.
Branding : 5 Tips for brand building with web design1.Color ( )Color isn’t just aesthetics —it stimulates various emotions...
Branding : 5 Tips for brand building with web design2.Character/Personality ( )Infusing your brand with a little personali...
Branding : 5 Tips for brand building with web design3.Emotion ( )It’s what feelings and emotions do you want people to exp...
Branding : 5 Tips for brand building with web design4.Size and position of the logo ( )It’s what feelings and emotions do ...
Branding : 5 Tips for brand building with web design4.Size and position of the logo ( )
Branding : 5 Tips for brand building with web design5.Value proposition ( )Visitor take the first few seconds to orient th...
Branding : 5 Tips for brand building with web design5.Value proposition ( )
Usability ( )
Usability ( )Usability is an assessment of how easy a website is to navigate and use. Usabilityis hugely important and nee...
Usability ( )(Human) Usability means user-centered design. Both the design anddevelopment process are focussed around the ...
Usability ( )(Human) Usability and Heat Map can using http://Google.com/analytics
Usability : 5 Key Principles Of Good Website Usability1.Availability and Accessibility ( )Let’s start with a basic, yet ce...
Usability : 5 Key Principles Of Good Website Usability2.Clearity ( )Visitors come to your site with certain goals in mind....
Usability : 5 Key Principles Of Good Website Usability3.Learnability ( )Key to intuitive design is to make use of what peo...
Usability : 5 Key Principles Of Good Website Usability4.Credibility ( )Even if people find the content they are looking fo...
Usability : 5 Key Principles Of Good Website Usability5.Relevancy ( )It is not enough that your website is clear, your con...
Lead Generation ( )
Lead Generation ( )Is the generation of consumer interest or inquiry into products or services of abusiness , is an import...
Lead Generation ( )Content is King!1. Headlines to attract readers2. Use Number3. Repeat Keyword4. Photo is a thousand wor...
Lead Generation ( )Information graphics or infographics are graphic visual representationsof information, data or knowledg...
Lead Generation ( )Information graphics for sharing informationInfographicStarbucks
Lead Generation ( )A/B Testing, Lets say that you want to test two different versions of somethingon your home page. Which...
Lead Generation ( )A/B Testing Process
Lead Generation ( )A/B Testing for Major potential for improvementOLDNew62.0% ImprovementGoal of the Page: Visitorrequests...
Lead Generation ( )A/B Testing for Conversion rates directly impact revenueA/B TestingMALL.CZ
Lead Generation ( )A/B Testing for Conversion rates directly impact revenueA/B TestingMALL.CZ1
Lead Generation ( )A/B Testing for Conversion rates directly impact revenueA/B TestingMALL.CZ2
Lead Generation ( )A/B Testing for Conversion rates directly impact revenueVariation 1 Variation 2Variation 2 was the Winn...
Accessibility ( )
Accessibility ( )Technology changes at a rapid pace, the biggest trend over the last few years ismobile computing. Today p...
Accessibility ( )Sample website design for all device
Accessibility ( )Sample website design for all device
Accessibility ( )Sample website design for all device
Is Your Website Turning AwayVisitors on Mobile Devices?
Accessibility ( )Responsive web design: Is a flexible, liquid layout that adapts to fit various screensizes, resolutions a...
Accessibility ( )Responsive web design: Once loaded, re-size your browser window (drag thecorners so it becomes larger or ...
Accessibility ( )Mobile Application or Mobile Optimized Website (Responsive Web Design)?
Accessibility ( )Mobile Application or Mobile Optimized Website (Responsive Web Design)?Responsive web designPro:1. Minima...
Accessibility ( )Robot or Search Engine Robot Usability are programs that traverse the Webautomatically. It’s can make you...
Accessibility ( )Search Engine Optimization Process
Accessibility ( )Web accessibility refers to the inclusive practice of making websites usable bypeople of all abilities an...
Accessibility ( )Visual Impairments• Listening to text-to-speech synthesis of the content• Reading text using refreshable ...
Accessibility ( )Auditory Impairments• Transcripts and captions of audio content, including audio-only content and audio t...
Accessibility ( )Mobility Impairments• Ergonomic or specially designed keyboard or mouse• Head pointer, mouth stick, and o...
Accessibility ( )Cognitive Impairments• Clearly structured content that facilitates overview andorientation• Consistent la...
Are you ready to Change??
Dont follow a trend.Follow your heart.
EndChitpong Wuttanan @ifew Chitpong Few WuttananChitpong@gmail.comContact: Chitpong Wuttanan
Reference URL• http://advicemedia.com/what-value-of-web-design/• http://conversionxl.com/how-responsive-design-boosts-mobi...
Upcoming SlideShare
Loading in …5
×

Defining strategies from the value of website

438 views
376 views

Published on

Defining Strategies From The Value of Website Design

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

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

No notes for slide

Defining strategies from the value of website

  1. 1. By Chitpong WuttananDefining StrategiesFrom The Value of Website Design
  2. 2. What your websitedelivering value to customers??
  3. 3. And, How can websitereturn value to my corporate??
  4. 4. How many customers??
  5. 5. Worldwide Internet User2.4Billion
  6. 6. Worldwide Internet User (Penetration)
  7. 7. Worldwide Smartphone UserImage By New Relic.Image By New Relic.
  8. 8. Thailand Internet and Smartphone Face
  9. 9. Global : Computer and Mobile share of timeahead of TVImage By InMobi
  10. 10. Global : Mobile device usage is throughout the dayImage By InMobi
  11. 11. Thailand : Computer and Mobile share of timeahead of TVImage By InMobi-- -
  12. 12. Thailand : Mobile device usage is throughout the dayImage By InMobi
  13. 13. Thailand : Mobile directly influencing decision makingImage By InMobi
  14. 14. Now, Everything can do onMobile Phone and Internet
  15. 15. What’s value of Website DesignBranding ( )Usability/Lead Generation ()Accessibility ()
  16. 16. Branding ( )
  17. 17. Branding ( )A corporate website should communicate the brand’s main value proposition.The logo, color scheme, and language should all be consistent with othermarketing collateral.
  18. 18. Branding ( )Apple is a great example of consistent branding that matches the philosophy ofthe company.
  19. 19. Branding : 5 Tips for brand building with web design1.Color ( )Color isn’t just aesthetics —it stimulates various emotions and carries with itsubconscious associations to various things and characteristics.Positioning Magazine(
  20. 20. Branding : 5 Tips for brand building with web design2.Character/Personality ( )Infusing your brand with a little personality can help you define what it stands for.King Power Brand Character• Leading• Inspiring ( )• Charming ( )• Tempting ( )
  21. 21. Branding : 5 Tips for brand building with web design3.Emotion ( )It’s what feelings and emotions do you want people to experience when they visityour site?VDOBackground
  22. 22. Branding : 5 Tips for brand building with web design4.Size and position of the logo ( )It’s what feelings and emotions do you want people to experience when they visityour site?
  23. 23. Branding : 5 Tips for brand building with web design4.Size and position of the logo ( )
  24. 24. Branding : 5 Tips for brand building with web design5.Value proposition ( )Visitor take the first few seconds to orient themselves. Is this the right site? Doesthis look interesting? What is this all about? To answer these questions youshould provide a clear and concise value proposition to your visitor.Facebook, Google,
  25. 25. Branding : 5 Tips for brand building with web design5.Value proposition ( )
  26. 26. Usability ( )
  27. 27. Usability ( )Usability is an assessment of how easy a website is to navigate and use. Usabilityis hugely important and needs to be kept in mind in website designHuman
  28. 28. Usability ( )(Human) Usability means user-centered design. Both the design anddevelopment process are focussed around the prospective userHeat map
  29. 29. Usability ( )(Human) Usability and Heat Map can using http://Google.com/analytics
  30. 30. Usability : 5 Key Principles Of Good Website Usability1.Availability and Accessibility ( )Let’s start with a basic, yet central aspect of usability: the availability andaccessibility of your site.• Server uptime ( )• Broken links• Mobile responsivenessAmazon.com1. DesktopMobile2. Amazon.com 2Montools
  31. 31. Usability : 5 Key Principles Of Good Website Usability2.Clearity ( )Visitors come to your site with certain goals in mind. It is your job to help themreach these goals as quickly as possible.- Simplicity - Familiarity- Consistency - Guidance- Direct feedback - Good information architectureApple.com
  32. 32. Usability : 5 Key Principles Of Good Website Usability3.Learnability ( )Key to intuitive design is to make use of what people already know, or createsomething new that is easy to learn.Microsoft.comMetro UI
  33. 33. Usability : 5 Key Principles Of Good Website Usability4.Credibility ( )Even if people find the content they are looking for, if they don’t trust you, thatcontent is worthless. It is important that people know you are a real companywith real people.Loreal.com
  34. 34. Usability : 5 Key Principles Of Good Website Usability5.Relevancy ( )It is not enough that your website is clear, your content must also be relevant.Again, it is essential that you know your users and why they visit your site.Nike.com
  35. 35. Lead Generation ( )
  36. 36. Lead Generation ( )Is the generation of consumer interest or inquiry into products or services of abusiness , is an important function of any website, though it is commonly an afterthought in the design process./Marketing Phase System/Design and Sale Phase
  37. 37. Lead Generation ( )Content is King!1. Headlines to attract readers2. Use Number3. Repeat Keyword4. Photo is a thousand words (or Infographic)5. BenefitOther..
  38. 38. Lead Generation ( )Information graphics or infographics are graphic visual representationsof information, data or knowledge intended to present complex informationquickly and clearly.InfographicBloomberg
  39. 39. Lead Generation ( )Information graphics for sharing informationInfographicStarbucks
  40. 40. Lead Generation ( )A/B Testing, Lets say that you want to test two different versions of somethingon your home page. Which is most likely to result in a customer making apurchase
  41. 41. Lead Generation ( )A/B Testing Process
  42. 42. Lead Generation ( )A/B Testing for Major potential for improvementOLDNew62.0% ImprovementGoal of the Page: Visitorrequests a test drive.How: AddedSEO, conversionbuttons, and largerpictures. revise topic
  43. 43. Lead Generation ( )A/B Testing for Conversion rates directly impact revenueA/B TestingMALL.CZ
  44. 44. Lead Generation ( )A/B Testing for Conversion rates directly impact revenueA/B TestingMALL.CZ1
  45. 45. Lead Generation ( )A/B Testing for Conversion rates directly impact revenueA/B TestingMALL.CZ2
  46. 46. Lead Generation ( )A/B Testing for Conversion rates directly impact revenueVariation 1 Variation 2Variation 2 was the WinnerIt resulted in a straight 9.46% increase in sales96% chance to beat originalZero spent on advertising
  47. 47. Accessibility ( )
  48. 48. Accessibility ( )Technology changes at a rapid pace, the biggest trend over the last few years ismobile computing. Today people access the Internet from a wide variety ofdevices: smart phones, computers, tablet
  49. 49. Accessibility ( )Sample website design for all device
  50. 50. Accessibility ( )Sample website design for all device
  51. 51. Accessibility ( )Sample website design for all device
  52. 52. Is Your Website Turning AwayVisitors on Mobile Devices?
  53. 53. Accessibility ( )Responsive web design: Is a flexible, liquid layout that adapts to fit various screensizes, resolutions and devices. It allows websites to automatically change layoutsaccording to the visitor’s screen resolution.One Website, All Devices
  54. 54. Accessibility ( )Responsive web design: Once loaded, re-size your browser window (drag thecorners so it becomes larger or smaller) and you will notice the content adjustsitself accordingly.
  55. 55. Accessibility ( )Mobile Application or Mobile Optimized Website (Responsive Web Design)?
  56. 56. Accessibility ( )Mobile Application or Mobile Optimized Website (Responsive Web Design)?Responsive web designPro:1. Minimal resources required ()2. Accessible to all Device3. Cost effective4. Seamless syncing with your websiteCon:1. Limited functionality FunctionGPS,2. Customer satisfaction ()Mobile ApplicationPro:1. User experience (GPS, )2. Compatibility (Browser, )3. Loyalty ( )4. Off-line usage ( )5. Development resources ()Con:1. Adoption and usage ( )2. Developing market ()3. Ongoing costs for multi device ()4. Loss of control (cloud, app market)
  57. 57. Accessibility ( )Robot or Search Engine Robot Usability are programs that traverse the Webautomatically. It’s can make your website up to top rank on search engine such asGoogle.com, called is “Search Engine Optimization”SEOSearch Engine
  58. 58. Accessibility ( )Search Engine Optimization Process
  59. 59. Accessibility ( )Web accessibility refers to the inclusive practice of making websites usable bypeople of all abilities and disabilities. When sites are correctlydesigned, developed and edited, all users can have equal access to informationand functionality.Visual Impairments Auditory ImpairmentsMobility Impairments Cognitive Impairments
  60. 60. Accessibility ( )Visual Impairments• Listening to text-to-speech synthesis of the content• Reading text using refreshable braille (small dots that areraised and lowered to display characters that are read byscanning over the raised dots using the fingertips)• Enlarging or reducing text size and images• Customizing settings for fonts, colors, and spacing• Listening to audio descriptions of video in multimedia
  61. 61. Accessibility ( )Auditory Impairments• Transcripts and captions of audio content, including audio-only content and audio tracks in multimedia• Media players that display captions and provide options toadjust the text size and colors of captions• Options to stop, pause, or adjust the volume of audio content(independently of the system volume)• High-quality foreground audio that is clearly distinguishablefrom any background noise
  62. 62. Accessibility ( )Mobility Impairments• Ergonomic or specially designed keyboard or mouse• Head pointer, mouth stick, and other aids to help typing• On-screen keyboard with trackball, joystick, and switches tooperate it• Voice recognition, eye tracking, and other approaches forhands-free interaction
  63. 63. Accessibility ( )Cognitive Impairments• Clearly structured content that facilitates overview andorientation• Consistent labeling of forms, buttons, and other content parts• Predictable link targets, functionality, and overall behavior• Different ways of navigating websites, such as through ahierarchical menu or search option• Options to suppress blinking, flickering, flashing, or otherwisedistracting content• Simpler text that is supplemented by images, graphs, andother illustrations
  64. 64. Are you ready to Change??
  65. 65. Dont follow a trend.Follow your heart.
  66. 66. EndChitpong Wuttanan @ifew Chitpong Few WuttananChitpong@gmail.comContact: Chitpong Wuttanan
  67. 67. Reference URL• http://advicemedia.com/what-value-of-web-design/• http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/#• http://samyarn.com/2012/mobile-app-mobile-site-responsive-design/• http://www.foraker.com/choosing-between-responsive-web-design-and-a-separate-mobile-site-to-improve-mobile-visitors%E2%80%99-experience/• http://www.thaiwebaccessibility.com/• http://www.stanford.edu/group/accessibility/cgi-bin/presentations/Intro_web_accessibility/• http://visualwebsiteoptimizer.com/split-testing-blog/larger-product-images-increase-conversion-rate/• http://www.smashingmagazine.com/2010/06/24/the-ultimate-guide-to-a-b-testing/• http://uxinth.blogspot.com/2012/08/ux-by-a-b-testing.html• http://adwordstool-how-to.blogspot.com/2012/10/9-headlines.html• http://seo-web.aun-thai.co.th/press/seo-blog-seo-usability• http://www.etda.or.th/etda_website/mains/display/1537• http://www.pawoot.com/node/244/• http://blog.crazyegg.com/2013/03/26/principles-website-usability/• http://www.thaidesignwebsite.com/website-usability-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/• http://www.24framework.com/%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%E0%B9%81%E0%B8%9A%E0%B8%A3%E0%B8%99%E0%B8%94%E0%B9%8C%E0%B8%9C%E0%B9%88%E0%B8%B2%E0%B8%99%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AD%E0%B8%AD%E0%B8%81%E0%B9%81.html• http://www.visionefx.net/articles/deconstruct-rebuild-your-website.htm• http://searchengineland.com/4-areas-to-ab-test-for-e-commerce-websites-90559• http://ecommerce.about.com/od/eCommerce-Basics/a/The-ABCs-Of-AB-Testing.htm• http://www.getelastic.com/best-practice-gone-bad-4-shocking-ab-tests/• http://www.bigcommerce.com/ecommerce-blog/10-a-b-tests/

×