Bye Bye, Page Design

Case: Hi-Fi Klubben.
An introduction to the content and development strategy behind Hi-Fi Klubben's new responsive commerce site, mainly focused on how we have worked with content at the core of our design and development process.
Presented at EPiServer Update 2013 by my colleague Mette Schou and me.
The presentation was not recorded, so we've included a rough transcript, since the slides might be a little hard to follow on their own (talk was given in Danish, so our apologies for any leftovers of DK grammar and the likes).
I uploaded a version without the transcript at https://speakerdeck.com/livmadsen/bye-bye-page-design-clean

Transcript

1. Mette: As digital developers, we face a crazy world; a myriad of devices, screen sizes and platforms is upon us - and new ones are added every day. We're outmatched, and it seems utopian to believe that we will ever get the upper hand. Liv: BUT, obviously we wouldn't be here, if we didn't believe that there is a way to handle the onslaught. We believe that the key to survival in this world can be found in structured content; In working with content in such a way that it can be created in one place and used in several places - or COPE: Create Once, Publish Everywhere. My name is Liv, I'm a Front-end Developer at Creuna in Aarhus. Mette : And I'm Mette, and I work with user experience design and content strategy. 1
2. Liv: The next 25 minutes we're going to spend in the company of Hi-Fi Klubben. We have helped Hi-Fi Klubben develop their new responsive commerce site and we are going to share with you some of the thoughts behind the new solution – in particular we will talk about how, together with Hi-Fi Klubben, we have worked with content as the core of our design and development process. Mette : We have approached content from a both strategic and qualitative angle in order to make it context-agnostic, and in order for it to be reusable across channels and devices. And to meet the needs of the ever-changing customer reality we all face. 2
3. Liv: When we started our cooperation with Hi-Fi Klubben, the overall motivation on their part was a desire to develop and prioritise the digital channels. The occasion was that they had decided to phase out their physical catalog, which had been an important tool for the in-store advisors. The catalogue had had three main functions: 1: Display product range 2: Support customer research and exploration through inspiration and information articles 3: Extend the in-store conversation - the catalogue could be handed to the customer with a notation on the pages relevant to the dialogue. Offline, Hi-Fi Klubben have long been associated with expert advice and a high level of service and it was important to transfer these associations to the digital universe. At the same time we also had to be careful not to create competition between the online store and the franchisees in the physical stores. 3
4. Mette : A new study confirms something that we have long suspected: It is not enough to just make content available to multiple-device users – the quality of that content itself is also a significant factor. Therefore it's very important to have a content foundation that can adapt, thrive and add value in different contexts. 4
5. Liv: When it comes to web solutions, customers don't think in silos like "mobile web" and "desktop web " - we shouldn't either. They just think "web" and they expect to be able to perform whatever actions they need to online, be it research or other – and they might use multiple devises alternately (or even simultaneously) when doing so. Hi-Fi Klubben, like most of our clients, were seeing an increasing number of visitors from mobile devices, and it was also something that the new platform should be able to accommodate. 5
6. Mette: So in order to support the cross channel customer, we have used content as our primary driver – in many different ways: In our day to day cooperation with the customer, in our internal team processes and as the cornerstone of the solution on a strategic, qualitative and structural level. 6
7. Liv: For us as an agency this is the perfect occasion to evaluate (and overhaul) our processes and deliveries. It becomes necessary to work from the content and up - with content as the central point of deliveries, both in terms of strategy, UX- and graphic design - and development. Where we would have typically started with visual deliveries to discuss aesthetic expectations with the customer, we have in stead worked with content design as a key element throughout the project. The first deliveries were, therefore, also content focused. 7
8. Mette: Exactly. To activate Hi-Fi Klubben's brand online, and to transfer the feel (and dialogue) of a real-life expedition to the digital universe, we have worked with tone, voice and "content design". We have developed a brand persona and a new set of communication tactics in order to give the universe a human face and voice – and to accentuate and retain what truly differentiates Hi-Fi Klubben from their competitors: Honest, passionate expert advice rooted in a genuine interest in empowering the customer enabling him or her to make the RIGHT choice. To assist this work, we have identified a number of emotional "key drivers" that support and fuel the customer's decision-making process 8
9. "Key drivers" are a number of fundamental values that guide the customers in their decision-making process, and as such they can be of great help to content strategy. Their purpose is to ensure the direction and quality of the content that the editors create - so that the customers get the answers they need (when they need them) to complete a purchase. The key drivers we identified for this project were: Relevance, choice, exploration and empowerment. These "key drivers" were also used to support the tone and voice of the universe, and to guide the flow we needed on the individual pages of the site. 9
10. In order to establish a natural page flow (reflecting the "real life" expedition) we mapped the page conversations The purpose was to build a page that answered the questions typically posed during an expedition in store. From a strategic viewpoint our focus has been to create and add value, and to maintain potential customers in an ongoing engagement loop. The basis of our content work has been a review of HFK’s existing content + an identification of new content types needed in order to fulfil the sites overall purposes It’s also important to note that Hi-Fi Klubben did not have to *start over*, there was no need to create everything from scratch, they had some good stuff to build on: Important to remember that content strategy work is an ongoing process Bridge: Our starting point for mapping conversations has been the “product page” (because it contains content elements key to the solution ) 10
11. ... This is the “page” where customers get answers to their key questions and carry out a number of key tasks Initially our focal point has been the customer research phase, and the dialogue a real life store clerk would have with a potential customer in that phase of the decision-making process Content wise the product page therefore spans a very broad customer base with a set of very diverse needs for information: High level information for the mainstream browsers & the Hi-Fi newbies, but also very in-depth tech specs for the geeks If we zoom in on a product page for a moment ... 11
12. As you can see the page consists of various content sections. Sections that in sum create a fully orchestrated one-pager. The different content sections each have a dedicated purpose, and together they facilitate a journey from mainstream insights to in-depth expert knowledge: Each section is designed to support a specific phases in the customer's decision-making process – while trying to take into consideration the huge variation in know-how and information needs. Content wise they are all rooted in the key drivers: relevance, choice, exploration and empowerment. Also each section represents a complete and flexible information unit. 12
13. We have used the word "CHUNK" to describe these different units of information - a chunk is a piece of content that makes sense in itself, and as such it can be used in different contexts - including off-site, e.g. in a dedicated member app or something completely different. It’s important to stress that all chunks on the site should hold content that reflects our key drivers, the tone and voice of Hi-Fi Klubben's brand persona, and their overall content strategy 13
14. Mette : One of the core principle in our solution is that content is not tied to specific pages. We have put a lot of thought into reusability. All of the content is structured in content repositories, it is flexible and it is semantically tagged. 14
15. Liv: These tags become very important – in Hi-Fi Klubben's solution we have multiple content repositories. This is because different types of content have different characteristics and it makes sense to maintain and organise it in different places – each as close to it's source as possible. For instance, we draw data on products and content which is directly linked to specific products (things like the product highlights and expert evaluations that you saw in the screenshot before) directly from the product database. Reviews from users come from the customer database, while non-product-specific content, like guides and inspiration articles, is maintained is EPiServer. To all of this content we have asked Hi-Fi Klubben to add metadata describing the content, that tells us what the content is and what it covers. Chunks from different sources are compiled for the user based on metadata and presented in an appropriate form and flow, eg. on the website. 15
16. Liv: An example of a such a composition could be personal pages. As you probably remember, Hi-Fi Klubben had decided to phase out the printed catalogue, so it became important to give the clerks a new tool to help customers *a$er* they had been in the store. For this purpose we have been working with something that was quickly dubbed "The digital hook"; It's a tool designed to make it easy for shop assistants to put together a custom page for a customer based on the dialogue they are having in the store, while they are having it. The page contains the concrete products they are discussing and the assistant can chose to include reading material on product features and relevant topics. Again, the key words are the drivers that we mentioned before (relevance, choice , exploration "empowerment"). The communication on the actual page is in accordance with the brand persona and Hi-Fi Klubben's service values. The page contains a personal greeting and is designed to signal that it is part of a continued dialogue. 16
17. Liv: So the "digital hook" supports a customer journey across channels, one that takes place both offline and online. For instance, let's imagine a customer. His name is Christoffer. He visits one of Hi-Fi Klubben's stores to find out what's up and down in the world of streaming - and get a few pointers on what to look for. He gets some great advice from the shop assistant, and some of the speakers do look great, but he's not really ready to purchase. He doesn't know if he prefers Airplay or Bluetooth, and frankly, a$er the visit he'd like to give the budget another look. Instead of handing him a catalog with folded corners, the clerk offers to compile an online overview of the products they discussed, so that he can investigate more at home. Christoffer now has access to a personal page on the website. And since he's already a member of Hi-Fi Klubben, there's an email waiting in his inbox from the assistant he talked to. It contains a link to his personal page and the assistant's contact information. He goes to the page and has a closer look. On the page he can see the speakers and a few articles about streaming. He also watches a video guide on bluetooth vs airplay and he reads the user reviews of his two favourite products. 17
18. Liv: So, basically, research can be done back and forth between offline on online and the customer can buy when he / she feels ready and via the device or channel that is nearest or most comfortable or convenient for the The customer has a high level of control over the process. Whether you are in the store or sitting at home in your sofa, Hi-Fi Klubben will take you by the hand and meet you were you last took off. You're not thrown back to start simply because you move from store to website. The website facilitates an extension of the personal contact with the customer. 18
19. Mette : On personal pages like these, there is no "editor” involved in composing the page – there is no custom placing the various chunks. These pages are created solely (and dynamically) on the basis of tags – on semantics and meta data. This has naturally led to a showdown with page design in the traditional sense, and with the classic, static Photoshop files, that I’m sure you’re all familiar with Liv: And as we mentioned earlier, we don't start with aesthetically focused design deliverables. 19
20. Liv: In line with the content first approach, we have – in both the design and development – worked from the content and up. When designing, we focus on chunks and we have designed the presentation of each type of content individually. For instance, we need to present products differently based on the context they are in. When a product teaser appears as a byline or a lead feature in relation to an article, we need to consider the role the product has in this particular context. What does it take to support the teaser in this role? Do we need a short or a long description, a price, a rating, maybe a buy-button? Only once we have these things figured out, we work on the styling. So basically, it's about designing content first, not pages. Working in this way has been a great help in managing the dialogue with Hi-Fi Klubben – and for us it has helped us to stay focused and ensure that the graphic design and the aesthetic choices underpin and support the function that the content has in a given context. Also, it has helped us to prepare the editors for the shi$ in workflows that responsive (which they had not been used to) and COPE would bring. 20
21. Liv: In keeping with the thoughts of one of our great idols in content strategy, Karen McGrane, it is time we do away with the idea that it's the editor's responsibility to handle ALL aspects of content – both form *and* presentation. With a responsive solution, and even more so if content should to be able to live on multiple platforms, it makes less and less sense, that editors focus on the presentation. 21
22. Liv: The days where editors could fire up a rich text editor and play around with the layout and edit table borders and place images in tables until it looked as pretty as the print ad – and then check it in a single browser and publish – are long gone. This should come as no surprise. But when we're talking about COPE, where content could potentially go anywhere, we need to accept that the days where the editors can play with the layout and then check it in a few browsers – and across a few breakpoints – are gone as well. For some editors, we find that it is a relief, but for others it's quite a struggle. It is up to us to make sure they know why "What You See Is What You Get" does not exist anymore, and why from now on it's "What You See Is Probably A Lie". 22
23. Liv: In order to live out COPE - Create Once, Publish Everywhere - we must move the focus to create structured content tagged with semantics. This is what allows us, for example, to query for all the content about streaming, or specifically about airplay *and* bluetooth. In most cases, the content creator is the now who's best qualified to ensure that the content is not only well done, but also well described. 23
24. Mette: In many ways our approach means a paradigm shi$ for content creators. And in a good way. It allows content creators to focus on the core strategy, and answer questions key to their customers: - Who is the target audience for this specific content chunk ? - What purpose does it have? - What form should this chunk have in order to support this purpose, and create emotional resonance? 24
25. Mette : It unleashes the power of customer-centric, quality content – that adds value to the conversation on page – and aligns with the key drivers, brand persona, overall startegy etc. It helps editors meet their *real* challenge - to make "awesome content". 25
26. Mette: So editors can now confidently lean back and say: Design is not MY job. They need no longer focus on the design, we have already done for them – it's the individual platform that controls the presentation. And, to quote another guru, Brad Frost: … 26
27. “Get your content ready to go anywhere because it’s going to go everywhere.” Mette: To some this might seem as the ultimate loss of control. Liv: And it may seem a little stressful, but 27
28. Liv: To understand the power of structured and well tagged content are the first, important steps to reach device zen. 28
29. Liv: … and in an even broader perspective, as your content spreads: channel zen. 29
30. Liv: The process that we have been through with Hi-Fi Klubben has had as one of it's primary goals to root this understanding. With this solution the foundation has been laid for the continued work, that Hi-Fi Klubben have to go through to update, upgrade, structure and tag their huge content base – guided by the content strategy. And to expand the content use to more touch points and channels. 30
31. Mette : At Creuna we have a saying: "Start small, show value". And of course, when we launch a solution like Hi-Fi Klubben we monitor the performance - along with doing tests, surveys etc. – in order to so ensure continuous, data-driven improvements. In this particular setting we're in today, the “Communication and Business track”, we're sure some of you are wondering if all this work with content strategy and focus on the personal dialogue pays off - and we are happy to report that it sure seems like it: 31
32. Mette : The average basket size has increased significantly. Also the conversion rate has increased greatly on mobile devices – which may not be that big a surprise given the fact that Hi-Fi Klubben did not have a responsive site before Average time spent on page has also increased a great deal – something that we're especially proud of given the fact that content has been our primary driver, and the fact that a great amount of work has gone into content strategy, tone, voice, brand persona, etc. in order to increase customer engagement – so yeah, it's pretty awesome to see that people are diving in, taking time to explore what’s on the site. 32
33. Mette : We know that we are both a bit geeky, in each our field, and we realise that for some of you here, what we have talked about today might seem a bit revolutionary. But in a crazy world where new devices and platforms are added every day, we need methods and processes that help us future-proof our solutions. And help us ensure that the customers have a good experience - *every* time. Liv: We believe that this is a good and entirely do-able way to handle many of the challenges that will come. It is not an inaccessible art. It's not even something that is necessarily difficult. It is a mindset - and what it boils down to is simply this: to think flexible and structured content. 33
34. Liv: Thank you – and go COPE! ( cue violins !) 34