4. 3 Golden Rules for web content and design
KEY SECTIONS FOR THIS SESSION:
1. CONTENT IS KING.
2. ENGAGEMENT IS THE DESIGN.
3. CONTEXT IS EVERYTHING.
5. GIVE CONTENT THE ATTENTION IT DESERVES
1. WHAT EXACTLY IS CONTENT?
6. Give content the attention it deserves
CONTENT IS OFTEN ALWAYS CONSIDERED LAST.
7. Give content the attention it deserves
IT SEEMS SO EASY THAT IT OFTEN BECOMES AN AFTER-THOUGHT.
8. Give content the attention it deserves
Rahel Baile, International Design
"The Role of Content in the User Experience"
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 map
Is there a second layer?
13. WHAT EXACTLY IS CONTENT? CONTENT SYNDICATION
How SapientNitro did it for Best Job In The World:
http://v.youku.com/v_show/id_XMTAzNjc2NTgw.html
How Ikea did it for its Facebook page:
http://v.youku.com/v_show/id_XMjk0Njg4NDAw.html
14. WHAT EXACTLY IS CONTENT? CONTENT SYNDICATION
How P&G does it outside China
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. 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. 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. DESIGN IS LIKE ART THAT PROVOKES, MOTIVATES AND SIMULATES
2. ENGAGEMENT IS THE DESIGN
20. MAKING ENGAGEMENT THE ESSENCE OF DESIGN
CAMPAIGN 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. MAKING ENGAGEMENT THE ESSENCE OF DESIGN
This 5-page Blue Cross Blue Shield website is a good campaign site example:
22. MAKING ENGAGEMENT THE ESSENCE OF DESIGN
This 5-page Blue Cross Blue Shield website is a good campaign site example:
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. MAKING ENGAGEMENT THE ESSENCE OF DESIGN
Examples of good website designs from CHINA: http://www.hsbc.com.cn/1/2/
25. MAKING ENGAGEMENT THE ESSENCE OF DESIGN
Examples of good website designs from CHINA: http://www.hsbc.com.cn/1/2/
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
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 together
ONE THEME STANDS OUT IN THESE EXAMPLES:
- Good website designs are simple, content rich and most importantly market
something clearly to visitors
31. MAKING CONTENT MARKETING WORK FOR BRANDS
Scott Brinker, CTO of Ion interactive, provides an ideal
conversion matrix: http://searchengineland.com/the-ready-conversion-optimization-framework-43814
32. MAKING CONTENT MARKETING WORK FOR BRANDS
Scott Brinker, CTO of Ion interactive, provides an ideal
conversion matrix:
A relevant landing page gives visitors exactly what they
expected when they clicked. It should be engaging,
communicating a great value proposition in a compelling,
differentiated way. It should be authoritative, assuring people
that you’re trustworthy and reliable. And it should
bedirectional, moving visitors forward to their goals (and
yours). In addition to those user-centric objectives, it should
also be yield optimal—implementing operational best
practices to maximize your conversion rate.
33. MAKING CONTENT MARKETING WORK FOR BRANDS
Example of a great, content-driven site experience:
Cisco Umi home videoconferencing system microsite.
34. MAKING CONTENT MARKETING WORK FOR BRANDS
ABOUT THE LANDING PAGE
CLARITY: The microsite lives under the home.cisco.com domain with Cisco’s
home navigation tabs at the top to link to other Cisco products.
FOCUS: Below that, everything within the gray “body” of the page is focused on
additional 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 other
products. So Cisco has eliminated almost all non-Umi distractions.
VISUALLY PLEASING: Layout is clean and professional, but not sparse or
minimalistic. 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 perceive
and present on all pages.
CONTEXTUAL RELEVANCE: When you’re using design and imagery as a
means of communication (not merely a pretty picture, but an integral part of
your brand and your offer) then it truly becomes content.
35. MAKING CONTENT MARKETING WORK FOR BRANDS
ABOUT THE SITE STRUCTURE & NAVIGATION
CONTEXTUAL RELEVANCE: Assuming that if visitors are keen to know more
after 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 each
of those questions a clear, rich, meaningful answer. Cisco tries to persuade
with wonderful content and then make the “Buy Now” button readily available.
For instance, the “what you need” page lets visitors test their broadband
connection. 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.
37. MAKING CONTENT MARKETING WORK FOR BRANDS
ABOUT THE REASON-TO-BELIEVE
SOCIAL CURRENCY: Rather than settle for a couple of social network logos,
Cisco built an entire buzz page in the microsite navigation to incorporate social
buzz about the product.
This lets people browse through recent news stories by USA Today and
Engadget, 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 to
pull in relevant content from social networks. This is critical as not everyone will
be keen to leave comments on a new microsite.
38. FOOD FOR THOUGHT
Content 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. THE END
Email me if you have any questions at:
kestrel.lee@sapientnitro.com
http://sg.linkedin.com/in/kestrellee
