Bye Bye, Page Design

Prepare to COPE
(Create Once, Publish Everywhere)
Mette Schou Andersen
@mettecharita

Liv Madsen
@li...
Unleash the power of

Hi-Fi Klubben
product range
+editorial
+continued dialogue
© Creuna
7 out of 10

multi-device users

© Creuna

expect the same
quality of content
experience
across all their
digital devices
...
Users expect content parity

one web
To cater for the
cross platform consumer

we’re bringing
content back
© Creuna

Original image: http://www.flickr.com/phot...
”content precedes design.
design in the absence of
content is not design,
it's decoration.”

- Jeffrey Zeldman
Tone of voice
& content design
“How may I help you” vs. “What can I sell you?”

© Creuna
Key Drivers

relevance
+choice
+exploration
+empowerment
© Creuna
mapping
page conversations
Add value, keep customer in the loop

© Creuna
Constructed narrative to aid research

High-level

product presentation
highlights
Hi-fi klubben review
User reviews
Edito...
product presentation

highlights

© Creuna

Hi-fi klubben review
chunk

noun | piece, block, mass, portion, lump,
slab, hunk, nugget, wad, dollop (informal),
wodge (Brit. informal) Cut th...
Content not tied down to pages

le
ab
us
re

Structured
© Creuna

Semantic

Flexible
Multiple content repositories

Product db

products
+ supporting content

Customer club db
user reviews

EPiSERVER
editori...
digital hook
+empowerment
+continued dialogue
© Creuna
Base for continued dialogue

explore

dig deeper/decide

purchase

in store

at home

wherever

sale registered to store
©...
continued dialogue
across channels

© Creuna
Bye bye,
page design
Design content, not pages
don’t
manage content
like it’s 1999
© Creuna

Original image: http://www.flickr.com/photos/28567825@N03/3496269460

Origin...
WYSIWYG

WYSIPAL

What You See Is Probably a Lie

© Creuna

#WYSIPAL – yeah, we coined that. You’re welcome. – @livmadsen
structure & metadata
Tag it!
Help editors focus on

how it reads
– not how it looks
© Creuna
… help editors be
awesome at content

I am
editorrr
© Creuna
http://www.flickr.com/photos/andymangold/4335794366
“Get your content ready to go anywhere
because it’s going to go everywhere.”
- Brad Frost
Release the power
of structured
content

device zen
© Creuna
Release the power
of structured
content

channel zen
© Creuna
Next steps towards COPE

expand content to
personalized narratives
+mail/dialog flows
+unboxing experiences
etc.
© Creuna
Start small,
show value
Start small, show value

average basket size 88%
+conversion on mobile devices 92%
+average time spent on page 76%

© Creu...
Talking ‘bout
a revolution
Original image: http://www.flickr.com/photos/hansthijs/4567959944
Thanks :)
Liv Madsen Senior Frontend Developer
Mette Schou Andersen UX & Content Strategy Lead

@livmadsen

@mettecharita
...
Upcoming SlideShare
Loading in …5
×

Bye bye pagedesign epi_server

1,746 views

Published on

Case: Hi-Fi Klubben.
An introduction to the content and development strategy behind Hi-Fi Klubben's new responsive commerce site, mainly focused on how we have worked with content as the primary driver in our design and development processes

The presentation was presented at EPiServer Update 2013 by my colleague Liv Madsen and me.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,746
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Bye bye pagedesign epi_server

  1. 1. Bye Bye, Page Design Prepare to COPE (Create Once, Publish Everywhere) Mette Schou Andersen @mettecharita Liv Madsen @livmadsen
  2. 2. Unleash the power of Hi-Fi Klubben
  3. 3. product range +editorial +continued dialogue © Creuna
  4. 4. 7 out of 10 multi-device users © Creuna expect the same quality of content experience across all their digital devices source http://www.vibrantmedia.co.uk/
  5. 5. Users expect content parity one web
  6. 6. To cater for the cross platform consumer we’re bringing content back © Creuna Original image: http://www.flickr.com/photos/94261979@N00/4434288853
  7. 7. ”content precedes design. design in the absence of content is not design, it's decoration.” - Jeffrey Zeldman
  8. 8. Tone of voice & content design “How may I help you” vs. “What can I sell you?” © Creuna
  9. 9. Key Drivers relevance +choice +exploration +empowerment © Creuna
  10. 10. mapping page conversations Add value, keep customer in the loop © Creuna
  11. 11. Constructed narrative to aid research High-level product presentation highlights Hi-fi klubben review User reviews Editorial on features demo Brand overview In-depth © Creuna Technical specs complementing products accessories
  12. 12. product presentation highlights © Creuna Hi-fi klubben review
  13. 13. chunk noun | piece, block, mass, portion, lump, slab, hunk, nugget, wad, dollop (informal), wodge (Brit. informal) Cut the melon into chunks. © Creuna Collins Thesaurus of the English Language – Complete and Unabridged 2nd Edition. 2002 © HarperCollins Publishers 1995, 2002 Image: http://www.flickr.com/photos/62116165@N00/4028464605
  14. 14. Content not tied down to pages le ab us re Structured © Creuna Semantic Flexible
  15. 15. Multiple content repositories Product db products + supporting content Customer club db user reviews EPiSERVER editorial content chunks Meta data ? © Creuna web channel ?
  16. 16. digital hook +empowerment +continued dialogue © Creuna
  17. 17. Base for continued dialogue explore dig deeper/decide purchase in store at home wherever sale registered to store © Creuna
  18. 18. continued dialogue across channels © Creuna
  19. 19. Bye bye, page design
  20. 20. Design content, not pages
  21. 21. don’t manage content like it’s 1999 © Creuna Original image: http://www.flickr.com/photos/28567825@N03/3496269460 Original catchphrase by the brilliant Karen McGrane
  22. 22. WYSIWYG WYSIPAL What You See Is Probably a Lie © Creuna #WYSIPAL – yeah, we coined that. You’re welcome. – @livmadsen
  23. 23. structure & metadata Tag it!
  24. 24. Help editors focus on how it reads – not how it looks © Creuna
  25. 25. … help editors be awesome at content I am editorrr © Creuna
  26. 26. http://www.flickr.com/photos/andymangold/4335794366
  27. 27. “Get your content ready to go anywhere because it’s going to go everywhere.” - Brad Frost
  28. 28. Release the power of structured content device zen © Creuna
  29. 29. Release the power of structured content channel zen © Creuna
  30. 30. Next steps towards COPE expand content to personalized narratives +mail/dialog flows +unboxing experiences etc. © Creuna
  31. 31. Start small, show value
  32. 32. Start small, show value average basket size 88% +conversion on mobile devices 92% +average time spent on page 76% © Creuna As measured during 50 days before and a"er launch
  33. 33. Talking ‘bout a revolution Original image: http://www.flickr.com/photos/hansthijs/4567959944
  34. 34. Thanks :) Liv Madsen Senior Frontend Developer Mette Schou Andersen UX & Content Strategy Lead @livmadsen @mettecharita @creuna_dk

×