Designing Content-first

Clearle!

I’m a user experience designer at Clearleft. This is us in our home at 68 Middle St. We design websites, things that live on the internet and run a number of conferences and talk series around the subject.

We work on a broad spectrum of projects, but some of note in recent years include The Week, Evo Magazine, Matter, and Brighton Hove Council.

MOBILE FIRST

Layering web technologies so that the content is always accessible, regardless of access method, connectivity, software, or hardware being used.

Progressive Enhancement

PROGRESSIVE ENHANCEMENT This matches our stance on designing for the web, which is to design experiences that progressively enhance the user interface to ensure that regardless of how you get there, the content is accessible.

This isn’t anything new, but it is surprising the number of people who don’t do it.

Projects fail before they start

HOW WE SELL IT The sales process for these projects, and the development process of yesterday no longer work. In truth, they have never worked, but we didn’t understand.

If you have worked on the web for more than a few years you will be more than familiar with this.

WHY IS IT BAD? BECAUSE IT IS DESIGN FOCUSSED

We get stuck focussing on visual design until it ‘looks pixel perfect’ then we hope that the copy fairies will wave their wand and BAM site done.

But that doesn’t happen. Instead we end up with a longer project with somebody, or a group of people spending 6 months, writing content for every page that was listed in the sitemap and then copy and paste from Word into the CMS.

RFP

Pitch Deck (about us)

Photoshop Comps of homepage

Win project

Slowly unravels and we pray for the end

Radically different design

Unhappy customer

Bad Experience

WHY IS IT BAD? BECAUSE IT IS DESIGN FOCUSSED

We get stuck focussing on visual design until it ‘looks pixel perfect’ then we hope that the copy fairies will wave their wand and BAM site done.

But that doesn’t happen. Instead we end up with a longer project with somebody, or a group of people spending 6 months, writing content for every page that was listed in the sitemap and then copy and paste from Word into the CMS.

Don’t make decisions on this alone

DESIGN COMPS FROM PITCH BAAAAAD

This is the first nail in the coffin of that project.

It means that everything after that point will be based on one design iteration that was produced if you’re lucky with existing content but most likely it’s made of Unicorn blood and Pixie Dust - very little real substance, and without any hesitation I’ll say that it will be the site homepage. Site homepages are magazine covers, they’re the most useless part of 90% of the sites out there and yet so much emphasis is put on them.

AND THIS IS WHAT HAPPENS

We treat content as the thing you pour into a big bucket at the end of the project.

This doesn’t work.

User Experience Design

WTF IS UX?

When I say design, I don’t just mean graphics. All the elements behind the scenes need to be designed too.

Web Design =

HTML, CSS (javascript..maybe)

Design on the web is code so our final objective is to make that design in the medium it is intended for.

We do not provide our clients with Photoshop files, in fact this year we’ve stopped using Photoshop entirely, and although we will mock-up page designs, they are not a deliverable, nor are they intended to be anything other than reference because whatever is in the visual is subject to change.

How will it look on the off chance somebody visits it from their TV? their in-car nav system? their watch?

We need to work together

Content is at the forefront of design.

We don’t have a specialist on-staff such as a content strategist, or copy-writers, but we do touch on these areas, just not as deep, and we may not consider the long-term curation of that content.

This is where we need your guidance, and help. What I hope, is that today I can show you ways in which we can help you that you may not have thought of.

I’m going to show you how I start my projects, I would love to hear from anyone who has ideas on how we can work together to create great experiences in this way.

Not Just Visual DesignDesign is about effective communication.

But to communicate effectively you need a system of transmission. This is what I’m providing.

I want to look at all these different bits of information, and different ways of getting that information out and design the system that will let you do that.

My goal on any project is to both understand how the engine works and then design the car it will run in.

Why why why why why why why why why why why

I am forever asking questions.

Why is this information important? Is it important to your business, or the people you want to serve? Why should I read it? What else can I do with it?

This question, what else can I do with it? Is what ultimately sparks the creative process of designing with content. It is the starting point for exploration and innovative ways of utilising this information.

Put things into context

The other thing I want to know is the context around the person looking at the content.

The context of where a person is when needing your content is what gives you the leverage to delighting them by making content that works for them.

We run exercises like creating user journeys where we will map out the day in the life of a persona to understand who and where they are and how our service can help them.

Stakeholder interview findings

We start our projects with interviews with the project stakeholders, this is if you like the first progressive enhancement of the project.

We’re going to take what was written in the brief and enhance it with information that wasn’t there. We are reliant on these project groups to be made of the people who are relevant in their role, but there are always some failure points in this.

Project teams are often made up of representatives from the single team that ‘manages’ the site, it is not a cross section of the entire business.

When arranging the interviews, we will always ask to talk to somebody from customer service for example, or anyone else who is directly involved with the customer. These are some of the greatest content creators in your organisation.

Why do people call? What are they given when they do? What do the people in these support teams need to make their time at work better?

Frequently Asked Questions =

Your site content.

What we find a lot is that people in these kinds of role have amassed lots of documents they’ve created to answer FAQs and they’re theirs and theirs alone.

Sometimes they’re shared but there’s a chance that each member has their own version of the same information. That’s not ideal for anyone. How can we take this content and get it out there.

User Centred Design =

All Users

COMMON THEMES - HOW DO WE PRESENT THE CONTENT?

We are looking for common themes and to understand what the business needs are, what the individuals teams needs are and those individuals we speak to.

This gives us our direction. How do we present this content so that it meets everyone’s needs?

Over the past year we have been working with the digital services team at Royal Borough of Kensington and Chelsea where we have been developing a beta for their planning department.

In just this one department we discovered over 100 PDFs that had been created by support staff covering everything that gets asked routinely about planning services for the area.

The subject matter was broad, but the content being provided was immensely useful.

In this instance, this content was published on the website, however being in PDF format it wasn’t as useful to most as it could be.

None of the great content contained within them was indexable, so then it can’t be searched, it also meant that we have pages which serve just as link farms for documents with real content in them.

It may sound obvious, but you would be incredibly surprised by the number of organisations who don’t think to just turn this documents into html pages.

It may sound obvious, but you would be incredibly surprised by the number of organisations who don’t think to just turn this documents into html pages.

Information Architecture Bottom-up

With the information from the interviews, we being some traditional information architecture exercises, content audits, review of existing structure at the site level and at a content level.

This is perhaps where my personal approach begins to differ from the norm.

I find the key page type, the one which you want to get people to, or has the most value to to the viewer, and start from here building outward.

I don’t create sitemaps, I find they’re a dated diagram that is not representative of how a website is constructed, or how they are used.

What happens if you create a sitemap with no content? - It’s a traaaaaap!

If you were to create this structure first, you would be leading yourself into the same mistake as if you had started with that PSD comp - painting yourself into a framework that will never scale and that limits what the content can do within it’s pre-defined confines.

I don’t create sitemaps, I find they’re a dated diagram that is not representative of how a website is constructed, or how they are used.

What happens if you create a sitemap with no content? - It’s a traaaaaap!

If you were to create this structure first, you would be leading yourself into the same mistake as if you had started with that PSD comp - painting yourself into a framework that will never scale and that limits what the content can do within it’s pre-defined confines.

I don’t create sitemaps, I find they’re a dated diagram that is not representative of how a website is constructed, or how they are used.

What happens if you create a sitemap with no content? - It’s a traaaaaap!

If you were to create this structure first, you would be leading yourself into the same mistake as if you had started with that PSD comp - painting yourself into a framework that will never scale and that limits what the content can do within it’s pre-defined confines.

I start off by taking this page type and developing an Exemplar. This uses a simple list of elements that make up that page. These elements are then moved around to create a priority order of the information that is there. Using either an existing page that has great content on it, or a hybrid of content from different locations I start to add in content that represents these elements.

Now I can take a look at the information that is there and consider what else this content is tell me. What’s the meta data which I can use here in other ways?

Are there attributes that I can leverage in interesting ways based on their context? For example, I can take any contact details and with minimal code tag it so that it will automatically create a new contact in your address book, or enable tap to dial the number being displayed.

Now I have not just a completed page, and attributes within it which can help me bring related content in and show me entrance paths, exit paths, additional content that may be of value, such as the pronunciation for the name shown here.

We would never have uncovered these routes had we created a traditional sitemap first and then worked from the top-down to the content level.

This is also our first opportunity to progressively enhance our content visually. by adding typographic styling to our content it instantly comes to life. It begins to have a personality and character.

We can set the weight, size and format to enhance our content hierarchy and to make it flow even better than when it is just set arbitrarily.

But that isn’t what really excites me! We have here, a completed responsive web page! Content-first now becomes develop for mobile-first and all we have done is minor enhancements to the display of the content.

But that isn’t what really excites me! We have here, a completed responsive web page! Content-first now becomes develop for mobile-first and all we have done is minor enhancements to the display of the content.

Information Architecture Bubbling Up

Now that I have this page it needs a home. My approach to IA is to have an item - and then work out where it can live.

There are some pieces of content which very much have 1 home, but the way in which we develop services now means that content is domain independent, or transient.

Hub and spoke: richard rutter

Going back to Kensington and Chelsea, our content is in fact not associated with any one location. It is self sufficient and can be shared across any number of categories, sub-categories, as these are just methods for cataloguing content into specific areas in order to manage them or to browse a domains content. Is this how we still find information on the web? I argue that it is not.

As we move further into a world where even our accessories can connect to the internet and have the potential to provide us with access to content, we need to really consider whether there is any relevance to the librarian cataloguing methodologies we use currently when it comes to displaying content.

Consideration needs to be given to how we store this content, and how we can extrapolate specific elements based on the relevancy to the context in which somebody is trying to access it.

It may not be that we want the entire page’s contents, but just one of its attributes, if I am looking up a taxi company on my phone whilst I am stood in the rain in the middle of the night, what do you think I am after? the history of the firm, or how great their cars are, or for the number to ring so I can get picked up?

Destiny

I’m going to finish up on an example of bad web design. This is a peculiar example which is at the top of my shit list right now as I am heavily invested in this, but if there was ever an exemplar for how to have an immense volume of content and then send to the web wrong this Bungie have hit the motherload with the release of their triple A title Destiny.

Here we have the website for Destiny, a game which is incredibly dense with content, not just in terms of the user interface, the story arcs, or the environments but its back-story which you barely graze as you work through the story.

I wanted to find out more about the game, I wanted to learn more about how it worked, and also to absorb myself into the folklore and mythos that the writers and developers spent 10 years creating.

Problem was, there’s bugger all there. There’s some videos of gameplay footage, information about how to buy it, what it’s on, but even the section titled GAME, has very little content.

Then I noticed the App link. OK, so I’ll download the app.

Here we have the website for Destiny, a game which is incredibly dense with content, not just in terms of the user interface, the story arcs, or the environments but its back-story which you barely graze as you work through the story.

I wanted to find out more about the game, I wanted to learn more about how it worked, and also to absorb myself into the folklore and mythos that the writers and developers spent 10 years creating.

Problem was, there’s bugger all there. There’s some videos of gameplay footage, information about how to buy it, what it’s on, but even the section titled GAME, has very little content.

Then I noticed the App link. OK, so I’ll download the app.

This app is so ridiculous. After a brief time with it I realised that it is a website, that has been bundled into a wrapper so that it can be measured by some marketing and sales team somewhere as some half baked metric for success, or to have yet another channel for ‘reaching’ their audience that they will use for evil.

On first glance, I saw the things I expected to see on the site. News from the dev team, opened the menu and yes, there’s a content structure here that says to me standard website. But hidden away there was a ‘sign in link’. So I registered using my Xbox account and suddenly the content changed!

Now I have access to real content it would seem! There’s a map, something called Grimoire, which I recognised because it kept flashing up on my screen during play, but I couldn’t find it referenced anywhere - I’ll come back to that, and something called Legend.

Let’s take a look through these pages.

Now I have access to real content it would seem! There’s a map, something called Grimoire, which I recognised because it kept flashing up on my screen during play, but I couldn’t find it referenced anywhere - I’ll come back to that, and something called Legend.

Let’s take a look through these pages.

OK, this looks interesting. Let’s take a look at the Guardian section which is the character you play.

Interesting, there’s some more sub-categories here, OK, let’s take a look at what is in classes.

Hang on? Didn’t I look at Guardians already?

OK, well let’s take a look again. AH CONTENTTTTT!

OK, this looks interesting. Let’s take a look at the Guardian section which is the character you play.

Interesting, there’s some more sub-categories here, OK, let’s take a look at what is in classes.

Hang on? Didn’t I look at Guardians already?

OK, well let’s take a look again. AH CONTENTTTTT!

OK, this looks interesting. Let’s take a look at the Guardian section which is the character you play.

Interesting, there’s some more sub-categories here, OK, let’s take a look at what is in classes.

Hang on? Didn’t I look at Guardians already?

OK, well let’s take a look again. AH CONTENTTTTT!

OK, this looks interesting. Let’s take a look at the Guardian section which is the character you play.

Interesting, there’s some more sub-categories here, OK, let’s take a look at what is in classes.

Hang on? Didn’t I look at Guardians already?

OK, well let’s take a look again. AH CONTENTTTTT!

It’s not just this that makes bad experiences

So here we have a prime example of design being created independently from content.

All this content is what I wanted access to, and there is no logical reason why anyone shouldn’t be able to access this information right? But here it is, not only locked away inside a mobile native app, but locked inside an app locked behind an account firewall!

It’s in a Database

During the Alpha and Beta releases of the game there was a site that existed to host this content, but it was taken down the week before launch.

What infuriates me more about this, is that this content is sat in a database somewhere being requested across the internet by your phone in order to be displayed inside the damn thing! And what’s worse, is that it doesn’t work offline! In fact, if you were to go back to the previous section, and then go down to the same page you just looked at, it would request the page content again!

It’s not even in the game - the main context of where I would want it.

It gets worse, as I mentioned, this content, which is the story behind the characters within the game is inaccessible from within the game.

And I have scoured, scoured the interface looking for some kind of hidden link but there is nothing, I cannot find out any of this information without using this app.

We are no longer looking at just another website

We need to think about how we can design for content-first because this content no longer lives in just another web cms.

It can be used anywhere.

TV Guide - Virgin Media Website Guardian App 4OD

Layering web technologies so that the content is always accessible, regardless of access method, connectivity, software, or hardware being used.

Layering web technologies so that the content is always accessible, regardless of access method, connectivity, software, or hardware being used.

Great experience, and great design are not about whether our websites look good, but whether our content is stored and structured in such a way that it can be accessible, regardless of the way in which is requested, and regardless of the software or hardware being used.

Layering web technologies so that the content is always accessible, regardless of access method, connectivity, software, or hardware being used.

Layering web technologies so that the content is always accessible, regardless of access method, connectivity, software, or hardware being used.

Great experience, and great design are not about whether our websites look good, but whether our content is stored and structured in such a way that it can be accessible, regardless of the way in which is requested, and regardless of the software or hardware being used.

Come play XboxOne: AvangelistXMB Twitter: theavangelist clearleft.com