Kelly Truong - @kelliPhoReal

Lisa McWilliams - @lisamc404

REDESIGNING IN CASCADE SERVER

#CSUC14

Planning Implementation

Two Phases of Redesign

#CSUC14 #CSUC14

Take advantage of latest technologies

Unclutter your site Rebrand

Benefits of Redesign

#CSUC14 #CSUC14

Responsive Design

• Mobile Friendly

• Cross-browser Compatibility HTML/CSS Advances Social Media

Take Advantage of the Latest Technologies

#CSUC14 #CSUC14

• Evaluate your site’s purpose

• Audit content Remove the Irrelevant Focus on the relevant

• Set a clear path Navigation Links

Unclutter Your Site

#CSUC14 #CSUC14

• Express change

• Stand out

• Stimulate growth

Rebranding

#CSUC14 #CSUC14

Old Site:

Which is more appealing?

#CSUC14 #CSUC14

New Site:

Which is more appealing?

#CSUC14 #CSUC14

Old Site:

Which is more appealing?

#CSUC14 #CSUC14

New Site:

Which is more appealing?

#CSUC14 #CSUC14

First

impressions

DO

matter!

Benefits of Redesign

#CSUC14 #CSUC14

94% of people say that design is a reason why they do not trust a website. Improve trust:

• Avoid stock photos

• Avoid pre-made templates

• Showcase social media & followers

• Include media coverage links

Design Statistics

#CSUC14 #CSUC14

Most users: Read in an

F-shaped pattern

Design Statistics

#CSUC14 #CSUC14

Most users: Read only the first two paragraphs Only scans the first few words of

subtitles, bulleted lists, and paragraphs

70% of users would look at lists with bullets vs. 55% for lists without

Design Statistics

#CSUC14 #CSUC14

Color schemes impact growth rates! Dark (2%) vs. Light (1.3%) Green: 3% traffic growth Red: (-1.35%) traffic growth

Design Statistics

#CSUC14 #CSUC14

Phase 1: Planning

#CSUC14 #CSUC14

Evaluate and Audit

① What is your site’s purpose?

② Does your content reflect this purpose?

③ How easily can your content be accessed?

Phase 1: Planning

#CSUC14 #CSUC14

Involve your content editors

• Their insight is crucial!

Phase 1: Planning

#CSUC14 #CSUC14

h

Think about what you want.

#CSUC14 #CSUC14

A Warning:

#CSUC14 #CSUC14

Designs that don’t accommodate CMS

• Class names on body tag

• Beware of old and new JS interactions

• Non-fluid widths

• Too many unique layoutsKISS

Examples of Design Gone Wrong

#CSUC14 #CSUC14

Time to put in work!

#CSUC14 #CSUC14

Add a new output Decide if you need new fields

• You can hide them Update current formats and static

blocks or create new ones

• You might be surprised how little you have to change

Phase 2: Implementation

#CSUC14 #CSUC14

Create a new destination to test the design

Freeze content Publish new output to live site Voila! The site is redesigned!

• Continue to monitor for oversights

Phase 2: Implementation

#CSUC14 #CSUC14

Voila! - Implementation Magic

The design process is a good time to consider reducing the number of templates/content types you are currently using.

Check for broken links

Other considerations

#CSUC14 #CSUC14

Publishing from templates – you need to consider all content types currently using that template during the redesign process.

Other considerations

#CSUC14 #CSUC14

Questions?

#CSUC14 #CSUC14

“How to Successfully Redesign Your Website” – Haris Bacic, Forbes Magazine http://www.forbes.com/sites/allbusiness/2013/08/19/how-to-successfully-redesign-your-website/

“The Ultimate 9-Step Website Redesign Checklist” – Shannon Callarman, Cubicle Ninjas http://cubicleninjas.com/9-step-website-redesign-checklist/

“F or Z Pattern in Web Design?” – Blake Imeson, LimeCuda http://limecuda.com/f-or-z-pattern-in-web-design/

“Why Good Website Design is So Important: The Stats and Figures to Prove It” – Calvin Sellers, InstantShifthttp://www.instantshift.com/2013/09/02/importance-of-effective-website-design-infographic/

Resources

#CSUC14 #CSUC14