Bye bye pagedesign epi_server

Preview:

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.

Citation preview

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

Recommended