Cards for discovery

1. Cards for discovery Emily Heath Sr UXA, BBC ! ! World IA Day 2015, Bristol
2. Hello #WIADBristol! ! World IA Day 2015
3. I’m! Emily Heath! ! @gradualist
4. Senior User Experience Architect
5. Unpacking cards
6. Cards, Sorted
7. Cards for discovery
8. A card is a piece of portable, snackable micro-content presented in a consistent and recognisable format.
9. Like what?
10. A presentation format
11. Easy to scan
12. Tactile and recognisable
13. Easy to ﬂip through
14. Can be saved or shared
15. The Card as a platform
16. The mash up of many things Card Sources
17. News Sport TV & iPlayer Children’s Knowledge & Learning Homepage Search App Cards footer Radio & Music
18. Cards footer News Sport TV & iPlayer Children’s Knowledge & Learning Radio & Music 2,000 Homepage Search App 2,000
19. Homepage Search App Cards footer News Sport TV & iPlayer Children’s Knowledge & Learning Radio & Music Trafﬁc
20. News Sport TV & iPlayer Children’s Knowledge & Learning Radio & Music Trafﬁc Trafﬁc Homepage Search App
21. Replacing ladders with ropes Image: Cornell Library Kaleidescope newsletterImage CC: Ed Costello
22. Products are very connected within themselves, but not to each other Marketing and Audiences
23. 1997
24. Cards for discovery
25. • Familiar • Portable • Snackable It’s a Mona Lisa lunchbox! Hakonart’s lunchbox design available on zazzle.co.uk. Other lunch boxes and designs are available
26. Familiarity
27. Who’s the prettiest?
28. Beauty-is-averageness
29. Cognitive ﬂuency Try it for yourself on http://facelab.org/
30. Portability
31. Image CC: Blake.Thornberry
32. Image CC: Peter Mooney
33. Image CC: Antti Leppänen
34. Image CC: David Gingrich
35. Snackability Image CC: Arjan Richter
36. • Global Experience Language (Card pattern) • Systems audit • Data structure • Consistency in code format • Content strategy / work with editorial Familiar - Portable - Snackable
37. Find out more Manchester United need two further transfer windows of heavy spending to contend for the title. Phil Neville 5 min agoFOOTBALL Listen now 3 Live Cricket Lancashire v Middlesex Venue: Old Trafford 23-26 September, 10:25 BST
38. Title/headline 5 min Available until 6th August iPlayer Snackable content Signposting of what kind of thing it is 13:56 - Mistake by Woods as he putts wide. He can get a bogie at best… 16:9 4:59 One destination Short description or latest update Share and save
39. Initial proposal for the MVC (minimal viable card)
40. A card is a piece of portable, snackable micro-content presented in a consistent and recognisable format.
41. Thanks! ! Emily Heath @gradualist ! For a copy of my slides, see lanyrd.com next week ! ! This presentation was sponsored by Magic MoveTM every UXA Wizard’s favourite Keynote transition.

Editor's Notes

Simple pun-free title: Cards for discovery. This is what I’m talking about today.
Hello! I’m Emily Heath, and I’m a wizard! Not really, but I am…
I work at Mediacity in Salford. These are our thought bubbles. We do a lot of thinking at the BBC. I’ve been thinking a lot about cards, and had a lot of time to think up ‘punny’ titles.
One pun-y title I decided not to use.
Another pun-y title I decided not to use, though wouldn’t it be appropriate for this audience of information architects (we love card sorting)?
Simple pun-free title: Cards for discovery. This is what I’m talking about today. But what are cards? I’ll get to the discovery bit later…
Cards are all around the web. Why they’re useful for discovery. They looks like bit like a promo. But often have some preview content in it (like a video).
Boarding Pass in the iphone passbook. Google supermarket cards. Tinder app. Pinterest/bookmarks. Embeds in Twitter. Seer app (reads and finds actions in your emails). Hopefully the definition makes a bit more sense now.
Presentation format: uses the metaphor of the physical card. A business card or playing card or a trumps card. WHY this format?
Useful meta-data, consistent formatting. Tells you what the thing IS (type of thing, source/owner).
They’re familiar, they’re not so different from promos. And you can pick them up, quite literally with the example of the Trello board (a collaboration tool).
Tinder (dating) app let’s you thumb swipe through profiles of people.
Saving or sharing functionality show prominently on the card. Key/encouraged behaviour. (Airbnb and Pinterest)
Aren’t they just promos or souped-up listings? No, they’re more than that. Here’s why.
Google can surface wikipedia content and other sources, Twitter can surface details about an event posted on meetup.com on their platform.
They show you what you need, where you are. (quote from a blogpost?) Content in context.
Why do the BBC need cards? What do they help us do?
Core vertical products, then horizontal products to move people around. joining up all the incredible content using search, homepage, navigation. but what about horizontal journeys? App ideas, cards, cards footer.
ROUGH estimate: 2000 new pieces of content published a day: news/sport articles, news/sport videos, programmes, but also clips (multiple per programme)
App, homepage and search drive traffic to, and between, the vertical products. The purpose of our Content Discovery products is to drive traffic towards the rest of the BBC products.
Cards to send users on horizontal journeys between products. This a problem that everyone faces. We all want lateral journeys from other sites.
Allow our users to move horizontally across products. sure you are too. This is the IAs problem: how to let users move naturally and fluidly around their website, easily finding the things they need.
Pretty data visualisation time! BBC’s specific problem.
Petals represent internal links within products, but the few, faint grey lines are the journeys between products. We need more!
Users are familiar and comfortable within the sites they use.
Users are familiar and comfortable within the sites they use.
Users are familiar and comfortable within the sites they use. It’s red (for news), or it’s pink/dark grey
These related videos are well signposted, and we don&apos;t have a problem with audiences clicking around within their product because they&apos;re familiar with them (videos in news)
But we’re not linking a recent news story on the moon to a related programme (from 1960) currently available on the iPlayer.
What’s stopped us doing this better already? we’ve been online since 1997 / technical debt / multitude of content management systems / siloed product teams
So why are cards good for discovery? Could we take this effective design pattern and make it a SINGLE CURRENCY FOR CROSS-PRODUCT JOURNEYS? Make a content module appear on all our (red/yellow/pink) products and tie them together?
IMAGE: card wireframe, with a handle, and a bite taken out of it (animated)
FAMILIAR, PORTABLE, SNACKABLE
research on how our brains process information has concluded that the easier and more familiar something looks, the more likely we are to choose it. the path of least resistance. sounds obvious right? (of course we don&apos;t want to make long forms or difficult to read headlines)
But familiarity plays a part too. when researchers asked participants to choose the most appealing face in a collection of faces, they chose the face that was a composite of all the other faces.
Middle face is composite of other 4. But it isn&apos;t that we find average features attractive: it is because they are easy to process and things that are easy make us feel good, so we choose them.
Cognitive or processing fluency shows that we prefer things that are easy to think about. and in terms of journeys of discovery online, we will follow familiarity over the unknown. we want our users to be fluent in our language of discovery.
STOCKS which have easy to pronounce names do better than others. This research is fundamental to the principle of advertising, where a brand gains trust the more it is seen by the consumer.
Why twitter is so successful (and for their clients): same thing across multiple products / familiar format / trust / trust the content. BBC GOAL: our audience fluent in our language of discovery. make it look easy and they will follow
responsive/apps/indexes/footers. cards can go anywhere. they go with you (save them for later), they go without you (share to your social network)
Why? Efficiency. BBC values “delivering value for money”. Your clients want that too. Not cheap goods from China, but the efficiency in of the intermodal transport system.
&quot;Intermodal&quot; = container can be used across various modes of transport without unloading and reloading its contents.
designed to move materials and products efficiently and securely around the world. No need for reloading.
No need for reformatting. We need to be able to move content from one product to another (to another), between databases, across servers, on and off different page templates. To do this more efficiently, we need to standardise sizes.
Twitter, Storify, Soundcloud, Facebook
Segue from portability - what about repurposing (container used as a snack bar in Madrid station). We want our users to be able to consume the thing where they are, they’re likely on their way somewhere already, they don’t want to have to stop or go elsewhere along the way.
Have a quick taste and see if they like it first. Try before you buy. I don’t need to give you the psychology story here - people are inherently lazy, I mean time poor. Don’t show us a picture of a sandwich, give us a canapé.
Products are using Twitter for its inherently snackable format to give you a sample (in this case a delayed samp Don’t make me install an App just for a one time use. Let me try it now and see if I like it, then I’ll download it next time. AVAILABILITY 4 BBC
How do we go about making cards this way? Auditing all the data sources to find common elements. working with all our products to find common needs. don’t show us a picture of a sandwich, give us a canapé.
DRAFT! DRAFT! Gathering sketches from around the BBC - ideas for what kind of content they might want to put on a card.
Analyise all the different content types that could be put on a card and find the consistent components.
What are the common elements of a card? What is a MVC (minimal viable card) for the BBC?
There is a nice side effect to taking this approach to make things easier for our audience:
we make it easier for our developers and systems too, they are biased towards easy processing too, they like things to be presented in familiar formats, it saves time and we are measured by our efficiency.
Hopefully you now understand why I say that: A card is a piece of snackable, portable micro-content presented in a consistent and recognisable format.

Cards for discovery

You are reading a preview.

Check these out next

Cards for discovery

More Related Content

Recently uploaded (20)

Featured (20)

Cards for discovery

Editor's Notes