what does it take to create the world's best corporate website?
TRANSCRIPT
What does it take tocreate the world’s best corporate website? A roadmap for creating a best in class corporate website
26th March 2015
Wi-fi code: pool#MSLevent
Agenda
8:50 – 9:00am – Introduction from the ChairJames Warren, Head of Digital, MSLGROUP UK and EMEA
9:00 – 9:40am – What does a best in class website look like?Dean Parker, Senior Digital Consultant, MSLGROUP
9:40 – 10:20am – Panel discussion and Q&ASimon Thresh, Digital Strategy Lead, SABMillerJames Russell, Corporate Communications Director, ExperianLucy Cording and Dean Parker from MSLGROUP
2
What?Why?When?
Mega-trends: Simple design
Mega-trends: Story-telling hubs
6
Mega-trends: Useful tools to improve the user experience
Mega-trends: Site content optimised for search and sharing
Agenda
8:50 – 9:00am – Introduction from the ChairJames Warren, Head of Digital, MSLGROUP UK and EMEA
9:00 – 9:40am – What does a best in class website look like?Dean Parker, Senior Digital Consultant, MSLGROUP
9:40 – 10:20am – Panel discussion and Q&ASimon Thresh, Digital Strategy Lead, SABMillerJames Russell, Corporate Communications Director, ExperianLucy Cording and Dean Parker from MSLGROUP
8
What is the methodology?
MethodologyThe ‘Design’ parameter in detail
Form [30]
Single-minded: How well the site deploys a consistent and distinctive design theme throughout the site. [10pts]
Aesthetics: How well the design is executed to reflect the business it is representing. [10pts]
Impact: How well the design makes the site stand out from the crowd. [10pts]
Assets [40]
Typography: How well considered
and crafted the typography is. [10pts]
Colour: How well colour is applied and enhances the brand experience. [10pts]
Photography & video: How well photography and video is produced
and used. [10pts]
Graphics: How well info-graphics are crafted and used to add value to the overall experience. [10pts]
Function [30]
Fit for purpose: How appropriate the design is for the type of site and how well it works across different devices. [10pts]
Understandable: How good a job the design does at making the site easy to understand and use. [10pts]
Legible: How easy the content is to read. [10pts]
The way the website applies visual design techniques to reflect and distinguish an organisation, create impact and enhance the way content and pages are consumed and interacted with.
MethodologyThe ‘User experience’ parameter in detail
• Is there a consistent and comprehensible URL structure?
• Is the current page/section clearly indicated? Does the user always know where he is in the site?
• Does the user get pushed out of sections without that being clear?
• Are multiple routes to content provided where necessary to support journeys undertaken by different audiences?
• How well connected is the site to subsidiary sites (country / business) and other parts of its digital ecosystem?
• Are there any dead ends?
The way the website helps people navigate the site, find the information they are looking for and complete tasks in a straightforward manner.
Effective/intuitive navigation [25]
• Is there a clear and logically structured navigation making content easy to find?
• Is the information that users are most likely to need easy to navigate to from most pages?
• Is the naming scheme consistent and conventional (e.g. commonly understood main section titles such as “Media” and “Investors”)?
• Is the structure simple, with a clear conceptual model and no unnecessary levels?
• Is the language and nomenclature used externally rather than internally focused?
MethodologyThe ‘User experience’ parameter in detail (continued)
Online vacancies [10]
• Can users search for current vacancies by location, job role, keyword, etc.?
• Is there an online application form?
• Is there a vacancy alert service?
• Can applicants create and store a CV/résumé?
Devices and accessibility [10]
• How does it perform on different devices?
• Has it been built responsively?
• Does it conform to cookie legislation?
• How well does it perform in terms accessibility?
Staying in touch[10]
• Can users sign up for RNS news alerts?
• Can users sign up for company news?
• Are a variety of methods of staying in touch (e.g. email / RSS / social) provided?
• Can users opt to receive updates relevant to their interests?
• Are the organisation’s social media properties well integrated?
• Is there a way of providing site feedback?
MethodologyThe ‘User experience’ parameter in detail (continued)
Search and filtering [20]
• Does the site search find the most relevant content for each search criteria?
• Does it present the most useful extracts from this content in its SERPs?
• Does the site handle zero results gracefully?
• Are filtering mechanisms provided at appropriate places (e.g. in lists of press releases, case studies, contacts, media library etc.)?
Interaction [25]
• Does the browser back button function intuitively, taking the user back to the previous page?
• Are hypertext links that invoke actions (e.g. downloads, new windows) clearly distinguished from hypertext links that load another page?
• Are terminology and conventions (such as link colours) consistent with general web usage?
• Is there an appropriate balance between convention and innovation in interaction?
• Does the interaction presented on pages enhance the user experience?
• Does it function intuitively?
• Does it increase content effectiveness? Is it fun to use?
• Is an interactive share price tool provided, enabling users to view share price information and graphs by time and in comparison with other companies and indices?
MethodologyThe ‘Content’ parameter in detail
Messaging [10]
• Consider the message the home page would transmit to people coming to the company for the first time (especially jobseekers): are there engaging stories, good headlines, a clear proposition?
• Is the content timely and recently updated?
• Is it relevant to its audiences?
• Does it answer the news agenda?
The way the website content meets the immediate informational needs of its different audiences, as well as helps build relationships over time.Content structure [10]
• Is content sensibly structured on pages?
• Is it possible to scan for summary information and dive down for more detail?
• Is appropriate metadata (e.g. publish date, author) provided?
• Is content linked effectively together?
• Is there an appropriate balance between convention and innovation in structure and layout?
• Is there a variety of content formats employed appropriately in each context (e.g. text, image, video, animation, PDF, Excel) and an appropriate balance of content types chosen for each page?
MethodologyThe ‘Content’ parameter in detail (continued)
Serving society and the CSR profession [15]
• Is the CSR section easy to find?
• How well are the company’s CSR priorities explained?
• Is there detailed information about the policies for each priority, and the company’s activity in each priority area?
• Is the relationship between CSR and the company’s business model and governance explained?
• Is there CSR accreditation or scheme membership info?
• Are links to separate CSR reports provided?
• Is contact information provided for CSR professionals?
• Does the site tackle relevant issues (e.g. community, environmental and others, if there are any)?
• Does it have engaging case studies that bring the policies and progress to life in an engaging way?
• Does it weave CSR material in with other content or link from it?
Company information and corporate governance [10]
• How easy to see what the company does and how it is organised?
• Is the company strategy clearly articulated?
• Is there a company history?
• Is there an FAQs section?
• Is there information about the board of directors, executive team including disclosure of interests and remuneration?
• Is there information about governance policies and processes?
• Is there information about risk management?
• Is contact information provided for corporate contacts?
MethodologyThe ‘Content’ parameter in detail (continued)
• Is information provided in the most appropriate format (e.g. HTML, video, PDF, XLS)?
• Are services for shareholders available? Specifically: share price information; dividend information; online share management; AGM reports and calendar; shareholder communication management; special investment arrangements; shareholder contacts; analyst consensus; stock exchange listing information.
• Is contact information provided for investors?
Serving investors [15]
• Are the most recently published reports prominent (e.g. the AR, interim and quarterly statements?)
• How easy is it to find archives of quarterly figures, presentations, webcasts, annual reports?
• How deep are the archives?
• How well laid out, with different formats signaled?
• Is there a financial calendar?
• Is there an RNS news service?
• Are summary financial metrics easily available?
• Is there background and data on the company and its market?
• Is there a clearly stated investment case?
• Are risk factors and management clearly articulated?
MethodologyThe ‘Content’ parameter in detail (continued)
• Does it include brand assets, logos, images, videos?
• How extensive and well organised is it?
• What’s the quality of assets; captioning; information on download file size/format etc.?
Serving journalists [15]
• How useful is the press release archive?
• What is the quality of press releases?
• How timely are they? Is video content available?
• Are fact sheets provided?
• Are there backgrounders on controversial topics, where relevant?
• Is the site utilised to provide topic-related information ‘packs’?
• Is there summary information about the company packaged in a way that’s useful for journalists?
• Is contact information provided for journalists?
• Is there a library of assets for journalists to use in stories?
MethodologyThe ‘Content’ parameter in detail (continued)
• Are careers FAQs provided?
• Is contact information provided for jobseekers?
Serving customers [10]
• What is provided to help customers find out about and choose what they need (good marketing material, interactive tools etc.)?
• Is the information provided concise, relevant, compelling?
• Is there a way to find out which services are available in particular industry sectors and geographies?
• Is there information about how the company works with its clients?
• Are links to eCommerce sites obvious? Or if eCommerce services are not provided, is the onward contact information detailed?
Serving job seekers [15]
• Is the organisation’s EVP clearly expressed? Is it obvious why a candidate would want to work there?
• Is information provided about different career paths/roles?
• Is there information on company culture?
• Is there information on career development?
• Is there information on rewards and benefits?
• Is there information on work locations?
• Are there case studies/profiles from current employees, in text and video?
• Is there clear information on the recruiting/application process (what the organisation looks for, how to prepare)?
• Is there a calendar of recruitment events?
• Are there interactive features (for example, career planners)?
MethodologyThe ‘Visibility’ parameter in detail
Keyword strategy[18]
Evidence of a clear brand and long-tail keyword strategy being deployed to make content appear high in search rankings against key search terms.
Sitemap [5]
Evidence of a well-structured and implemented sitemap to aid search visibility. [5pts]
Meta-data [15]
Evidence of well-structured meta-data across all pages to aid search visibility.
Paid promotion [10]
Evidence of paid promotional activity to make content easily discoverable across external channels.
Social linking [17]
Use of owned social channels to promote the site and its content.
Social signals [15]
Implementation of sufficient social sharing functionality across key areas.
Schema mark-up [10]
Evidence of well-structured schema mark-up to aid search visibility.
Search submission [10]
Evidence of the site and its pages being submitted in the appropriate manner to Google Webmaster Tools.
The way the website makes its content visible to people both within the site and outside it.
MethodologyThe ‘Technology’ parameter in detail
Coding standards [50pts]
Javascript compression & optimisation: Is Javascript is minified and compressed? Avoid inline Javascript. [5pts]
CSS compression & optimisation: Is CSS is minified and compressed? [5pts]
Gzip compression: Is gzip compression is enabled for page response? [5pts]
Leveraging browser cache: Are cache headers present for static content (e.g. ETags and Cache expiry tags) [5pts]
Optmised images: Are images optimised and not scaled [5pts]
Cookie free domains: Images or other resources should be served from cookie-less domains to improve speed and reduce response times [5pts]
Order of CSS & Javascripts: Always load CSS before the Javascript, Put most of your Javascript at the bottom [5pts]
No 404s: Requests should not encounter 404 errors [5pts]
No redirects: There should not be
any redirects [5pts]
Cacheable Ajax: Ajax requests should explicitly use ‘Get command’ and cache the response [5pts]
The way the website has been built and deployed from a coding and performance perspective.
MethodologyThe ‘Technology’ parameter in detail (continued)
Performance [50pts]
Page load time (with cache): Total time to load the page and assets until the page become responsive without cache. [7.14..pts]
Page load time (without cache): Total time to load the page and assets until the page become responsive with cache i.e. loading the page again. [7.14..pts]
Average page size (without cache): Average amount of data user received when requested a page [7.14..pts]
Page size (cache): Total page size with cache [7.14..pts]
Number of HTTP requests (without cache) How many http requests are done to accomplish a page load [7.14..pts]
Concurrent user load test: The resilience of the site against a load of concurrent users [7.14..pts]
Number of requests handled: Total number of requests handled [7.14..pts]
How does it differ from other benchmarks?
What makes a great corporate website?
Website diagnostic scores
29
Design
Content
User experienceTechnology
Visibility
Series1
What do you think?
Website diagnostic scores
31
Design
Content
User experienceTechnology
Visibility
Land SecuritiesCoca-Cola CompanyShellRocheGESeries6
‘Scores on the doors’
Website diagnostic scores
32
Design: 56
Content: 72
User experience: 32
Technology: 74
Visibility: 50
Shell Series2
‘Scores on the doors’
Website diagnostic scores
33
Design:68
Content:75
User experience:69
Technology:50
Visibility:52Land Securi-tiesSeries2
‘Scores on the doors’
Website diagnostic scores
34
Design: 70
Content: 63
User experience: 50
Technology: 47
Visibility: 71Coca-Cola CompanySeries2
‘Scores on the doors’
Website diagnostic scores
35
Design: 80
Content: 71
User experience: 67
Technology: 42
Visibility: 78
GE Series2
‘Scores on the doors’
Website diagnostic scores
36
Design:79
Content:79
User experience:74Technology:76
Visibility:65
Roche Series2
‘Scores on the doors’
Website diagnostic scores
37
Why does no-one score more than 80?
Design• Lack of consistency
across content, pages and sites
• Lack of distinctiveness• ‘Over-design’
User experience• Unconventional
navigation• Poor linking together of
different content elements
• Poorly implemented image and video libraries
• Poorly implemented job search functions
• Poor search functions
Content• Lack of ‘functional’
information to meet basic audience needs
• Poorly articulated purpose and strategy
• Lack of editorial control over content
Visibility• Lack of promotion
across ‘owned’ social channels
• Poor implementation of social sharing functionality
• Lack of paid promotion for corporate ‘hot topics’
• Lack of clear SEO strategies
Technology• Poor optimisation of
code or assets• Poor performance cause
by ‘heavy’ designs
Website diagnostic scores
38
Design
Content
User experienceTechnology
Visibility
Land SecuritiesCoca-Cola CompanyShellRocheGESeries6
‘Scores on the doors’
Less is more, both in design styles…
Mobile first?!
Website diagnostic scores
43
Design
Content
User experienceTechnology
Visibility
Land SecuritiesCoca-Cola CompanyShellRocheGESeries6
‘Scores on the doors’
Bringing the business to life by creating a content publishing platform…
…and fill it with beautifully told stories…
V
…that use stunning photography, video and writing
222 words 518 words
Tackle the big issues head-on
Bring the leadership to the fore…
Serve the informational needs of journalists…
…and investors
V
Release key data/facts from reports
Website diagnostic scores
53
Design
Content
User experienceTechnology
Visibility
Land SecuritiesCoca-Cola CompanyShellRocheGESeries6
‘Scores on the doors’
Navigation that works for all audiences…
Create landing pages that work hard,…
Create landing pages that work hard,…
V
…and/or campaign hubs for important topics
Link content together to aid user journeys
Develop useful tools/apps that meet specific needs…
Shell INSIDE ENERGY app
Shell Investor & Media app
GE Careers Guide app
Provide help and support at every step of the journey
…and (try your hardest) to create a seamless job search & application process
V
Website diagnostic scores
62
Design
Content
User experienceTechnology
Visibility
Land SecuritiesCoca-Cola CompanyShellRocheGESeries6
‘Scores on the doors’
• Coding standards are relatively good across
the board
• Some of the biggest sites suffer from poor technical performance
• Performance issues can be caused by design decisions and/or poor implementation
63
Look at site performance as well as coding standards…
Website diagnostic scores
64
Design
Content
User experienceTechnology
Visibility
Land SecuritiesCoca-Cola CompanyShellRocheGESeries6
‘Scores on the doors’
Implement social sharing functionality across the site,…
…implement Twitter cards to optimise sharing…
V
…and create social media dashboards focused on corporate issues…
Think carefully about how your search results will be displayed…
V
…and encourage debate across key topics
Use social channels to amplify the corporate story…
…and integrate user generated content where possible
So how do you go about creating a best in class corporate website
1.Ensure you equally understand content marketing as much as the functional needs of corporate website audiences
2.Ensure the right balance between innovation and convention3.Get designers, UX architects, comms consultants and techies
working together from the start4.Create an editorial team that can find, create, publish and
manage content on an on-going basis
5.Put a cross-functional governance team in place to maintain the integrity of the site going forward
Agenda
8:50 – 9:00am – Introduction from the ChairJames Warren, Head of Digital, MSLGROUP UK and EMEA
9:00 – 9:40am – What does a best in class website look like?Dean Parker, Senior Digital Consultant, MSLGROUP
9:40 – 10:20am – Panel discussion and Q&ASimon Thresh, Digital Strategy Lead, SABMillerJames Russell, Corporate Communications Director, ExperianLucy Cording and Dean Parker from MSLGROUP
73
74
Thank you