The document discusses strategies for website design including branding, usability, lead generation, and accessibility. It provides tips in each area and examples of how companies successfully implement them. Branding involves consistent colors, personality, emotions and value proposition. Usability focuses on clarity, learnability, credibility and relevancy. Lead generation utilizes content, graphics, A/B testing and targeting goals. Accessibility ensures responsiveness across devices and compliance with standards for disabilities. The overall message is that an effective website delivers value to customers while also generating value for the business.

1. By Chitpong Wuttanan
Defining Strategies
From The Value of Website Design

2. What your website
delivering value to customers?
?

3. And, How can website
return value to my corporate?
?

4. How many customers?
?

5. Worldwide Internet User
2.4Billion

6. Worldwide Internet User (Penetration)

7. Worldwide Smartphone User
Image By New Relic.
Image By New Relic.

8. Thailand Internet and Smartphone Face

9. Global : Computer and Mobile share of time
ahead of TV
Image By InMobi

10. Global : Mobile device usage is throughout the day
Image By InMobi

11. Thailand : Computer and Mobile share of time
ahead of TV
Image By InMobi-
- -

12. Thailand : Mobile device usage is throughout the day
Image By InMobi

13. Thailand : Mobile directly influencing decision making
Image By InMobi

14. Now, Everything can do on
Mobile Phone and Internet

15. What’s value of Website Design
Branding ( )
Usability
/
Lead Generation (
)
Accessibility (
)

16. Branding ( )

17. Branding ( )
A corporate website should communicate the brand’s main value proposition.
The logo, color scheme, and language should all be consistent with other
marketing collateral.

18. Branding ( )
Apple is a great example of consistent branding that matches the philosophy of
the company.

19. Branding : 5 Tips for brand building with web design
1.Color ( )
Color isn’t just aesthetics —it stimulates various emotions and carries with it
subconscious associations to various things and characteristics.
Positioning Magazine(

20. Branding : 5 Tips for brand building with web design
2.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. Branding : 5 Tips for brand building with web design
3.Emotion ( )
It’s what feelings and emotions do you want people to experience when they visit
your site?
VDO
Background

22. Branding : 5 Tips for brand building with web design
4.Size and position of the logo ( )
It’s what feelings and emotions do you want people to experience when they visit
your site?

23. Branding : 5 Tips for brand building with web design
4.Size and position of the logo ( )

24. Branding : 5 Tips for brand building with web design
5.Value proposition ( )
Visitor take the first few seconds to orient themselves. Is this the right site? Does
this look interesting? What is this all about? To answer these questions you
should provide a clear and concise value proposition to your visitor.
Facebook, Google,

25. Branding : 5 Tips for brand building with web design
5.Value proposition ( )

26. Usability ( )

27. Usability ( )
Usability is an assessment of how easy a website is to navigate and use. Usability
is hugely important and needs to be kept in mind in website design
Human

28. Usability ( )
(Human) Usability means user-centered design. Both the design and
development process are focussed around the prospective user
Heat map

29. Usability ( )
(Human) Usability and Heat Map can using http://Google.com/analytics

30. Usability : 5 Key Principles Of Good Website Usability
1.Availability and Accessibility ( )
Let’s start with a basic, yet central aspect of usability: the availability and
accessibility of your site.
• Server uptime ( )
• Broken links
• Mobile responsiveness
Amazon.com
1. Desktop
Mobile
2. Amazon.com 2
Montools

31. Usability : 5 Key Principles Of Good Website Usability
2.Clearity ( )
Visitors come to your site with certain goals in mind. It is your job to help them
reach these goals as quickly as possible.
- Simplicity - Familiarity
- Consistency - Guidance
- Direct feedback - Good information architecture
Apple.com

32. Usability : 5 Key Principles Of Good Website Usability
3.Learnability ( )
Key to intuitive design is to make use of what people already know, or create
something new that is easy to learn.
Microsoft.com
Metro UI

33. Usability : 5 Key Principles Of Good Website Usability
4.Credibility ( )
Even if people find the content they are looking for, if they don’t trust you, that
content is worthless. It is important that people know you are a real company
with real people.
Loreal.com

34. Usability : 5 Key Principles Of Good Website Usability
5.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. Lead Generation ( )

36. Lead Generation ( )
Is the generation of consumer interest or inquiry into products or services of a
business , is an important function of any website, though it is commonly an after
thought in the design process.
/
Marketing Phase System/Design and Sale Phase

37. Lead Generation ( )
Content is King!
1. Headlines to attract readers
2. Use Number
3. Repeat Keyword
4. Photo is a thousand words (or Infographic)
5. Benefit
Other..

38. Lead Generation ( )
Information graphics or infographics are graphic visual representations
of information, data or knowledge intended to present complex information
quickly and clearly.
Infographic
Bloomberg

39. Lead Generation ( )
Information graphics for sharing information
Infographic
Starbucks

40. Lead Generation ( )
A/B Testing, Let's say that you want to test two different versions of something
on your home page. Which is most likely to result in a customer making a
purchase

41. Lead Generation ( )
A/B Testing Process

42. Lead Generation ( )
A/B Testing for Major potential for improvement
OLD
New
62.0% Improvement
Goal of the Page: Visitor
requests a test drive.
How: Added
SEO, conversion
buttons, and larger
pictures. revise topic

43. Lead Generation ( )
A/B Testing for Conversion rates directly impact revenue
A/B Testing
MALL.CZ

44. Lead Generation ( )
A/B Testing for Conversion rates directly impact revenue
A/B Testing
MALL.CZ
1

45. Lead Generation ( )
A/B Testing for Conversion rates directly impact revenue
A/B Testing
MALL.CZ
2

46. Lead Generation ( )
A/B Testing for Conversion rates directly impact revenue
Variation 1 Variation 2
Variation 2 was the Winner
It resulted in a straight 9.46% increase in sales
96% chance to beat original
Zero spent on advertising

47. Accessibility ( )

48. Accessibility ( )
Technology changes at a rapid pace, the biggest trend over the last few years is
mobile computing. Today people access the Internet from a wide variety of
devices: smart phones, computers, tablet

49. Accessibility ( )
Sample website design for all device

50. Accessibility ( )
Sample website design for all device

51. Accessibility ( )
Sample website design for all device

52. Is Your Website Turning Away
Visitors on Mobile Devices?

53. Accessibility ( )
Responsive web design: Is a flexible, liquid layout that adapts to fit various screen
sizes, resolutions and devices. It allows websites to automatically change layouts
according to the visitor’s screen resolution.
One Website, All Devices

54. Accessibility ( )
Responsive web design: Once loaded, re-size your browser window (drag the
corners so it becomes larger or smaller) and you will notice the content adjusts
itself accordingly.

55. Accessibility ( )
Mobile Application or Mobile Optimized Website (Responsive Web Design)?

56. Accessibility ( )
Mobile Application or Mobile Optimized Website (Responsive Web Design)?
Responsive web design
Pro:
1. Minimal resources required (
)
2. Accessible to all Device
3. Cost effective
4. Seamless syncing with your website
Con:
1. Limited functionality Function
GPS,
2. Customer satisfaction (
)
Mobile Application
Pro:
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. Accessibility ( )
Robot or Search Engine Robot Usability are programs that traverse the Web
automatically. It’s can make your website up to top rank on search engine such as
Google.com, called is “Search Engine Optimization”
SEO
Search Engine

58. Accessibility ( )
Search Engine Optimization Process

59. Accessibility ( )
Web accessibility refers to the inclusive practice of making websites usable by
people of all abilities and disabilities. When sites are correctly
designed, developed and edited, all users can have equal access to information
and functionality.
Visual Impairments Auditory Impairments
Mobility Impairments Cognitive Impairments

60. Accessibility ( )
Visual Impairments
• Listening to text-to-speech synthesis of the content
• Reading text using refreshable braille (small dots that are
raised and lowered to display characters that are read by
scanning 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. 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 to
adjust 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 distinguishable
from any background noise

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 to
operate it
• Voice recognition, eye tracking, and other approaches for
hands-free interaction

63. Accessibility ( )
Cognitive Impairments
• Clearly structured content that facilitates overview and
orientation
• Consistent labeling of forms, buttons, and other content parts
• Predictable link targets, functionality, and overall behavior
• Different ways of navigating websites, such as through a
hierarchical menu or search option
• Options to suppress blinking, flickering, flashing, or otherwise
distracting content
• Simpler text that is supplemented by images, graphs, and
other illustrations

64. Are you ready to Change?
?

65. Don't follow a trend.
Follow your heart.

66. End
Chitpong Wuttanan @ifew Chitpong Few WuttananChitpong@gmail.com
Contact: Chitpong Wuttanan

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%B
9%81%E0%B8%9A%E0%B8%A3%E0%B8%99%E0%B8%94%E0%B9%8C%E0%B8%9C%E0%B9%88%E0%B
8%B2%E0%B8%99%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AD%E0%B8%AD%E0%B8%81%E0%B
9%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/