PPTX, PDF1,033 views

Umbraco Show & Tell, London 2017

The document discusses the importance of editors in the web experience and how they contribute to bridging the gap between customer expectations and actual experiences. It emphasizes that content is essential for brand differentiation and outlines the need for collaborative, agile design processes that include editors. Additionally, it highlights Umbraco's backoffice as a key tool for managing content effectively, although it lacks visual editing options.

Technology◦

UMBRACO: THE GREAT
EDITORIAL EXPERIENCE
Andy Butland – Head of .NET development
Ben Pilgrim – Senior account manager

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

We help ambitious businesses win in a world
where digital is mission critical

80%
say they deliver a
superior customer
experience.
– “Closing the delivery gap” by Bain & Co

8%
of customers agree they
get a superior
experience.
– “Closing the delivery gap” by Bain & Co

Focus on the unsung hero of website success

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

MISSION CRITICAL DIGITAL
INCLUDING THE EDITOR
3

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.

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?

CONTENT
UX DEVELOPER
EDITOR
TRANSFORMING THE CONVERSATION

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?

THE BACKOFFICE:
UMBRACO’S SECRET SAUCE
5

Umbraco lacks an in-page, visual editing option.
But perhaps this is a good thing.
UMBRACO BACKOFFICE

For most websites, editors will spend much
longer working with Umbraco than developers
will!
EDITOR EXPERIENCE BASICS

Umbraco is a portal for managing all content
related to a website, not just the page content.
NOT JUST FOR CONTENT

EXAMPLE: CONTENT REUSE WITH CUSTOM DISPLAY

Start fast. Build fast. Learn fast.
Get your products into your customers’ hands,
listen and start tailoring it more to their needs.

THANK YOU
Andy Butland – abutland@zonedigital.com
Ben Pilgrim – bpilgrim@zonedigital.com

Umbraco Show & Tell, London 2017

1.
UMBRACO: THE GREAT EDITORIALEXPERIENCE Andy Butland – Head of .NET development Ben Pilgrim – Senior account manager
2.
WHAT WE’RE TALKINGABOUT 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 ambitiousbusinesses win in a world where digital is mission critical
5.
SOME OF OURCLIENTS
6.
WHAT MAKES A WEBSITETICK? 2
7.
80% say they delivera superior customer experience. – “Closing the delivery gap” by Bain & Co
8.
8% of customers agreethey get a superior experience. – “Closing the delivery gap” by Bain & Co
9.
How do webridge that gap?
10.
Focus on theunsung hero of website success
11.
Website editor
12.
Content is aservice – 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 putcontent 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 INCLUDINGTHE EDITOR 3
15.
INCLUDING THE EDITOR Disciplinebarriers – 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 • Whatcontent 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 THECONVERSATION
18.
CONTENT UX DEVELOPER EDITOR TRANSFORMING THECONVERSATION
19.
ONE FEATURE: SIXWAYS 4
20.
The same front-endfeature 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 SECRETSAUCE 5
22.
Umbraco lacks anin-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
24.
EDITOR EXPERIENCE BASICS
25.
Umbraco is aportal for managing all content related to a website, not just the page content. NOT JUST FOR CONTENT
26.
ZONE’S SHOW ANDTELL 6
27.
EXAMPLE: FLEXIBLE PAGECONSTRUCTION
28.
EXAMPLE: CONTENT REUSEWITH CUSTOM DISPLAY
29.
EXAMPLE: CONTENT REUSEWITH CUSTOM DISPLAY
30.
EXAMPLE: INTEGRATED EMAILCAMPAIGNS
31.
Start fast. Buildfast. 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

#5 The sweet spot, is creating something that uses insights, technology and creates experiences that we feel are mission critical to our client’s businesses
#6 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.
#18 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.
#19 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.
#21 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.
#23 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.
#24 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.
#25 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
#26 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.
#27 I’d like to talk about where I work for a second….
#28 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.
#29 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.
#30 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.
#31 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.
#33 Any questions?

Umbraco Show & Tell, London 2017

More Related Content

What's hot

Similar to Umbraco Show & Tell, London 2017

Recently uploaded

Umbraco Show & Tell, London 2017

Editor's Notes