Realigning Your Redesign ProcessNick DeNardis@nickdenardis

December 15, 2009

About myself

• Associate Director of Web Communications atWayne State University

• Staff Writer athttp://doteduguru.com/

• Host ofhttp://educheckup.com/

• Computer Science background and love user experience, information architecture, accessibility and marketing.

December 15, 2009

Preface

December 15, 2009

Redesign is not all about pushing new pixelsIt’s about refining the user experience

December 15, 2009

Wayne State Webdepartment structure

• Associate Director

•One Content Administrator

• Two Designers

• Three Developers

•One Multimedia Designer/Developer

• Three Student Assistants

December 15, 2009

Redesign is a pain

•Not all sites need a complete redesign

• Some might require just a few tweaks to make a world of difference

•Others are so bad anything you change will improve the user experience

December 15, 2009

December 15, 2009

December 15, 2009

Some simple rules

• K.I.S.S. - You’re not publishing a book

• Signoff ’s - Make sure the “client” knows the signoff is a commitment and changes afterward will effect timeline and cost

• If you are the client make sure you have a timeline set before starting any work

December 15, 2009

Web project timelines

0 4 8 11 15

Ideal

Actual

Planning Design Programming Review Launch

December 15, 2009

Discovering your real users

• How many of you have actually shadowed students using your site?

• Focus groups with your primary audience? Prospective students?

• Some passive testing tools:•Woopra - Real time analytics• CrazyEgg - Click heat mapping• Google Website Optimizer - A/B testing• Five Second Test - http://fivesecondtest.com/

December 15, 2009

December 15, 2009

Talk to the people in charge

• Assess the primary goals early

•Don’t be afraid to push something off to Phase II

• If working with a committee make sure to have 3-4 goals for each meeting

• Come up with 2-3 feelings the user should experience after a “10 Second Test” with the site

• The key is to remove the “middle people” from making rouge decisions

December 15, 2009

Determine a content strategy

• Point the fingers early - You need to make sure the person responsible for content knows it and are competent

• Catalog every public page, use something like HTTrack for PC to pull down the entire site.

•Determine the process to review and publish content

•Make sure they are aware of the time commitment

December 15, 2009

Training content contributors

•Not just on the CMS or how to physically update the site but more importantly how to structure web content

• Train staff as early as possible and mandate it for any new content contributors

•Don't bury the lead. Find the core of the page and place it up front

December 15, 2009

December 15, 2009

Mapping out the site structure

• The whiteboard is an invaluable tool

• Post-It notes also do really well

• Anything you can physically move around

• If you prefer digital, OmniGraffle is a great tool

• The goal is to move around the site as your primary audience and set a goal for every page

December 15, 2009

December 15, 2009

Wireframe it out

• Take all the visual elements and take 100 “points” to divide between them

• Physical space and prominence are two different things

• There is no fold. But make sure you put hints above the fold

• Learn to love the grid

December 15, 2009

December 15, 2009

Start the contenttransition early

• Copy and paste is NOT a content transition strategy

•Make sure every page gets looked at by at least one person

• Pages should not get published without being looked at

• This tedious and time consuming process will determine how successful the redesign is

December 15, 2009

December 15, 2009

December 15, 2009

Intensive based design

• Use the goals set for each page to influence the design

•Make sure call outs are large and consistent

• Give in to the little things but always remind the client of the design strategy

•Don't loose the departments identity with a set in stone template

December 15, 2009

Selling a design

• If you have multiple options start with the worst

•Only decision makers should be in the meeting

•Walk through each element on the page

• Explain why each element was placed where it was and its purpose

•Make sure the university identity is not compromised by the clients wants

December 15, 2009

December 15, 2009

December 15, 2009

December 15, 2009

Front end programming

•What ever your university uses take advantage of any automated processes that you can. If you have control of the system even better

•Make the site as light as possible. Attach Javascript actions after load, use sprites and combine/minify CSS and JS

• Progressive enhancement

December 15, 2009

Bringing it all together

• The content and templates should now be merged

•Don't forget about• Custom 404 pages• Redirect list• Analytics•Mobile testing• Printable style sheet

• Test the site with someone who didn’t work on the project

December 15, 2009

December 15, 2009

Site review

•Walk the decision makers through the primary tasks of the site

• Slight tweaks will happen, things change over time, just make sure it doesn't drag on too long

• Get a signoff in writing or electronic

• It doesn't have to be perfect, just good enough

December 15, 2009

Launch the site

• Change the DNS, folder, symlink. Do what you need to do to make the switch

•Don't forget any 301 redirects. Search engines and users will thank you

• Communicate the site change to all effected users possible

• Send out an email or personally thank everyone involved for their hard work. For big enough sites have a launch party

December 15, 2009

Maintenance

• By far the toughest part of the redesign process

• If your CMS has out dated page alerts use them

• Check 404's daily

• Check analytics once a week or more in the beginning

•Meet once a month or so with content contributors to see if any changes are needed to the architecture

December 15, 2009

Questions?Slides available at:

wcs.wayne.edu/casev

@nickdenardis

December 15, 2009