Higher Ed Experts

Iterative Web Redesign 101

Nick DeNardis
Assoc. Dir. Web Communications
Wayne State University

First, let me introduced myself…

• Associate Director of Web Communications

Wayne State University
http://wayne.edu/

• Host of EDU Checkup

http://educheckup.com/

• Curator of EDU Snippits

http://edusnippits.com/

• Writer for .eduGuru

http://doteduguru.com/

© 2011 Higher Ed Experts 2

Wayne State University

• Loca ted in Detroit, MI
• La rge public research
i nstitution
• ~32,000 s tudents
• Central Marketing & Communications
• Not fully funded
• No presidential mandate
• Redesigned over 400 websites

© 2011 Higher Ed Experts 3

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 1
Higher Ed Experts

After this webinar, you will…

Learn how to avoid full redesigns
What it takes to implement iterative design

Create effective feedback loops

Implement and communicate micro
changes to your site

© 2011 Higher Ed Experts 4

© 2011 Higher Ed Experts 5

© 2011 Higher Ed Experts 6

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 2
Higher Ed Experts

Example

College of Education faculty list

Goal: Increase faculty findability

© 2 0 1 1 Hi g h e r Ed Exp e rts 7

Current Page

© 2 0 1 1 Hi g h e r Ed Exp e rts 8

Proposed Page

© 2 0 1 1 Hi g h e r Ed Exp e rts 9

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 3
Higher Ed Experts

FIGHT!

© 2011 Higher Ed Experts 10

© 2 0 1 1 Hi g h e r Ed Exp e rts 11

Why are we talking about this?

• When is it appropriate to do a full redesign?

• Redesigns are a pain

– Unnecessary amount of time and resources

– Don’t include the end user till late in the game

– Prompted by the wrong people for the wrong reason

© 2011 Higher Ed Experts 12

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 4
Higher Ed Experts

Why are we talking about this?

• Changes are not tied to goals

• User goals don’t change at a different rate

• Making changes without a committee

• The user will control the direction of the website

• Allows writers, designer and developers to hone

their craft

© 2011 Higher Ed Experts 13

At your institution
• Identify the user goals

• Us e/watch your site from that user

• Identify one or more pain points

– Reduce confusion
– Get to a goal quicker
– Delight the visitor

© 2011 Higher Ed Experts 14

Reasons for redesigning

• Us ers goals not being met

• Bri ng the site into a central identity

• Institution or department has new

goa ls/initiatives

• Reaction to a change in the marketplace

© 2011 Higher Ed Experts 15

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 5
Higher Ed Experts

Reasons not to redesign

• It's just that time

• Aes thetics getting old

• New dean, director, or reporting structure

• Cha nge in CMS, i nfrastructure

© 2011 Higher Ed Experts 16

A happy medium

Redesign with the intent of small changes every

four weeks

© 2 0 1 1 Hi g h e r Ed Exp e rts 17

Micro Redesign

Definition:
Ta king small deliberate steps to reach a larger
goa l (which may be not 100% apparent at the
time).

© 2 0 1 1 Hi g h e r Ed Exp e rts 18

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 6
Higher Ed Experts

Example micro goals

• Reduce redundancy

• Cl earer calls to action

• Reduce path length

• Remove a silo

• Integrate external information

© 2 0 1 1 Hi g h e r Ed Exp e rts 19

Example micro changes

• Grouping content

• Vi s ual style tweaks

• Combining CSS/JS/Image files

• Menu item label changes

• Mi crocopy changes

© 2 0 1 1 Hi g h e r Ed Exp e rts 20

Spot the pain point

© 2011 Higher Ed Experts 21

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 7
Higher Ed Experts

© 2011 Higher Ed Experts 22

© 2011 Higher Ed Experts 23

© 2011 Higher Ed Experts 24

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 8
Higher Ed Experts

© 2011 Higher Ed Experts 25

Supporting micro changes

It a ll starts with effective feedback loops

© 2 0 1 1 Hi g h e r Ed Exp e rts 26

Feedback loops

• Interacting with the actual users

• Ca n be subjective

• Sol ution may not be perfect for everyone

• Needs to be documented

• Thi nk of the scientific method

© 2 0 1 1 Hi g h e r Ed Exp e rts 27

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 9
Higher Ed Experts

Split testing

• Google Website Optimizer

– A/B Testing
– Multivariate Testing

• In person testing
– Focus Groups
– One on One Testing

© 2 0 1 1 Hi g h e r Ed Exp e rts 28

Google Website Optimizer

© 2011 Higher Ed Experts 29

© 2011 Higher Ed Experts 30

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 10
Higher Ed Experts

© 2011 Higher Ed Experts 31

© 2011 Higher Ed Experts 32

© 2011 Higher Ed Experts 33

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 11
Higher Ed Experts

© 2011 Higher Ed Experts 34

© 2011 Higher Ed Experts 35

Question

Users always know best?

True / False

© 2 0 1 1 Hi g h e r Ed Exp e rts 36

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 12
Higher Ed Experts

Question

Users always know best?

True / False!

© 2 0 1 1 Hi g h e r Ed Exp e rts 37

Example

Wa yne State Stories

Goal: Increase story click-throughs

© 2 0 1 1 Hi g h e r Ed Exp e rts 38

Original

© 2 0 1 1 Hi g h e r Ed Exp e rts 39

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 13
Higher Ed Experts

Requires Mouse Over

© 2 0 1 1 Hi g h e r Ed Exp e rts 40

Current CTR

A measly 0.009 %
of ~820,000 vi sitors per month
= l ess than 100 click-throughs

© 2 0 1 1 Hi g h e r Ed Exp e rts 41

Brainstorming

• Drop the drawer down then up

• Remove categories

• Remove branding i mages

© 2 0 1 1 Hi g h e r Ed Exp e rts 42

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 14
Higher Ed Experts

Option #1

© 2 0 1 1 Hi g h e r Ed Exp e rts 43

Analysis
• 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

© 2 0 1 1 Hi g h e r Ed Exp e rts 44

Option #2

© 2 0 1 1 Hi g h e r Ed Exp e rts 45

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 15
Higher Ed Experts

Analysis
• 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

© 2 0 1 1 Hi g h e r Ed Exp e rts 46

Implemented #2

New CTR: 0.8 %

Now ~6,500 click-throughs per month

6400 % i mprovement

© 2 0 1 1 Hi g h e r Ed Exp e rts 47

Lessons learned

• Completely subjective
• Jus t expanded on initial design
• Not a fraid to put something out there
• We didn’t change the goals of the piece

© 2011 Higher Ed Experts 48

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 16
Higher Ed Experts

It’s just the web

• Fi nd a problem & fix it

• Cha nges won’t make you famous

• Document & communicate everything

• Don’t do anything without real users

© 2 0 1 1 Hi g h e r Ed Exp e rts 49

Now, how to do it at your institution?

• 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

© 2011 Higher Ed Experts 50

What we learned

• Redesign isn’t a set it and forget it

• Standing up for your end user isn’t easy

• Create feedback loops

• Test, refine and repeat

• Build trust with communication

© 2011 Higher Ed Experts 51

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 17
Higher Ed Experts

Got a question?
• We have until the top of the hour to
answer your questions
• After the webinar, you can email them to
Karine at karine@higheredexperts.com
and she will forward them to the speaker.

© 2011 Higher Ed Experts 52

Credits
• http://www.flickr.com/photos/lobraumeister/3719898954/
• http://www.flickr.com/photos/rowmuse/309535784/

© 2011 Higher Ed Experts 53

Thanks

• Thanks for taking part in this HEE webinar!

www.higheredexperts.com

© 2011 Higher Ed Experts 54

© 2011 Higher Ed Experts Feel free to print this document, but don’t
upload it to a web server 18