Umbraco Show & Tell, London 2017
•Download as PPTX, PDF•
2 likes•1,027 views
Presentation given by Ben Pilgrim and Andy Butland of Zone at the Umbraco "Show & Tell" event held in London, on 31st March 2017. The theme of the day was the Umbraco editorial experience.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Umbraco Show & Tell, London 2017
Similar to Umbraco Show & Tell, London 2017 (20)
Recently uploaded
Recently uploaded (20)
Umbraco Show & Tell, London 2017
- 1. UMBRACO: THE GREAT EDITORIAL EXPERIENCE Andy Butland – Head of .NET development Ben Pilgrim – Senior account manager
- 2. WHAT WE’RE TALKING ABOUT TODAY 1. Introduction to Zone 2. What makes a website tick? 3. Including the editor 4. One feature, six ways 5. The backoffice: Umbraco’s secret sauce 6. Zone’s show and tell
- 3. ZONE 1
- 4. We help ambitious businesses win in a world where digital is mission critical
- 5. SOME OF OUR CLIENTS
- 6. WHAT MAKES A WEBSITE TICK? 2
- 7. 80% say they deliver a superior customer experience. – “Closing the delivery gap” by Bain & Co
- 8. 8% of customers agree they get a superior experience. – “Closing the delivery gap” by Bain & Co
- 9. How do we bridge that gap?
- 10. Focus on the unsung hero of website success
- 11. Website editor
- 12. Content is a service – a differentiator that provides a reason to choose one brand/retailer over another. And by adding value to the customer experience, content helps differentiate premium brands from discounters. When combined with great products and genuine utility, content can turn functional transactions into brand experiences.
- 13. Brands that put content first and are prepared to adapt to their customers’ needs are rewarded “We've done research on our content, and we get 30% extra value for every dollar spent.” – Beth Comstock, vice chair, GE “56% of people buying IBM technology had engaged with content during the buying cycle, whereas only 21% had spoken to a sales person.” – Andrea Ames, content experience strategist, IBM
- 14. MISSION CRITICAL DIGITAL INCLUDING THE EDITOR 3
- 15. INCLUDING THE EDITOR Discipline barriers – content, user experience and technical – are coming down though the use of agile, inter-disciplinary, customer- focused teams. Optimising the experience for the site visitor. But we also need to include the editor in these design discussions.
- 16. FOUR QUESTIONS • What content will we make available on our site? • How will it be presented to the user? • How will we make that happen? • How will it be managed – created, updated and refreshed?
- 17. CONTENT UX DEVELOPER EDITOR TRANSFORMING THE CONVERSATION
- 18. CONTENT UX DEVELOPER EDITOR TRANSFORMING THE CONVERSATION
- 19. ONE FEATURE: SIX WAYS 4
- 20. The same front-end feature can be managed in Umbraco in many different ways. The ‘right’ approach can only be found by considering how the content is to be created and maintained by the editors. To consider: • Where is the content sourced from? • How often will it be updated? • How flexible is the presentation? • Is there a need to reuse the content in other places of the website?
- 21. THE BACKOFFICE: UMBRACO’S SECRET SAUCE 5
- 22. Umbraco lacks an in-page, visual editing option. But perhaps this is a good thing. UMBRACO BACKOFFICE
- 23. For most websites, editors will spend much longer working with Umbraco than developers will! EDITOR EXPERIENCE BASICS
- 25. Umbraco is a portal for managing all content related to a website, not just the page content. NOT JUST FOR CONTENT
- 26. ZONE’S SHOW AND TELL 6
- 27. EXAMPLE: FLEXIBLE PAGE CONSTRUCTION
- 28. EXAMPLE: CONTENT REUSE WITH CUSTOM DISPLAY
- 29. EXAMPLE: CONTENT REUSE WITH CUSTOM DISPLAY
- 30. EXAMPLE: INTEGRATED EMAIL CAMPAIGNS
- 31. Start fast. Build fast. Learn fast. Get your products into your customers’ hands, listen and start tailoring it more to their needs.
- 32. THANK YOU Andy Butland – abutland@zonedigital.com Ben Pilgrim – bpilgrim@zonedigital.com
Editor's Notes
- The sweet spot, is creating something that uses insights, technology and creates experiences that we feel are mission critical to our client’s businesses
- We work with clients who are large and reach a wide variety of people, so keeping up with the connected consumer’s speed is a difficult task that we need to help with.
- Here we are showing the typical conversations that go on during a website development project, and indicating the additional role that needs to be included.
- In many case the “content” strategist and “editor” role may be the same person – but they are quite different roles. One is focused on what the site visitor sees and interacts with, the editor is responsible to updating and maintaining that content.
- Show demo here, simple feature for promotional “spotlight” content items implemented as: - Rich text editor - Fixed set of fields - Child notes - MNTP - Nested content - Nested content with picker for re-use The key point to keep in mind is that whilst some of these options may be considered better than others, there’s no right way – it all depends on questions around the nature of the content and how it needs to be updated.
- We work with some other CMS platforms at Zone and often have to consider, with our clients, which is most appropriate for a given project. One feature I’ve noticed a number of other platforms focus on is what I would call the “visual editing” experience. This is when it’s possible to browse the actual website or an interface that looks very like it, and, with appropriate permissions, click and edit content in place. It looks impressive, and is intuitive for casual editors. Umbraco doesn’t have this feature – it did in the past, but was quite some time ago and fell out of use, likely for the reasons I’ll describe. But I’d actually turn this around, and make the case that the absence of this feature is a plus point for Umbraco. The reason is that in practice, particularly for anything more than simple “brochure” sites, there’s a number of areas where the visual editing experience falls down – links, images, hidden elements, aggregated content. In summary, if designing an interface for editing, it would likely look quite different to one optimized for site visitors and read-only display. In Umbraco, that’s what we have with the back-office. Other platforms do to, but often this is a secondary consideration, both for the vendor and the implementer. It’s anticipated that editors will spend less time in this “forms” view, so it gets less attention. With Umbraco it’s the primary means of updating content, so it’s intuitiveness and features are uppermost in the mind both of the HQ and contributors developing the product and the developers of the website project. Visual editors are initially impressive and useful for casual site editors. But have some issues when considered as the primary editing interface for focused editors: Elements like images and links are not so easily managed Hidden elements – SEO elements, configuration, settings – aren’t obvious or are inaccessible Aggregated page content is edited elsewhere Interface is designed for display and user interaction, not content editing With Umbraco, the “forms” based editing environment is the first class citizen – both for the core product and site implementers.
- A key consideration is “who is the back-office for”. Although developers spend a fair bit of time there, it’s not for them. For any reasonably long lived Umbraco site, it’s the editors that spend the most time there. There’s a few simple best practices to look for when putting together a site, and for evaluating how a site is being built if your role is a commissioner or stakeholder.
- Some extra care, along with a number of simple guidelines and approaches will greatly improve their editorial experience: Balance providing sufficient flexibility with “just enough” choice Use tabs and compositions for organisation and consistency Use icons and descriptions for visual clarity and instruction Select (or build) the right property editor: From the core From community packages Build custom
- The Umbraco back-office can be a portal for managing all content related to a website, not just the content. Related information can be managed in a secure, consistent manner. E-commerce CRM Custom data One aspect of Umbraco’s flexibility is that it can be extended for management of related functions and not just website content. Additional sections can be created, custom dashboards and screens allowing secure access for example to reports, analytics and custom data management – in a familiar interface, with a single sign-on.
- I’d like to talk about where I work for a second….
- This screen shows an example of a flexible page we’ve created for the website of the Slater & Gordon law firm. The challenge here was creating a modular interface, that could include a range of different content types in whatever order the editor chose. We choose to do this using the “nested content” package demonstrated earlier, which nicely represents in the back-office what the visitor will see on the site front-end and can be managed from a single page.
- Here we see a feature from the Tesco “Eat Happy” project website that utilizes an Umbraco extension developed by our colleague Neil Cumpstey – one we have open-sourced and made freely available to others should they wish to use it. His insight was that within a site a single piece of content is often surfaced in a number of ways – take a blog post, it will have a full-page itself, but also appear in listing pages, search results, as related content perhaps in a side-bar, even within another post if referenced. In each case presenting a sub-set of the content fields, in a different visual display. The package he developed allows this to be implemented very easily by the developer – in the above screen shot we can see different types of pages rendering in different ways as appropriate for them in the listing, including in the back-office editor so the editor can see a true WYSIWYG experience.
- Another colleague Ali Taheri put together this website – it’s actually a side project so I promised I would plug it - www.bestiranian.com – it’s a search and listings site for the best Iranian restaurants, bars and companies in London. The reason I asked him if we could include it here was from a nice feature he implemented where, in the back-office, he integrated a Google API to aid the editor in populating the contact details of each organization. As you’ll see you can complete them one at a time, but an easier way is to obtain the Google “place Id”, enter that, and then the rest of the fields will be automatically populated following retrieval from that API. The same mechanism can then be used to present other information, not-CMS managed, on the website front-end, such as reviews and working hours.
- This slide shows a last example of the idea of integrating non-content, but related, site functions, within the CMS – from a website we’ve built for Greene King. It’s implemented as a custom section that we can restrict appropriate users to have access to. And a dashboard from which the editor can prepare email campaigns, select groups and send out email newsletters to subscribers using a MailChimp API.
- Any questions?