How to design a great Content App for Umbraco 8

Today I spoke at the inaugural Umbraco Spark Innovation Conference, based on some research that Jamie Pollock and I have done.  Titled How to design a great Content App for Umbraco 8 the talk was really an opportunity for me to research and better understand one of the new features in Umbraco 8: Content Apps.  Over the space of a few weeks I managed to speak to a number of Umbraco devs who have been pioneering the development of Content Apps, and this presentation is the distillation of what I learnt.

Transcript

Slide 1

While working to design and build a new Content App for our Social News Curation Tool with Jamie Pollock it struck me how deep I’d got in terms of UX and Editor Experience.  Lots has been written about how to build a Content App, but how do we design a great editor experience? When we’re designing a plugin for a tool that hasn’t even been released, how do we know what will work and what won’t.  

This is really my working notes from talking to some very clever people in the community.

Disclaimer: I'm not an expert Dev - which is fine because I don't intend to teach you how to build a content App.  Plenty of more clever people can teach you that. I'm also not a designer, however I am going to talk about design and user experience.  But I figure design and development are both things that you do not things that you are.  

Slide 2 - What are Content Apps?

Slide 3

Let’s start with what they’re not -- I found this when googling for Content Apps.  But they’re definitely not from Umbraco 5.

Slide 4

Lee Kelleher wrote a great article in 24Days - talking about Content Apps - it’s really a call to action for the community to collaborate in this new age of Content Apps to avoid the proliferation of packages that happened in v7.  

But back to my point, content apps evolved from the plugins that place read-only companion “non-content” onto Content Nodes as Data Type plugins.  

Slide 5

Niels Hartvig said “Then I saw a number of custom property editors which wasn’t property editors at all but used the space (and that extension point) to do something else. At one point it made sense to provide a way to enable all this in a better and more controlled way.”

Slide 6

SEO Checker is a great example of the early origins for a Content App.  SEO Checker is a package that gives feedback on the quality of the SEO work that has been done on an individual node.  We use it extensively, and traditionally placed it in a tab towards the back of a node.

Of course in V8 tabs are no more so for now we’ll be putting SEO Checker in a group towards the bottom of the node.

Slide 7

Niels went on to say “Initially, I had Content Quality and Analytics in mind as Content Apps. Then slowly it grew with other data in the context such as Form entries and e-commerce stats.”

Slide 8

So Content Apps appear in the top of the Editor in a sort of tab like view.  By default every Node gets the Content and Info Content Apps but then through Plugins Site Builders can add in further Content Apps.

https://our.umbraco.com/documentation/Extending/Content-Apps/

Slide 9 - Early concepts

There was some great early work done on content apps last year.  I know that both Lotte Pitcher and Callum Whyte did some great work.  

The first person I spoke to about their experience of designing a Content App was Callum.  He’s done a number of experiments with building Content Apps.

One of the earliest he built was an integration with Grammarly to give feedback on the quality of the page.  Callum explained that like a lot of his projects it was a weekend hack. Up early on Saturday and power through to Sunday evening -- this gives a really good idea as to what is possible when developing Content Apps -- you can build some pretty rich integrations in a relatively short timescale -- if you’re a rock star Umbraco dev.  Your mileage may vary.

I was really interested to understand why make this a content app -- what was the benefit?  I mean it’s pretty rhetorical -- this is use case that has obvious benefits. Only the other day one of my customers was asking about spell checkers in Umbraco -- there’s an obvious benefit to this being a Content App.  But Callum also thought that the notification bubbles at the top.

In terms of how the app was designed, it was interesting.  This was a common thread from everyone I spoke to, the UX evolved from the experience of coding.  “It looked crappy at first, and trying to style it was difficult”.

When I asked what he’d do differently….. “Finding the right stuff to make it look good is tough”.  An improvement HQ could make is to publish a style guide with instructions on how to make it easy to style the backend consistently.

Slide 10 - What's been released

So moving from the early work on Content Apps, Callum suggested I speak to Paul Seal and Nathan Woulfe.

Slide 11

Paul has built a few Content Apps already, but our talk focused on a couple of Media Focussed Content Apps which I loved, because Media is Content too.

Firstly his mosaic tile game Content App which I hated, because I was useless at those games as a kid.  But it was a great example, because he was able to build this start to finish in 2 hours.

Slide 12

The second app was one that Paul collaborated on with Nik Rimmington.  The Image Filter Content App is a tool to enable Editors to make minor image manipulation in the CMS.  I think this is invaluable -- I recently put together a quick blog in Square Space and it has basic image manipulation baked right in, so enabling that in Umbraco is super cool.

This was the work of two people pretty much every night in the run up to the package competition.  And was a brilliant example of the value of collaboration - “Collaborating on it was good, because there are things I wanted to do but I couldn’t do it all.”

Slide 13

The next package I looked at in more depth was the winner of the Content App Contest that happened a few months ago.

Preflight is a Content App which makes pre-publishing testing of content nodes completely extendable.  It has a model that enables anyone to create plugins for Preflight to undertake their own checks.

Interestingly Callum said “Preflight has the capability to do what most people want to do with a Content App.  I fully see that most devs will create a Preflight Plugin not their own Content App”.

When I spoke to Nathan - Preflight was born from using Siteimprove which gives great feedback on SEO and Accessibility.  But it’s a separate site, and while there is a Siteimprove Umbraco plugin, that isn’t frictionless. SI was also more than his users needed.  So he started to create plugin for v7, which worked but was far from ideal.

Interestingly Nathan was scratching his own itch -- but it’s a real business problem.  He has 200 editors and there’s 2 people in his team responsible for pre-checks on content.  So creating a tool that enabled editors to do this themselves, will reduce the load on his team.

In terms of brick walls hit during the design and development Nathan reported very few.  Some challenges with lack of documentation, which of course will improve over time.

Slide 14 - Find more content apps

• Google Analytics Integration by Skybrud
• Google  Page Speed Insights by Pawel Bres
• Linked Nodes Content App by Soren
• Translation Manager by Kevin Jump

Slide 15 - Design thinking and failing fast

So I mentioned earlier that this whole stream of consciousness came from an idea related to the social media curation tool that we’ve previously created. 

Slide 16

This tool was designed to be like a Hootsuite for Umbraco.  Editors can subscribe to Facebook, Twitter, YouTube and Rss feeds and then generate content stories from material found on Social.  Pulling in the content and enabling the editors to curate and edit their feed.

Slide 17

Jamie’s initial stab at designing a Content App version of the tool was a little challenging for me to understand…. So we had a chat and realised that I wasn’t explaining the workflow I knew the Editors at our client were familiar with.

Slide 18

Iteration two looked like it hit the nail on the head.  Nice user journey, mimicking the behaviour of Hootsuite and the Previous Social tool, but in Content App form.

However, once Jamie came to prototype, he quickly realised that the workflow didn’t work, and also he found that the Angular context made it pretty difficult to achieve what we wanted to do.  We agreed the hack was a bad idea because it smelt like we were doing something that the content apps weren't intended to do, at that point we parked the idea until Content Apps matured and we could see if this was going to be a good idea.

Slide 19 to 22 - Visual prototypes

Just as an aside on the design journey Jamie and I spoke to Mike Taylor who a couple of weeks ago shared a snippet of video of a back office design kit that he’s been  building in Sketch and abstract.

Slide 23 - 24 - Jamie’s Prototype 2 Form Buddy

Slide 25

A last minute addition that Jamie was a Provider model that enables you to integrate Forms like content into Form Buddy e.g. lead info captured into Salesforce.

Slide 26

Niels said “Right now there’s a lot of evening experiments, but when Umbraco 8 is used in larger projects, there’ll be light bulb moments where the idea of Content Apps clicks and match a business need of an editor / digital marketeer, etc.”

Regarding the work that the community can do to meaningfully support the design and development of Content Apps, Nathan said much the same that Niels did:

“It’s probably going to take a little while for enough sites to get up on 8, and for editors/developers to then get a better understanding of what packages would make sense as apps, or what new problems or issues can be solved with apps.”

“Rather than developing new features in a lab, we’ll be monitoring how Content Apps are used over time. Perhaps we’ll need a permission model for Content Apps, perhaps they make sense in other places than Content and Media. Time will tell.”

Slide 27 - Now that you know what will you do

As I mentioned earlier this is really a call to action to start a conversation about how to design a great Editor Experience.  It’s really important to me that we make a success of V8. I get to meet so many business that have invested in Umbraco technology who are unhappy with their investment, and when you unpick that you find that it’s a poor editor experience that is the cause of that.  And frustratingly in many cases that’s easy to fix.

So I want to have as many conversations as possible about how to design a great editor experience.  Let’s collaborate with Editors to understand their problems. Let’s design great Content Apps, and make the lives of our editors a little better and a little simpler.

Slide 28 - THANK YOU 

Thanks go to Callum, Paul, Nathan, Mike, Lotte, Richard, Marc, Lee, Matt and Niels