design withrealcontent ux_campcph2015

GET REAL FAST

USING REAL CONTENT AS DESIGN ELEMENT

UX CAMP COPENHAGEN | APRIL 2015

Think! Digital 2

NANNA ENGBERG SENIORKONSULENT, THINK! DIGITAL

Think! Digital

ABOUT THINK! DIGITAL

3

Think! Digital is a Copenhagen based digital design agency that creates connected experiences, products and services.

Digital IS business.

CONTENT… THE EASY STUFF

Content is not cheap. But sometimes people treat it like it is something you get from a vending machine.Try to count HOW many hours are actually spent creating content (how fast can you plan, ideate and create real valuable content?). And the think about how much content is crappy and not really working for you. Many hours have been spent making that too (but not as many as the good content. Trust me). All that time could have been spent making the RIGHT, GREAT content, converting users and creating peace on earth.

Think! Digital

CONTENT CAME LATE

5

Why is that? Maybe because content came late into peoples attention. AND because eye candy, great design and transitions will seduce you so much more when you plan and decide the project compared to two lines of text.

Don’t forget the transitions, the candy or the great design. But give them something real to work with - make those 2 lines of text first.

Think! Digital

FOCUS ON DIGITAL CONTENT

6

Beginning of digital times Today

Focus hav been on getting content out there. Making it available.Now we focus upon making it stand out in the mass of content out there, and to try to get the message out.And design moves towards simple designs which focus on messages. Great.

Think! Digital

USERS COME FOR CONTENT

7

djsahasjhfajhfcwefuehfffshdfdhsfbahfcheafbwjhafbwjhafbwjafbjwqabdfjwbdjwabdfjwbfjkqefjdjsgheirghaæcmoækhlskjhlhktsr

hhkshnkshjnksjhtkhjktg

Buy

“ “

And it makes so much sense. users come for content, not design. Design aids the messaging and the brand, so we need to think those to as a pair.

Think! Digital

LOREM IPSUM MUST DIE

8

Lorem ipsum

• dolor sit amet • consectetur • adipiscing elit

Phasellus ut vestibulum nibh, a porta tellus. In sit amet ipsum eleifend, consectetur elit blandit, vehicula ipsum. Etiam mattis vulputate ipsum, eu aliquam tortor interdum ac. Aliquam erat volutpat.

Product title goes here

Product detailsProduct image

More product stuff

Make sure you have an actual message at hand, when you are designing :) Classic wireframe for product page and classic example of why lorem ipsum must die skal dø og at vi måske hellere skulle bruge krudtet på at finde ud af hvad det er vi gerne vil sælge (og hvad brugerne efterspørger) og så sikre os at vores art directors kan arbejde med det.

Think! Digital

IT DESTROYS THE MESSAGE

9

Diana-Maria brilliantring 65-77 mm

• EAN 566778899

Hvidguld.

How do titles actually look in product database?

Do data base contain any (relevant) details?

What level of description do we have?

language, search criteria and needs of the end user is only supported by the picture (and pictures are probably most important content online when it comes to creating needs, awareness etc - so that’s good. Text however, aids the user when decisions and conversions are made.

Not really relevant og good content for user nor Google. Title is taken directly from database, and text refers to 2 different product numbers. Description is directed at kids, but are they REALLY the target user of an ecommerce site?

Content and design has not been coupled. Which sucks, because this could have been great. Content performs badly in this coloured wireframe, the colours are intriguing, but this whole design would have been different had they had actual content (news articles, notifications, job posts, artist lookups).

User journeys are a great tool to define a lot of things in the design process, including whoch content and messages are relevant in which touch points, when and why.

Think! Digital

THE SIMPLEST GET REAL PROCESS

• Always start with • Who are the users and what do we want them to do? • Where in the user journey do they meet our service? • What are their needs, expectations and characteristics • What type of content and message will make them get on in their journey?

• Then ask yourself: • What level and type of content do we have at hand?

• e.g. product titles and descriptions for ecommerce • Text guidelines and articles for member sites • Video and infographics for media sites

• Does it match user needs or do we need something else - what? • (If so: Who will get it - and how?)

14

DESIGN WITH REAL CONTENT - FAST

Case: B2B newsletters - Q8 & Q8 Oils

Think! Digital

INSIGHTS AND PROFILING FIRST

16

Think! Digital

CONVERTED TO MESSAGES AND STRUCTURE

17

Think! Digital

EXAMPLE CONTENT

18

Kampagnebudskab Kom igennem høsten uden maskinproblemer

Hej Svend Snart bliver der travlhed ude i markerne. Få styr på din beholdning af smøreolie allerede nu, så maskinerne er klar. Ring døgnet rundt og bestil hos Kundeservice på 70128888. Du er også velkommen til at ringe til mig, hvis du har brug for nye smøreolier eller har andre spørgsmål.

God høst! [billede + 22334455/[email protected])

Vigtigste produkt (Salg) Bestil diesel og smøreolie Vi har nye motorolier til Stage/Tier 3 og 4 motorer med op til 500 timers skifteinterval: Q8 T 760 10W-40 - Syntetisk motorolie (SHPD) Q8 T 760 15W-40 – mineralsk baseret motorolie (SHPD)

Ring og bestil på 70128888

Branchenyhedsmodul Lavere afgift på smøreolier Regeringens finanslov for 2015 medfører omlægning af en række afgifter. Det betyder bl.a. at afgiften på smøreolier falder med 0,61 kr., dvs. fra 3,02 kr til 2, 406 kr. Pr. liter

Service Brug færre olier til dine maskiner Husk at vi gerne hjælper dig med at finde frem til præcis det sæt af olier, der passer til din maskinpark. Vi holder også øje med, om der kommer nye olier der passer bedre til dine maskiner.

Andre tilbud Pressol Fedtpresser I praktisk kuffert med 2 batterier og oplader kun 1050,- Få 60 fedtpatroner Ruysdal WR + 1 accufedtpresser, kun 2.800,-

Footer Ring og lad os få en snak om de olier, du skal bruge.

Think! Digital

DESIGN WITH ACTUAL CONTENTSEVERAL MODULES IN A FLEXIBLE TEMPLATE

TC | KC kunder Potentielle kunderDC kunder Oils kunder

Think! Digital 20

Q8 <[email protected]>Titel på nyhedsbrev20. Marts, 2015 kl.11:10

DC KUNDER FOKUS PÅ SERVICE OG SAMARBEJDE

DC#Distriktchefskunder

Større&kunder.I&kampanger&re1et&mod&disse&oplyses&ingen&priser&da&de&al7d&har&forhandlet&sig&7l&egne&priser.

Rela3on#3l#Q8Mange&af&de&store&kunder&er&på&fornavn&med&distrikschefen.&Han&er&deres&ansigt&på&Q8&og&giver&kunderne&en&tæ1ere&rela7on&7l&Q8.&Q8&ses&oBe&mere&som&en&samarbejdspartner&end&blot&leverandør.&Selvom&de&fortræksvis&handler&store&mængder&diesel&bør&den&service&de&modtager&i&forbindelse&med&eks.&at&finde&den&rig7ge&smøreolie&ikke&undervurderes.

Fokusområder:Reten7on• Hvordan&kan&Q8&gøre&mit&arbejde&le1ere• Informa7on&om&nye&services&og&produkter• Branche&relevante&informa7oner&der&

afspejler&Q8s&eksper7se&på&området• Q8&som&partner&mere&end&leverandør

Salg• Special&7lbud&/&Kampagne&7lbud&• Informa7on&om&online&salg• Klar#CTA#med#telefon#nr.#3l#distrikschef#

kundeservice

Svend&MogensenLandmand,&Vojens

“Jeg%sæ(er%stor%pris%på%Q8’s%service.%Fak8sk%plejede%jeg%at%handle%hos%Shell%fordi%det%virkede%besværligt%at%bes8lle%hos%Q8.%Så%hjalp%Q8%mig%med%at%finde%få%olier%der%passer%8l%alle%mine%maskiner,%nu%handler%jeg%alt%hos%Q8..”

Dis7later&Q8&købekortSmøreolierFyringsolieAndet

350.000&l/årT

2T400&l/årmeget&lidt

Produkter Forbrug

Eksempel#på#en#distriktchefskunde

Think! Digital 21









kundeservice




350.000&l/årT


Produkter Forbrug


Think! Digital 22









kundeservice




350.000&l/årT


Produkter Forbrug


Think! Digital 23









kundeservice




350.000&l/årT


Produkter Forbrug


Think! Digital

UX CAMP APPDesign an app that lets you see all presentations (and updates) from UX Camp CPH

1. Form group 3-4 people 2. Grab foil piece, post-its & a marker 3. Describe user needs (yours) (5 mins) 4. Define main content & structure on foil (10 mins) 5. Detail content and design on foil (10 min) 6. Present group suggestion in plenum

design withrealcontent ux_campcph2015

Internet

digital content

real content

great content

important content

mass of content

digital focus

digital users

digital lorem ipsum