how to plan for and manage a successful web redesign project
DESCRIPTION
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 wellTRANSCRIPT
How to Plan For and Manage a Successful Web Redesign Project
Matt Herzberger
Director of Web Communications Florida International University
After this, you will…
2
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
Why We Redesign? � Why?
� Shifting strategic priorities
� Technology is ever-‐changing
� Previous redesigns were done without planning
3
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
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
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
.
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
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
Review your peers
William & Mary www.wm.edu
• Bold imagery • Big Branding • Focus on audiences’
needs 9
Bates College www.bates.edu • Useful persistent footer • Solid imagery • Great interaction
Conduct Usability Tests [1]
10
Youtube link http://www.youtube.com/watch?v=SFwU_rvMBaE
Create Personas [2]
11
/tmp/PreviewPasteboardItems/fiu-personas (dragged).pdf
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
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
Define : Card Sorting
14
Card sorting http://www.youtube.com/watch?v=-89cj71-Vfg
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
Design and Mockup the Site
� NOTE: If you are starting your redesign here, then you are doing it wrong!
16
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
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
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
Test, Test, Test. Then Cleanup
� Test code validation
� Fix bugs
� There should be small tweaks only at this point
� Get final sign off
20
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
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
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
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
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
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
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
Questions
28
Contact Me: [email protected] 7-0094 Web Communications: http://webcomm.fiu.edu
Get the slides at
http://go.fiu.edu/redesignfiu