Have a working knowledge of how to carry out a redesign process Know how to communicate and reach agreement with stakeholders Know the right way to get a premier site - not only in design but in function as well

1. How to Plan For and
Manage a Successful
Web Redesign Project
Matt Herzberger
Director of Web Communications
Florida International University

2. After this, you will…
Have a working knowledge of how to carry
out a redesign process
Know how to communicate and reach
agreement with stakeholders
Know the right way to get a premier site -
not only in design but in function as well
2

3. Why We Redesign?
— Why?
— Shifting
strategic
priorities
— Technology
is
ever-­‐changing
— Previous
redesigns
were
done
without
planning
3

4. How Do We Redesign?
— How?
— On
average,
sites
are
redesigned
every
3
-­‐
5
years
— Don’t
design
simply
to
get
a
new
look
— Have
an
informed
and
strategic
redesign
that
aligns
with
your
institution
goals
4

5. Let me give you a good example…
— The
site
is
not
in
line
with
being
student-­‐
centric.
— IA
is
all
over
the
place
— Slow
code,
bad
techniques
— 10
years
since
last
redesign
5

6. Users talked, we listened
— “Accessing
FIU
Mail
is
a
headache.
Isn’t
there
an
easier
way?”
— “The
information
about
life
on
campus
is
very
limited.”
— “As
a
prospective
student,
it
is
necessary
to
know
which
campus
I
would
be
on
in
order
to
decide
if
this
is
the
.
right
school
for
me.”
6

7. Do as I say, not as I do!
— NOTE:
A
redesign
is
fluid;
not
every
step
is
needed
— Don’t
be
lazy
and
don’t
disrespect
or
shortcut
the
process
— Client
needs
to
be
heavily
involved
in
the
process
7

8. Discover, Research and
Gather
— Find
all
the
research
you
have
about
your
current
site
— Feedback,
webmaster
emails,
analytics,
etc.
— Ask
the
users
/
audience
— Focus
groups
8

9. Review your peers
William
&
Mary
Bates College
www.wm.edu
www.bates.edu
• Bold
imagery
• Useful persistent footer
• Big
Branding
• Solid imagery
• Focus
on
audiences’
• Great interaction
needs
9

10. Conduct Usability Tests [1]
Youtube link
http://www.youtube.com/watch?v=SFwU_rvMBaE
10

11. Create Personas [2]
/tmp/PreviewPasteboardItems/fiu-personas
(dragged).pdf
11

12. The Website Strategy
— Meet
with
stakeholders
to
get
their
goals;
make
them
measurable[3]
— Make
a
project
plan
(who
needs
to
be
at
the
table)
— Create
a
schedule
[4]
and
determine
the
budget
12

13. Content Strategy & Information
Architecture
— Create
a
content
inventory
[5]
— Test
the
IA
via
focus
groups,
card
sorts
[6]
— Make
it
obvious
who
is
responsible
for
content
and
how
long
it
takes
— Teach
them
how
to
write
for
the
web,
or
use
a
web
content
expert.
13

14. Define : Card Sorting
Card sorting
http://www.youtube.com/watch?v=-89cj71-Vfg
14

15. Build Wireframes
— Wireframes
[7]
are
simple
tools
for
showing
page
structure
and
content
requirements
— This
is
where
you
get
stakeholder
buy-­‐in
on
the
layout.
15

16. Design and Mockup the Site
— NOTE:
If
you
are
starting
your
redesign
here,
then
you
are
doing
it
wrong!
16

17. Design and Mockup the Site
— A
draft
or
visual
design,
a.k.a.
“comps,
— It
should
be
very
easy
because
it
is
just
a
high
fidelity
wireframes
— Get
feedback
and
get
sign
off
on
design
17

18. Create and Program
Templates
— Be
sure
to
consider
template
requirements
— CMS,
Framework,
Flat
HTML,
Development,
Scripting
— Test,
test,
test
–
— optimize
code
[8]
— SEO
[9]
— accessibility
[10]
— Add
your
analytics
[11]
18

19. Migrate the Content
— We
already
proofread,
revised
and
cleaned
all
the
content
— This
is
slow
and
boring,
but
be
sure
that
you
are
reviewing
the
content
and
are
consistent
in
the
flow
19

20. Test, Test, Test. Then
Cleanup
— Test
code
validation
— Fix
bugs
— There
should
be
small
tweaks
only
at
this
point
— Get
final
sign
off
20

21. Time to Go Live
— Change
the
DNS
move
to
live
site
— Be
sure
to
remember
redirects
[12]
— Monitor
and
review
for
little
snafus
— Notify
and
congratulate
the
client
as
well
as
anyone
else
who
needs
to
know
— HAVE
A
BEER!
21

22. After the launch:
Train and Maintain
— Train
the
team.
Show
contributors
how
to
create
pages
and
add
content
to
the
site.
— Provide
documentation
and
materials
— Maintain
your
work.
22

23. After the launch:
Care for Your Website
— NOTE
there
are
always
iterations
and
changes.
— “A
website
much
like
a
child
-­‐
it
needs
our,
or
our
clients,
love
and
attention
on
a
daily
basis.”
— If
you
have
done
it
right,
you
should
have
a
framework
that
will
grow
with
your
needs
for
some
time
to
come
[13].
23

24. CONGRATULATIONS!
— You’ve
just
launched
a
website!
— If
things
have
gone
as
planned,
you
won’t
need
to
revisit
this
process
as
a
whole
for
years
to
come.
24

25. Checklist
— Discover,
Research
and
Gather
— Define
a
Site
Strategy
— Form
a
Content
Strategy
and
Information
Architecture
— Build
Wireframes
— Design
and
Mockup
the
Site
— Create
and
Program
Templates
— Migrate
the
Content
— Test,
Test,
Test.
Then
Cleanup
— Launch
the
Site
— Train
and
Maintain
— Repeat
25

26. Resources
— [1]
Usability
Testing
-­‐
http://slidesha.re/hee-­‐usability
— [2]
Personas
-­‐
http://bit.ly/hee-­‐personas
— [3]
Client
survey
-­‐
http://bit.ly/hee-­‐client-­‐survey
— [4]
Timeline
-­‐
http://bit.ly/hee-­‐timeline
— [5]
Content
Inventory
-­‐
http://bit.ly/hee-­‐content-­‐inventory
— [6]
Card
sort
-­‐
http://bit.ly/hee-­‐card-­‐sort
— [7]
Wireframes
-­‐
http://bit.ly/hee-­‐wireframes
— [8]
Optimize
code
-­‐
http://yhoo.it/hee-­‐optimize
26

27. Resources
— [9]
SEO
-­‐
http://bit.ly/hee-­‐seo
— [10]
Accessibility
–
http://bit.ly/hee-­‐accessbility
— [11]
Analytics
-­‐
http://bit.ly/hee-­‐analytics
— [12]
Redirects
-­‐
http://bit.ly/hee-­‐redirects
— [13]
Realign
-­‐
http://bit.ly/f3ZR9O
27

28. Questions
Contact Me: mherzber@fiu.edu 7-0094
Web Communications: http://webcomm.fiu.edu
Get
the
slides
at
http://go.fiu.edu/redesignfiu
28