How to Plan For and Manage a Successful Web Redesign Project
1 like2,115 views
The document outlines a comprehensive process for planning and managing a successful web redesign project, emphasizing the importance of stakeholder communication and aligning redesign efforts with institutional goals. It covers key stages including research, usability testing, content strategy, wireframing, design, and post-launch maintenance, highlighting a structured approach to achieve a functional and appealing website. Additionally, it provides resources and a checklist to guide practitioners through the redesign process.
![Conduct Usability Tests [1]
Youtube link
http://www.youtube.com/watch?v=SFwU_rvMBaE
10](https://image.slidesharecdn.com/uweb-redesign-121127131833-phpapp01/85/How-to-Plan-For-and-Manage-a-Successful-Web-Redesign-Project-10-320.jpg)
![Create Personas [2]
/tmp/PreviewPasteboardItems/fiu-personas
(dragged).pdf
11](https://image.slidesharecdn.com/uweb-redesign-121127131833-phpapp01/85/How-to-Plan-For-and-Manage-a-Successful-Web-Redesign-Project-11-320.jpg)
![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](https://image.slidesharecdn.com/uweb-redesign-121127131833-phpapp01/85/How-to-Plan-For-and-Manage-a-Successful-Web-Redesign-Project-12-320.jpg)
![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](https://image.slidesharecdn.com/uweb-redesign-121127131833-phpapp01/85/How-to-Plan-For-and-Manage-a-Successful-Web-Redesign-Project-13-320.jpg)
![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](https://image.slidesharecdn.com/uweb-redesign-121127131833-phpapp01/85/How-to-Plan-For-and-Manage-a-Successful-Web-Redesign-Project-15-320.jpg)
![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](https://image.slidesharecdn.com/uweb-redesign-121127131833-phpapp01/85/How-to-Plan-For-and-Manage-a-Successful-Web-Redesign-Project-18-320.jpg)
![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](https://image.slidesharecdn.com/uweb-redesign-121127131833-phpapp01/85/How-to-Plan-For-and-Manage-a-Successful-Web-Redesign-Project-21-320.jpg)
![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](https://image.slidesharecdn.com/uweb-redesign-121127131833-phpapp01/85/How-to-Plan-For-and-Manage-a-Successful-Web-Redesign-Project-23-320.jpg)
![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](https://image.slidesharecdn.com/uweb-redesign-121127131833-phpapp01/85/How-to-Plan-For-and-Manage-a-Successful-Web-Redesign-Project-26-320.jpg)
![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](https://image.slidesharecdn.com/uweb-redesign-121127131833-phpapp01/85/How-to-Plan-For-and-Manage-a-Successful-Web-Redesign-Project-27-320.jpg)
How to Plan For and Manage a Successful Web Redesign Project
- 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