Philips.com Homepage guidelines. BCD - Digital February 2018 Version 1.2

Transcription

1 Philips.com Homepage guidelines BCD - Digital February 2018 Version 1.2 1

2 Table of content Introduction to the new homepage Content sections explained Content requirements AEM component configuration Introducing an editorial board 2 Philips.com Homepage guidelines v1.2

3 3 Introduction to the new homepage

4 Introducing a new homepage for Philips As part of project started in 2015, we were working on a revised homepage for Philips. The homepage will be focused on the main user tasks of our website visitors and will allow us to drive relevant HealthTech content The content guidelines will indicate how we as different teams of Digital, CCoE, Markets, BGs and Design can work together to: Safeguard consistency across the homepages Make sure content is kept fresh, up-to-date and reflecting our key message to external stakeholders Support the creation of relevant content to fit within the designs created 4 Philips.com Homepage guidelines v1.2

5 What we want to solve with the homepage High traffic Low conversion Unclear navigation Diverse content, but limited connection with tasks Professional 9% Consumer 91% 0% 20% 40% 60% 80% 100% Traffic share corporate homepage (Jan Aug 2015) Large portion of our traffic visits our homepages (12% - 28 mio) Majority of the traffic is consumer (90%) High exit rates from homepage (e.g. US: 45%, CN: 77%) Navigation not clear or not found at the moment Unnecessary additional step for consumers, they have 2 homepages but are still not where they want to be: products Content on homepage does not necessary reflect why visitors are coming to our site Limited clicks on content within homepage (avg. 4% of visits) 5 Philips.com Homepage guidelines v1.2

6 Homepage top 10 tasks Based on the research we did to go from a long-list of tasks towards a list to be used for the main tasks of our homepage, the user survey showed the below top 10 items for us to focus our efforts on. 7% of tasks get 25% of votes 16% of tasks get 48% of votes 6 Philips.com Homepage guidelines v1.2

7 Principles of the homepage So we started on redesign the corporate homepage together with Philips Design to use a task driven approach, resulting in the designs you see on this and next slides Using data insights, hackathons, prototype building, user testing and A/B tests have driving continuous improvements based on a top 10 task list we gathered via user surveys The main improvements we will implement are: Use the homepage to position and show Philips as a HealthTech business Default open and icon based navigation Direct entry possible for Personal health categories Optimized footer to include relevant links No carousels will be used anymore, they do not work on desktop 7 Philips.com Homepage guidelines v1.2

8 8 Content sections explained

9 High-level overview content sections In the new design of the homepage, we decided upon the following type of content sections. The next slides will show more explanation and reasoning for each of the content sections, as well as an overview of the minimum and maximum amount of sections per type (incl. proposed fallbacks) Please use this information for both content creation and delivery New categorization An outside-in and consumer tested approach to present our product portfolio Latest product innovations Showing our latest product innovations and broad portfolio Promotions Add either local specific promotions or lead into promotions homepage Social content Allowing consumer to connect to our branded channels HealthTech content block Showcase HealthTech related content on e.g. Connected Health, Lumify, BlueTouch, Health continuum message, etc. Branded story content Showing locally relevant branded story content from for example our Innovation & You content hub Newsletter subscription Showing the benefits of subscribing to our newsletter, growing our database Quick links Add default quick links to e.g. Careers, Store locator Support entry Allow consumers to get an easy entry towards the Support section 9 Philips.com Homepage guidelines v1.2

10 Content section #1: HealthTech As a first content section for the homepage we agreed upon content around the topic of HealthTech, allowing us to showcase us and support the messaging of becoming a health driven company. This could be content on for example: Consumer propositions like our Personal health programs, ugrow, BlueTouch Healthcare oriented propositions like Lumify, DreamStation, Lifeline Health continuum messaging We should as much as possible place content in this section in the context of a consumer, which is the majority of our traffic (90% in general) Studies have shown that once consumers know what we do in the Healthcare space, they are more likely to buy from Philips as a brand Maximum 2 slots 10 Philips.com Homepage guidelines v1.2

11 Content section #2: Product innovations The second section is meant to be used for product innovations, allowing us also to show the breadth of our portfolio Although we are in the transition for a HealthTech company, that does not mean we can only push Personal Health BGs. A large portion of our traffic is still related Brand licensee products (e.g. Gibson, TPVision) or B2C Lighting. Therefore we need to be a balance GBL, PH and Lighting. Guidance is provided in this document on how to balance The local market is in control to apply this balance in the different slots based on their running promotions, product launches, campaigns. The editorial team will review homepages as well for an appropriate balance. Please do not use full CTN and descriptors in your titles, make them attractive so people are triggered to read more Maximum 3 slots 11 Philips.com Homepage guidelines v1.2

12 Content section #3: Branded story content As the homepage is an ideal location for showing our brand, this 3 rd slot has been reserved for showing branded story content. Emphasis on the content should be that it is locally relevant, meaning it cannot be pushed into the market by the global brand team, not without alignment. Ideally the content is also connected to any of our products, solutions of services we offer as Philips to our consumers and customers. Maximum 2 slots 12 Philips.com Homepage guidelines v1.2

13 Content section #4: Promotion section Connected to one of the main tasks (#3), website visitors are very much interested in discounts and promotions. Therefore the 4 th content section is to be used for showing the promotions we have on display. We also know that not all markets use the promotion center currently, therefore this slot could also be utilized for any running campaigns as a fallback. Maximum 2 slots 13 Philips.com Homepage guidelines v1.2

14 Content section: Support entry During the prototype build we added a support wizard where a visitor would be able to be properly redirected to a specific page based on some questions. As this wizard will require more thinking in terms of questions and results, for the first launch of the new homepage we will have a simple entry towards the support homepage. Of course we will together with the consumer care team on defining how this wizard could work, what questions to ask to further simplify to find the right support information on Philips. Standard slot 14 Philips.com Homepage guidelines v1.2

15 Content section: Configuration Based on the content sections defined in the new homepage, we came up with the following amount of content blocks We have indicated a minimum and maximum number of content blocks for each section as well as a potential fallback. The fallback should only be used if there is no appropriate content available for the main content section identified. Content section Minimum Maximum Fallback Comments HealthTech 1 2 Latest product innovation Within the HealthTech content block we should focus on delivering content which show a consumer angle, to resonate with the majority of our visitors Latest product innovations 1 3 Campaign related content Branded story content 1 2 Campaign related content Promotions 1 2 Campaign related content Ideally we show product innovations related to the topic of Health Social content / channels 1 1 This will be a standard content block on the page Newsletter subscription 1 1 This will be a standard content block on the page 15 Philips.com Homepage guidelines v1.2

16 Content section: Configuration Personal Health & GBL balance To balance the homepage in terms of Personal health and GBL, we provide the following guidance, applicable for the product innovations and promotions content sections Our guidance is that with 5 slots available, we utilize a 60/40% balance 3 slots for Personal Health BGs 2 slots for GBL (incl. B2C Lighting) In our opinion it is up to the local market to make a decision on which content goes when and where, based on the local campaign calendar and their insights. Below are some example configurations, based on the 60/40 balance to show how this guidance could work out. The order of the items is not fixed. Example configurations HealthTech HealthTech Product innovation PH Product innovation PH Product innovation GBL Branded story content Branded story content HealthTech HealthTech Product innovation PH Product innovation GBL Product innovation GBL Branded story content Branded story content HealthTech Product innovation PH Product innovation GBL Branded story content Promotions - PH HealthTech Product innovation PH Product innovation PH Branded story content Promotions GBL Notes After initial go-live we will look at ways to randomize content in the slots The editorial board will monitor the balance of this guidance as implemented on homepages The balance in time might change due to newly gathered insights Promotions PH Promotions PH Promotions GBL Promotions PH 16 Philips.com Homepage guidelines v1.2

17 Content section: Configuration order The order of the content sections has been fixed and agreed upon with the head of BCD, Digital and Brand. It is allowed to switch the branded story and promotion slots in terms of order, all other slots remain as indicated below The ordering within a content section is free if there are multiple items and is to be determined by the market Normal order Alternative order #1 HealthTech #1 HealthTech #2 Product innovation #2 Product innovation #3 Branded story #3 Promotions #4 Promotions #4 Branded story 17 Philips.com Homepage guidelines v1.2

18 18 Content requirements

19 Content requirements To have as much visual impact as possible, we will use big images for each of the content sections For each content section the same principles apply, bringing consistency across the whole homepage 19 Philips.com Homepage guidelines v1.2

20 Content requirements: Image Great visuals help to illustrate the story, therefore we emphasized the usage of high impact images As we want to use full-bleed images, the following minimum requirements are defined for each of the breakpoints, which are driven by the width of the image. Image guidance When a person is in the image, try to make sure they are not too close to the border of the image canvas. Do not use too light/bright images, as we need to position the title and descriptions on top of the image Ideally the image can be flipped horizontally, to allow us to differentiate the positioning of the text 2000 pixels Breakpoint Minimum width Minimum height Large 1920 pixels 700 pixels Medium 960 pixels 592 pixels Small 700 pixels 450 pixels Xsmall 460 pixels 226 pixels 20 Philips.com Homepage guidelines v1.2

21 Content requirements: Text Supporting the image is to have a good title to capture someone s attention and if necessary more explanation on the topic before someone presses the call-to-action button When adding a description, make sure from a SEO perspective the right keywords are used. For the call-to-action button, make sure it connects with the destination page The following requirements could be used as a guidance for creation of the textual content Call-to-action Title Item Title Description Call to action Maximum characters 50 characters 300 characters 50 characters Description 21 Philips.com Homepage guidelines v1.2

22 Content requirements: Text styling For the title and description we have two possible options for color. Default; Will be black Inverted; Will be white Heading 1 Light shadow Heading 1 Xbold shadow As we might not always be able to have images with a clean background or it could be too light/bright, we advice to always use the shadow option when selecting a text style For the title we can use a combination of: Heading 1 Light shadow Heading 1 XBold shadow Heading 1 Light shadow Use XBold to highlight certain keywords A title should never consist of only Xbold styling 22 Philips.com Homepage guidelines v1.2

23 Content requirements: Theming This option is still to be developed / deployed in 2017 Small breakpoint example With the homepage, we want to add the ability to apply a certain theme to each of the content section, which will influence: The color of the background on S / XS breakpoints The color of the call-to-action button The following themes can be used for each of the content selections, in correspondence to the color palate of our brand guidelines Blue Aqua Green Influenced by the theme Orange Purple Pink Final backgrounds still to be fine-tuned 23 Philips.com Homepage guidelines v1.2

24 AEM component configuration AEM = Adobe Experience Manager (aka CQ) 24

25 Homepage component setup The main component for the homepage is the GC06 Story banner, an already existing component, probably well-known for people who setup new pages in AEM GC06 Story banner The GC06 controls the layout and size of the image on different devices as well as determines the positioning of the texts and call-to-action button Within the GC06 we use the following components: GC11v3 Generic Text component GC15 Link/Button component Information on how this components work can be found both in the Component library as well as the Top-10 component training GC06 Component library details GC11v3 Component library details GC15 Component library details Top 10 Component training (video can be found here) GC15 Link/Button GC11v3 Generic Text 25 Philips.com Homepage guidelines v1.2

26 Homepage GC15 analytic tags To help with comparing the number of clicks in each of the content blocks on the call-to-action, we would like to suggest that the following analytics tagging is applied on the GC15 link/button component Example tags The following structure is preferred to be used: <section-name>:<target_page_name>:read_more <section-name> refers to which content section the content block belongs. Options are: healthtech product_innovation brand promotions <target_page_name> is the name you decide for the page/subject you are referring to Make sure when using these tags that: The whole analytics key is lowercase It does not contain spaces or these are replaced by underscore ( _ ) The term you use for the target page is meaningful / easy to understand 26 Philips.com Homepage guidelines v1.2

27 Homepage component setup The idea about the content blocks is to alternate (if possible) the position of the text from left to right. This can be achieved by using the parsys settings of the GC06. The parsys width determines how wide your content block will be normally is set to 50% The parsys offset will determine if your text will be positioned on the left of the screen or the right. For left-aligned use an offset of 0% For right-aligned, use an offset of 50% Make sure when using offset that the total of the width and the offset is not larger than 100% 0% offset 50% offset To make sure the spacing between text and CTA is set correctly, we advise to use the following settings on the spacing tab of the GC11v3 (Generic Text) 27 Philips.com Homepage guidelines v1.2

28 28 Introducing an editorial board

29 Introducing an editorial board As part of the new homepage, besides introducing a new content structure, navigation and design, we want to also implement an editorial board. Part of the responsibility of the editorial board would be to Safeguard consistency across the homepages Make sure content is kept fresh, up-to-date and reflecting our key message to external stakeholders Define the ongoing strategy and ownership for the homepage of Philips The editorial board will bring a shift in how we treated the homepage till date, with the aim to start utilizing it much more as a Philips HealthTech magazine 29 Philips.com Homepage guidelines v1.2

30 High-level editorial process CCoE Design Editorial board BG Market Editorial board Digital Digital Discus upcoming events, launches, key dates and global campaigns are discussed. Decisions will be made on Philips.com site content. Produce all assets (copy, images and video links) and submit for approvals from Brand Helpdesk and L&R Reassess all live Philips.com content on a quarterly basis. Digital will also regularly check and perform spring cleaning of market homepages. BG Editorial board CCoE Decide Communicate Produce Publication Review Markets Design Communicates the content plan for Philips.com to markets via Digital Content Calendar and Content Drops. Activate or remove assets on Philips.com and drops new assets to markets for their potential usage via content drops Remove assets Digital Digital Market In progress - Process is not fully finalized yet, details are being worked on. Next steps are to setup regular meetings, assign people to the board and define the RACI 30 Philips.com Homepage guidelines v1.2

31 Editorial process: next steps The following steps have been identified to take the editorial process to the next step for implementation Define participants of editorial board + RACI Schedule editorial board meetings Define content calendar setup Homepage Define stakeholders to be informed with content calendar / content drops Select content owners / content specialist for creation/maintenance Homepage content Define and create engagement/performance dashboard based on.com analytics (e.g. visits, bounce rate, channel distribution, page flows, search keywords, etc.) If you have any questions on the editorial process / board, please do not hesitate to reach out to joost.van.dun@philips.com 31 Philips.com Homepage guidelines v1.2

32 32

33 Content inspiration Netherlands United States Spain Sweden France 33 Philips.com Homepage guidelines v1.2