89
Iterative Web Redesign Nick DeNardis @nickdenardis #psuweb11

Iterative Website Redesign - Micro Goals in Action

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Iterative Website Redesign - Micro Goals in Action

Iterative Web RedesignNick DeNardis

@nickdenardis #psuweb11

Page 2: Iterative Website Redesign - Micro Goals in Action

Who am I?

Associate Director of Web CommunicationsWayne State Universityhttp://wayne.edu/

Host of EDU Checkuphttp://educheckup.com/

Writer for .eduGuruhttp://doteduguru.com/

Curator of EDU Snippitshttp://edusnippits.com/

Page 3: Iterative Website Redesign - Micro Goals in Action

Why am I here?To sympathize

Page 4: Iterative Website Redesign - Micro Goals in Action

Why are you here?Let’s make the Web a better place

Page 5: Iterative Website Redesign - Micro Goals in Action

Agenda

• Reality of a website

• Why redesigns fail

• A better alternative

• Examples

• Tools

• Your turn

Page 6: Iterative Website Redesign - Micro Goals in Action

Websites are not “projects”

completion dates don’t exist

Page 7: Iterative Website Redesign - Micro Goals in Action

Your website is a business

Page 8: Iterative Website Redesign - Micro Goals in Action

If you oversee one siteYou have no excuse

Page 9: Iterative Website Redesign - Micro Goals in Action

Web departmentsJust do your best

Page 10: Iterative Website Redesign - Micro Goals in Action

Your site is launchedNow what?

Page 11: Iterative Website Redesign - Micro Goals in Action

Wait 2 years, repeat.Forming the committee now...

Page 12: Iterative Website Redesign - Micro Goals in Action

Or.. Start making changes in 2 weeks?

While the committee is still busy announcing the launch

Page 13: Iterative Website Redesign - Micro Goals in Action

Micro Redesigns

Definition:Taking small deliberate steps to reach a larger goal

(which may be not 100% apparent at the time).

Page 14: Iterative Website Redesign - Micro Goals in Action

CraftsmanshipYour staff didn’t spend four years and $50,000 to do

Kinko’s work

Page 15: Iterative Website Redesign - Micro Goals in Action

Some Examples

Page 16: Iterative Website Redesign - Micro Goals in Action

Wayne State Stories

Goal:  Increase story click-throughs

Page 17: Iterative Website Redesign - Micro Goals in Action
Page 18: Iterative Website Redesign - Micro Goals in Action
Page 19: Iterative Website Redesign - Micro Goals in Action

A measly 0.009 %

of ~820,000 visitors per month

= less than 100 click-throughs

Page 20: Iterative Website Redesign - Micro Goals in Action

• Drop the drawer down then up

• Remove categories

• Remove branding images

Page 21: Iterative Website Redesign - Micro Goals in Action
Page 22: Iterative Website Redesign - Micro Goals in Action

• Pros

–Story displayed without the visitor clicking

–Auto rotate if visitor is on page too long

• Cons

–Takes up additional height

–Weird spacing in the menu

–Hard to find images that wide

Page 23: Iterative Website Redesign - Micro Goals in Action
Page 24: Iterative Website Redesign - Micro Goals in Action

• Pros

–Stories are front and center

–Only some additional height needed

–Easier to find images to fit

–Auto rotate if visitor is on page too long

• Cons

–Less space for story headlines

Page 25: Iterative Website Redesign - Micro Goals in Action

New CTR: 0.8 %

Now ~6,500 click-throughs per month

6400 % improvement

Page 26: Iterative Website Redesign - Micro Goals in Action
Page 27: Iterative Website Redesign - Micro Goals in Action

© 2011 Higher Ed Experts 22

Page 28: Iterative Website Redesign - Micro Goals in Action

© 2011 Higher Ed Experts 23

Page 29: Iterative Website Redesign - Micro Goals in Action

© 2011 Higher Ed Experts 24

Page 30: Iterative Website Redesign - Micro Goals in Action

© 2011 Higher Ed Experts 25

Page 31: Iterative Website Redesign - Micro Goals in Action

Let’s start the redesign process!

Page 32: Iterative Website Redesign - Micro Goals in Action

“When do we get to see what it looks like?”

Page 33: Iterative Website Redesign - Micro Goals in Action

“Let’s start looking at websites we like”

Page 34: Iterative Website Redesign - Micro Goals in Action

“The tabs are going to be at the top right?”

Page 35: Iterative Website Redesign - Micro Goals in Action

Business objectivesIn the web world

Page 36: Iterative Website Redesign - Micro Goals in Action

1. Offer something of value

Page 37: Iterative Website Redesign - Micro Goals in Action

2. Treat every visitors as your last

Page 38: Iterative Website Redesign - Micro Goals in Action

3. Your customer is always right

Your visitor on the other hand, isn’t.

Page 39: Iterative Website Redesign - Micro Goals in Action

Define the business objective of your site

Page 40: Iterative Website Redesign - Micro Goals in Action

To generate requests for more information

To encourage people to visit campus

To reflect positively on XYZ university and increase it’s reputation

The increase the profile of XYZ and it’s faculty, students and alumni

Page 41: Iterative Website Redesign - Micro Goals in Action

Start now.Go ahead, yell one out.

Page 42: Iterative Website Redesign - Micro Goals in Action

How are you measuring?

Go ahead, yell it out.

Page 43: Iterative Website Redesign - Micro Goals in Action

What did we learn?

Page 44: Iterative Website Redesign - Micro Goals in Action

Pick one objectiveand measure it

Page 45: Iterative Website Redesign - Micro Goals in Action

Start at the end

Page 46: Iterative Website Redesign - Micro Goals in Action

Privacy

• Privacy policy is a must

• Tracking via GA must be in it

• Tracking via cookies can be disabled

• Don’t know what third parties are doing

Page 47: Iterative Website Redesign - Micro Goals in Action

Tools of the trade• Google Analytics

http://google.com/analytics

• Google Website Optimizerhttp://www.google.com/websiteoptimizer

• Crazy Egghttp://crazyegg.com

• Click Talehttp://clicktale.com

• Wooprahttp://woopra.com

• Websorthttp://websort.net/

Page 48: Iterative Website Redesign - Micro Goals in Action

CrazyEgg

Page 49: Iterative Website Redesign - Micro Goals in Action

Woopra

Page 50: Iterative Website Redesign - Micro Goals in Action

Woopra

Page 51: Iterative Website Redesign - Micro Goals in Action

Websort

Page 52: Iterative Website Redesign - Micro Goals in Action

Google Analytics

Page 53: Iterative Website Redesign - Micro Goals in Action

Google Website Optimizer

Page 54: Iterative Website Redesign - Micro Goals in Action

Click Tale

Page 55: Iterative Website Redesign - Micro Goals in Action

Pick a timelineTwo weeks, One Month, One Semester, One Year

Page 56: Iterative Website Redesign - Micro Goals in Action

Take screenshotsWay back machine isn’t reliable

Page 57: Iterative Website Redesign - Micro Goals in Action

One thing at a time

Page 58: Iterative Website Redesign - Micro Goals in Action
Page 59: Iterative Website Redesign - Micro Goals in Action
Page 60: Iterative Website Redesign - Micro Goals in Action
Page 61: Iterative Website Redesign - Micro Goals in Action
Page 62: Iterative Website Redesign - Micro Goals in Action

Faculty listingCollege of Education

Page 63: Iterative Website Redesign - Micro Goals in Action
Page 64: Iterative Website Redesign - Micro Goals in Action
Page 65: Iterative Website Redesign - Micro Goals in Action
Page 66: Iterative Website Redesign - Micro Goals in Action
Page 67: Iterative Website Redesign - Micro Goals in Action
Page 68: Iterative Website Redesign - Micro Goals in Action

Apply NowHomepage call to action

http://j.mp/h8pwej

Page 69: Iterative Website Redesign - Micro Goals in Action
Page 70: Iterative Website Redesign - Micro Goals in Action
Page 71: Iterative Website Redesign - Micro Goals in Action
Page 72: Iterative Website Redesign - Micro Goals in Action

100 days?What type of timeline is that?

Page 73: Iterative Website Redesign - Micro Goals in Action
Page 74: Iterative Website Redesign - Micro Goals in Action

The side effect“Giving” link

Page 75: Iterative Website Redesign - Micro Goals in Action
Page 76: Iterative Website Redesign - Micro Goals in Action
Page 77: Iterative Website Redesign - Micro Goals in Action
Page 78: Iterative Website Redesign - Micro Goals in Action

Setting up a testVisiting campus

Page 79: Iterative Website Redesign - Micro Goals in Action
Page 80: Iterative Website Redesign - Micro Goals in Action
Page 81: Iterative Website Redesign - Micro Goals in Action
Page 82: Iterative Website Redesign - Micro Goals in Action
Page 83: Iterative Website Redesign - Micro Goals in Action
Page 84: Iterative Website Redesign - Micro Goals in Action
Page 85: Iterative Website Redesign - Micro Goals in Action
Page 86: Iterative Website Redesign - Micro Goals in Action

Where can you start?

Page 87: Iterative Website Redesign - Micro Goals in Action

• Identify a small problem

• Figure out a way to track it

• Propose changes

• Talk about it with some end users

• Implement the most appropriate one

• Review the results

• Document and share

Page 88: Iterative Website Redesign - Micro Goals in Action

Documenting

Page 89: Iterative Website Redesign - Micro Goals in Action

Thank you!@nickdenardis

http://www.slideshare.net/nickdenardis