Website Content & Design: Best Practises              By Kestrel Lee         Digital Creative Director
AND WHO EXACTLY AM I?-  NOT A DIGITAL NINJA:http://v.youku.com/v_show/id_XMjk0MzQ1ODYw.html
Normal considerations for web content and design
3 Golden Rules for web content and designKEY SECTIONS FOR THIS SESSION:1.  CONTENT IS KING.2.  ENGAGEMENT IS THE DESIGN.3....
GIVE CONTENT THE ATTENTION IT DESERVES         1. WHAT EXACTLY IS CONTENT?
Give content the attention it deservesCONTENT IS OFTEN ALWAYS CONSIDERED LAST.
Give content the attention it deservesIT SEEMS SO EASY THAT IT OFTEN BECOMES AN AFTER-THOUGHT.
Give content the attention it deserves                                   Rahel Baile, International Design                ...
WHAT EXACTLY IS CONTENT?First layer of content-    Text i.e. product information, press releases-    Search meta tags-    ...
WHAT EXACTLY IS CONTENT? INFOGRAPHICS
WHAT EXACTLY IS CONTENT? INFORMATION VISUALISATION
WHAT EXACTLY IS CONTENT? INFORMATION VISUALISATION
WHAT EXACTLY IS CONTENT? CONTENT SYNDICATIONHow SapientNitro did it for Best Job In The World:http://v.youku.com/v_show/id...
WHAT EXACTLY IS CONTENT? CONTENT SYNDICATIONHow P&G does it outside China
HOW DO YOU ASSESS CONTENT?
HOW DO YOU ASSESS CONTENT?KPI BENCHMARKS:•    MEETING BUSINESS NEEDS•    APPROPRIATE TONE AND STYLE•    CONTENT RELEVANCE•...
WHAT CAN THE RIGHT WEB CONTENT DELIVER FOR BRANDS?Refer to the L’Oreal, Vancl and Nokia case studies in the China Gets I.T...
HOW WEB CONTENT MAKES THE WEBSITE MORE CREATIVE•    Simplified navigation with eye-catching gif animation for optimal view...
DESIGN IS LIKE ART THAT PROVOKES, MOTIVATES AND SIMULATES         2. ENGAGEMENT IS THE DESIGN
MAKING ENGAGEMENT THE ESSENCE OF DESIGNCAMPAIGN SITES IN CHINA ARE NORMALLY GUILTY OF THE FOLLOWING:•    Trying too hard t...
MAKING ENGAGEMENT THE ESSENCE OF DESIGNThis 5-page Blue Cross Blue Shield website is a good campaign site example:
MAKING ENGAGEMENT THE ESSENCE OF DESIGNThis 5-page Blue Cross Blue Shield website is a good campaign site example:
MAKING ENGAGEMENT THE ESSENCE OF DESIGN Why is it a good campaign site example?•    The page is pure HTML, no Flash in sig...
MAKING ENGAGEMENT THE ESSENCE OF DESIGNExamples of good website designs from CHINA: http://www.hsbc.com.cn/1/2/
MAKING ENGAGEMENT THE ESSENCE OF DESIGNExamples of good website designs from CHINA: http://www.hsbc.com.cn/1/2/
MAKING ENGAGEMENT THE ESSENCE OF DESIGN Why is the HSBC China website a good site example?•    The page is pure HTML but u...
MAKING ENGAGEMENT THE ESSENCE OF DESIGNExamples of good website designs from CHINA
MAKING ENGAGEMENT THE ESSENCE OF DESIGNExamples of good website designs from CHINA
MAKING ENGAGEMENT THE ESSENCE OF DESIGN Why are China’s main e-commerce sites good site designs•    They are built in HTML...
MAKING CONTENT MARKETING WORK FOR BRANDS          3. CONTEXT IS EVERYTHING.
MAKING CONTENT MARKETING WORK FOR BRANDSScott Brinker, CTO of Ion interactive, provides an idealconversion matrix: http://...
MAKING CONTENT MARKETING WORK FOR BRANDSScott Brinker, CTO of Ion interactive, provides an idealconversion matrix:A releva...
MAKING CONTENT MARKETING WORK FOR BRANDSExample of a great, content-driven site experience:Cisco Umi home videoconferencin...
MAKING CONTENT MARKETING WORK FOR BRANDSABOUT THE LANDING PAGECLARITY: The microsite lives under the home.cisco.com domain...
MAKING CONTENT MARKETING WORK FOR BRANDSABOUT THE SITE STRUCTURE & NAVIGATIONCONTEXTUAL RELEVANCE: Assuming that if visito...
MAKING CONTENT MARKETING WORK FOR BRANDSABOUT THE REASON-TO-BELIEVE
MAKING CONTENT MARKETING WORK FOR BRANDSABOUT THE REASON-TO-BELIEVESOCIAL CURRENCY: Rather than settle for a couple of soc...
FOOD FOR THOUGHTContent and design should be a considered result of brand purpose Before development the content and desig...
THE ENDEmail me if you have any questions at:    kestrel.lee@sapientnitro.com http://sg.linkedin.com/in/kestrellee
Upcoming SlideShare
Loading in …5
×

Web content & design best practises

591 views

Published on

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Web content & design best practises

  1. 1. Website Content & Design: Best Practises By Kestrel Lee Digital Creative Director
  2. 2. AND WHO EXACTLY AM I?-  NOT A DIGITAL NINJA:http://v.youku.com/v_show/id_XMjk0MzQ1ODYw.html
  3. 3. Normal considerations for web content and design
  4. 4. 3 Golden Rules for web content and designKEY SECTIONS FOR THIS SESSION:1.  CONTENT IS KING.2.  ENGAGEMENT IS THE DESIGN.3.  CONTEXT IS EVERYTHING.
  5. 5. GIVE CONTENT THE ATTENTION IT DESERVES 1. WHAT EXACTLY IS CONTENT?
  6. 6. Give content the attention it deservesCONTENT IS OFTEN ALWAYS CONSIDERED LAST.
  7. 7. Give content the attention it deservesIT SEEMS SO EASY THAT IT OFTEN BECOMES AN AFTER-THOUGHT.
  8. 8. Give content the attention it deserves Rahel Baile, International Design "The Role of Content in the User Experience"
  9. 9. WHAT EXACTLY IS CONTENT?First layer of content-  Text i.e. product information, press releases-  Search meta tags-  Pictures-  Videos-  Audio clips-  User-generated content like comments-  Logos, mastheads and other corporate identity elements-  Legal disclaimers, copyrights, terms & conditions-  Site mapIs there a second layer?
  10. 10. WHAT EXACTLY IS CONTENT? INFOGRAPHICS
  11. 11. WHAT EXACTLY IS CONTENT? INFORMATION VISUALISATION
  12. 12. WHAT EXACTLY IS CONTENT? INFORMATION VISUALISATION
  13. 13. WHAT EXACTLY IS CONTENT? CONTENT SYNDICATIONHow SapientNitro did it for Best Job In The World:http://v.youku.com/v_show/id_XMTAzNjc2NTgw.htmlHow Ikea did it for its Facebook page:http://v.youku.com/v_show/id_XMjk0Njg4NDAw.html
  14. 14. WHAT EXACTLY IS CONTENT? CONTENT SYNDICATIONHow P&G does it outside China
  15. 15. HOW DO YOU ASSESS CONTENT?
  16. 16. HOW DO YOU ASSESS CONTENT?KPI BENCHMARKS:•  MEETING BUSINESS NEEDS•  APPROPRIATE TONE AND STYLE•  CONTENT RELEVANCE•  CLEAR COMMUNICATION•  UP-TO-DATE•  SOCIAL MEDIA FRIENDLY•  SEARCH ENGINE ACCESSIBILITY
  17. 17. WHAT CAN THE RIGHT WEB CONTENT DELIVER FOR BRANDS?Refer to the L’Oreal, Vancl and Nokia case studies in the China Gets I.T. video:http://v.youku.com/v_show/id_XMjk0Njg3NjQ4.html
  18. 18. HOW WEB CONTENT MAKES THE WEBSITE MORE CREATIVE•  Simplified navigation with eye-catching gif animation for optimal viewing via mobile:•  http://now.sprint.com/alltogethernow/
  19. 19. DESIGN IS LIKE ART THAT PROVOKES, MOTIVATES AND SIMULATES 2. ENGAGEMENT IS THE DESIGN
  20. 20. MAKING ENGAGEMENT THE ESSENCE OF DESIGNCAMPAIGN SITES IN CHINA ARE NORMALLY GUILTY OF THE FOLLOWING:•  Trying too hard to catch visitor eyes, rather than engage their minds.•  Designed in flash, which makes difficult for search and mobile optimization.•  Take a while to load, during which visitors can choose to leave.
  21. 21. MAKING ENGAGEMENT THE ESSENCE OF DESIGNThis 5-page Blue Cross Blue Shield website is a good campaign site example:
  22. 22. MAKING ENGAGEMENT THE ESSENCE OF DESIGNThis 5-page Blue Cross Blue Shield website is a good campaign site example:
  23. 23. MAKING ENGAGEMENT THE ESSENCE OF DESIGN Why is it a good campaign site example?•  The page is pure HTML, no Flash in sight•  As pure HTML, the page lends itself to SEO content best practices•  As pure HTML, the page enables testing across browsers and platforms•  The content tells the site story with rich details•  The other four pages are accessible via a simple tab navigation•  Each tab focuses on a specific deep-dive subtopic (e.g., wellness)•  There’s a clear call-to-action form on the right (replicated on all pages)•  The graphic design of the page is compelling, but not overwhelming•  The total number of pages in the microsite is only a few•  The content on these pages is meaty—more than a paragraph and a few bullets•  There’s a strong, consistent visual theme binding these pages together
  24. 24. MAKING ENGAGEMENT THE ESSENCE OF DESIGNExamples of good website designs from CHINA: http://www.hsbc.com.cn/1/2/
  25. 25. MAKING ENGAGEMENT THE ESSENCE OF DESIGNExamples of good website designs from CHINA: http://www.hsbc.com.cn/1/2/
  26. 26. MAKING ENGAGEMENT THE ESSENCE OF DESIGN Why is the HSBC China website a good site example?•  The page is pure HTML but uses basic gif animation to simulate Flash effects.•  As pure HTML, the page lends itself to SEO content best practices•  As pure HTML, the page enables testing across browsers and platforms•  The 5 main sections are accessible via a simple tab navigation•  Each tab focuses on a specific deep topic (personal, private and enterprise banking, financing packages plus details about the bank)•  There’s a clear call-to-action form on the right (replicated on all pages)•  The graphic design of the page is compelling, but not overwhelming•  The content is written from a personalised need-driven view.•  The content on these pages is meaty—more than a paragraph and a few bullets•  There’s a strong, consistent visual theme binding these pages together
  27. 27. MAKING ENGAGEMENT THE ESSENCE OF DESIGNExamples of good website designs from CHINA
  28. 28. MAKING ENGAGEMENT THE ESSENCE OF DESIGNExamples of good website designs from CHINA
  29. 29. MAKING ENGAGEMENT THE ESSENCE OF DESIGN Why are China’s main e-commerce sites good site designs•  They are built in HTML for search, mobile and ease-of-use considerations.•  The websites are designed for easy updates of fresh daily content.•  Users can readily locate what they want•  Main navigations are straight forward with specific sections highlighted.•  There’s a clear call-to-action form on very page•  The graphic design of the page is compelling, but not overwhelming•  There’s a strong, consistent visual theme binding these pages togetherONE THEME STANDS OUT IN THESE EXAMPLES:- Good website designs are simple, content rich and most importantly marketsomething clearly to visitors
  30. 30. MAKING CONTENT MARKETING WORK FOR BRANDS 3. CONTEXT IS EVERYTHING.
  31. 31. MAKING CONTENT MARKETING WORK FOR BRANDSScott Brinker, CTO of Ion interactive, provides an idealconversion matrix: http://searchengineland.com/the-ready-conversion-optimization-framework-43814
  32. 32. MAKING CONTENT MARKETING WORK FOR BRANDSScott Brinker, CTO of Ion interactive, provides an idealconversion matrix:A relevant landing page gives visitors exactly what theyexpected when they clicked. It should be engaging,communicating a great value proposition in a compelling,differentiated way. It should be authoritative, assuring peoplethat you’re trustworthy and reliable. And it shouldbedirectional, moving visitors forward to their goals (andyours). In addition to those user-centric objectives, it shouldalso be yield optimal—implementing operational bestpractices to maximize your conversion rate.
  33. 33. MAKING CONTENT MARKETING WORK FOR BRANDSExample of a great, content-driven site experience:Cisco Umi home videoconferencing system microsite.
  34. 34. MAKING CONTENT MARKETING WORK FOR BRANDSABOUT THE LANDING PAGECLARITY: The microsite lives under the home.cisco.com domain with Cisco’shome navigation tabs at the top to link to other Cisco products. FOCUS: Below that, everything within the gray “body” of the page is focused onadditional Umi content via 6 main pages. From a user experience perspective,it is clear that people interested in Umi a very specific solution and not otherproducts. So Cisco has eliminated almost all non-Umi distractions.VISUALLY PLEASING: Layout is clean and professional, but not sparse orminimalistic. The heart of this first page is communicated primarily by warm,attractive and well-integrated images. No overused stock photography.CLEAR BUY-IN: Green “Buy Now” button on the upper right is easy to perceiveand present on all pages. CONTEXTUAL RELEVANCE: When you’re using design and imagery as ameans of communication (not merely a pretty picture, but an integral part ofyour brand and your offer) then it truly becomes content.
  35. 35. MAKING CONTENT MARKETING WORK FOR BRANDSABOUT THE SITE STRUCTURE & NAVIGATIONCONTEXTUAL RELEVANCE: Assuming that if visitors are keen to know moreafter the home page i.e. “Meet Umi”, they may have these questions: •  What’s involved in setting this up? •  Will it work with my TV and Internet connection? •  Is this too technical for me (or the grandparents)? •  Is it really all that much better than Skype? Rather than answer them on the home page, Cisco used the site to give eachof those questions a clear, rich, meaningful answer. Cisco tries to persuadewith wonderful content and then make the “Buy Now” button readily available.For instance, the “what you need” page lets visitors test their broadbandconnection. Between a video, easy walk-through steps on the page bottom,and FAQs on “Umi support”, there are 3 ways to answer people’s questions.
  36. 36. MAKING CONTENT MARKETING WORK FOR BRANDSABOUT THE REASON-TO-BELIEVE
  37. 37. MAKING CONTENT MARKETING WORK FOR BRANDSABOUT THE REASON-TO-BELIEVESOCIAL CURRENCY: Rather than settle for a couple of social network logos,Cisco built an entire buzz page in the microsite navigation to incorporate socialbuzz about the product. This lets people browse through recent news stories by USA Today andEngadget, peruse the latest commentary from people on Twitter and Facebook,and read blog posts from actual users. Now that’s social proof. Such social proof can be created with the use of content syndication tools topull in relevant content from social networks. This is critical as not everyone willbe keen to leave comments on a new microsite.
  38. 38. FOOD FOR THOUGHTContent and design should be a considered result of brand purpose Before development the content and design strategy: consider 1.  WHY: What makes a brand different? Purpose. belief or a cause? 2.  WHAT: What action has this belief caused the brand to do? 3.  HOW: How has this action bring out the difference in brand purpose to end users or consumers? These considerations are a necessary part of developing a real online brand strategy for a site. For details, refer to this video by Simon Sinek on how brand purpose drives the best form of marketing today: http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action.html
  39. 39. THE ENDEmail me if you have any questions at: kestrel.lee@sapientnitro.com http://sg.linkedin.com/in/kestrellee

×