bye bye pagedesign epi_server
DESCRIPTION
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.TRANSCRIPT
Choose among many Layouts Right-click on slide and select Layout
Darker colours You’re basically free to use the different
saturations of the colours, but we still recommend these second to darkest ones
Our five basic colours Yellow, Blue, Red, Green and Grey
These are the colours we use for backgrounds
Change background colour 1. Click on slide
2. Choose Format Background 3. Select Fill and choose your colour
4. Click OK
Insert client logo 1. Select placeholder 2. Choose Insert from top menu 3. Choose Picture from file 4. Select client logo 5. Click OK
To view drawing guides 1. Right click on slide and select
’Grid and Guides...’ 2. Check ’Display drawing
guides on screen’ 3. Select OK
Bye Bye, Page Design
Mette Schou Andersen @mettecharita
© Creuna
Prepare to COPE (Create Once, Publish Everywhere)
Liv Madsen @livmadsen
Choose among many Layouts Right-click on slide and select Layout
Darker colours You’re basically free to use the different saturations
of the colours, but we still recommend these second to darkest ones
Our five basic colours Yellow, Blue, Red, Green and Grey
These are the colours we use for backgrounds
Change background colour 1. Click on slide
2. Choose Format Background 3. Select Fill and choose your colour
4. Click OK
Hi-Fi Klubben Unleash the power of
© Creuna
Choose among many Layouts Right-click on slide and select Layout
© Creuna
product range +editorial
+continued dialogue
Choose among many Layouts Right-click on slide and select Layout
© Creuna
7 out of 10 multi-device users
expect the same quality of content experience across all their digital devices
source http://www.vibrantmedia.co.uk/
Choose among many Layouts Right-click on slide and select Layout
Our five basic colours Yellow, Blue, Red, Green and Grey
These are the colours we use for backgrounds
Darker colours You’re basically free to use the different saturations of
the colours, but we still recommend these second to darkest ones
Change background colour 1. Click on slide
2. Choose Format Background 3. Select Fill and choose your colour and click OK
Users expect content parity
one web
Choose among many Layouts Right-click on slide and select Layout
© Creuna
we’re bringing content back
Original image: http://www.flickr.com/photos/94261979@N00/4434288853
To cater for the cross platform consumer
Choose among many Layouts Right-click on slide and select Layout
In some cases you may want background images 1. Click on Picture icon
2. Find image, select OK Size of image=1500x844 px
(2000x1126 px for even better quality)
Click Increase Indent button to get predefined ‘quote-name’ font
”content precedes design. design in the absence of content is not design, it's decoration.”
- Jeffrey Zeldman
Choose among many Layouts Right-click on slide and select Layout
© Creuna
Tone of voice & content design
“How may I help you” vs. “What can I sell you?”
Choose among many Layouts Right-click on slide and select Layout
Key Drivers
© Creuna
relevance +choice
+exploration +empowerment
Choose among many Layouts Right-click on slide and select Layout
© Creuna
mapping page conversations
Add value, keep customer in the loop
Choose among many Layouts Right-click on slide and select Layout
Constructed narrative to aid research
© Creuna
High-level
In-depth
product presentation
Hi-fi klubben review highlights
Technical specs
User reviews
demo Editorial on features
Brand overview
complementing products accessories
Choose among many Layouts Right-click on slide and select Layout
© Creuna
product presentation
Hi-fi klubben review
highlights
Choose among many Layouts Right-click on slide and select Layout
chunk noun | piece, block, mass, portion, lump, slab, hunk, nugget, wad, dollop (informal), wodge (Brit. informal) Cut the melon into chunks.
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
© Creuna
Choose among many Layouts Right-click on slide and select Layout
Our five basic colours Yellow, Blue, Red, Green and Grey
These are the colours we use for backgrounds
Darker colours You’re basically free to use the different saturations of
the colours, but we still recommend these second to darkest ones
Change background colour 1. Click on slide
2. Choose Format Background 3. Select Fill and choose your colour and click OK
Content not tied down to pages
© Creuna
reusable
Structured Semantic Flexible
Choose among many Layouts Right-click on slide and select Layout
Multiple content repositories
© Creuna
Customer club db user reviews
Product db products
+ supporting content
web channel
EPiSERVER editorial content
chunks
? ? Meta data
Choose among many Layouts Right-click on slide and select Layout
© Creuna
digital hook +empowerment
+continued dialogue
Choose among many Layouts Right-click on slide and select Layout
Base for continued dialogue
© Creuna
purchase dig deeper/decide explore
in store at home wherever
sale registered to store
Choose among many Layouts Right-click on slide and select Layout
© Creuna
continued dialogue across channels
Choose among many Layouts Right-click on slide and select Layout
Our five basic colours Yellow, Blue, Red, Green and Grey
These are the colours we use for backgrounds
Darker colours You’re basically free to use the different saturations of
the colours, but we still recommend these second to darkest ones
Change background colour 1. Click on slide
2. Choose Format Background 3. Select Fill and choose your colour and click OK Bye bye,
page design
Choose among many Layouts Right-click on slide and select Layout
Design content, not pages
Choose among many Layouts Right-click on slide and select Layout
© Creuna
don’t manage content
like it’s 1999
Original image: http://www.flickr.com/photos/28567825@N03/3496269460 Original catchphrase by the brilliant Karen McGrane
Choose among many Layouts Right-click on slide and select Layout
WYSIPAL
© Creuna
What You See Is Probably a Lie
WYSIWYG
#WYSIPAL – yeah, we coined that. You’re welcome. – @livmadsen
Choose among many Layouts Right-click on slide and select Layout
Tag it!
structure & metadata
Choose among many Layouts Right-click on slide and select Layout
To add pre-formatted bullet text please use the
Increase/Decrease Indent buttons found in the
Top-PowerPoint menu how it reads – not how it looks
Help editors focus on
© Creuna
Choose among many Layouts Right-click on slide and select Layout
In some cases you may want background images 1. Click on Picture icon
2. Find image, select OK Size of image=1500x844 px
(2000x1126 px for even better quality)
Click Increase Indent button to get predefined ‘quote-name’ font
I am editorrr
© Creuna
… help editors be awesome at content
Choose among many Layouts Right-click on slide and select Layout
http://www.flickr.com/photos/andymangold/4335794366
Choose among many Layouts Right-click on slide and select Layout
“Get your content ready to go anywhere because it’s going to go everywhere.”
- Brad Frost
Choose among many Layouts Right-click on slide and select Layout
In some cases you may want background images 1. Click on Picture icon
2. Find image, select OK Size of image=1500x844 px
(2000x1126 px for even better quality)
Click Increase Indent button to get predefined ‘quote-name’ font
device zen © Creuna
Release the power of structured
content
http://www.flickr.com/photos/lyza/7382235106
Choose among many Layouts Right-click on slide and select Layout
In some cases you may want background images 1. Click on Picture icon
2. Find image, select OK Size of image=1500x844 px
(2000x1126 px for even better quality)
Click Increase Indent button to get predefined ‘quote-name’ font
© Creuna
Release the power of structured
content
http://www.flickr.com/photos/lyza/7382235106
channel zen
Choose among many Layouts Right-click on slide and select Layout
To add pre-formatted bullet text please use the
Increase/Decrease Indent buttons found in the
Top-PowerPoint menu
expand content to personalized narratives
+mail/dialog flows +unboxing experiences
etc.
Next steps towards COPE
© Creuna
Choose among many Layouts Right-click on slide and select Layout
Insert image in background 1. Click on image placeholder
2. Choose Insert/Click Picture-button 3. Select image and click OK
Size of image=1500x844 px (2000x1126 px for even better quality)
Start small, show value
© Creuna
Choose among many Layouts Right-click on slide and select Layout
Start small, show value
© Creuna
average basket size 88%⬆
+conversion on mobile devices 92%⬆
+average time spent on page 76%⬆
As measured during 50 days before and a"er launch
Choose among many Layouts Right-click on slide and select Layout
Talking ‘bout a revolution
Original image: http://www.flickr.com/photos/hansthijs/4567959944
Choose among many Layouts Right-click on slide and select Layout
Change background colour 1. Click on slide
2. Choose Format Background 3. Select Fill and choose your colour and click OK
Make a new slide to add or change the icons by using graphics from www.iconmonstr.com
Our five basic colours Yellow, Blue, Red, Green and Grey
These are the colours we use for backgrounds
Darker colours You’re basically free to use the different saturations of
the colours, but we still recommend these second to darkest ones
Thanks :) Liv Madsen Senior Frontend Developer Mette Schou Andersen UX & Content Strategy Lead
@livmadsen @mettecharita
© Creuna
Make a new slide to add or change the icons by using graphics from www.iconmonstr.com
@creuna_dk