160 likes | 289 Views
Successful Web Site Redesign. Gillian Murrey g ill.murrey@vanderbilt.edu. Outline. Defining the project Creative brief Information architecture Visual Design Coding/Production & Planning for Maintenance Launch Documentation. Defining the Project. Where are you currently?
E N D
Successful Web Site Redesign Gillian Murrey gill.murrey@vanderbilt.edu
Outline • Defining the project • Creative brief • Information architecture • Visual Design • Coding/Production & Planning for Maintenance • Launch • Documentation
Defining the Project • Where are you currently? • Content inventory • Types of pages (html, asp, php, etc.) • Abilities of staff to maintain the site • Where do you want to be? • Goals of redesign (creative brief) • What will it take to get there? • CMS? More staff? Outside contractors? Servers?
Creative Brief • Summary paragraph describing the project • Define the audience • Identify competitors/peers • Clarify goals and objectives • List any visual identity requirements • See a sample creative brief
Information Architecture • Who are your users? • What tasks will they need to do? • What information will they be looking for? • How can you make the information easy to find, and the tasks easy to do?
Information Architecture • Surveys (sample survey) • Card sorts (how to) • Focus groups (how to) • One-on-one interviews (how to) • Google Analytics
Visual Design • Branding or identity requirements • Communicating the right personality • Present 3 design concepts to stakeholders • Don’t ask stakeholders for their favorite design; instead, ask what they like best about each design and what they like least about each design • How to win the opinion wars with “usability studies show . . .”
Visual Design: Inspiration • eduStyle gallery (site) • Color schemes and color palettes (site) • Build a library of design elements (site) • Free photos (site) • Background textures (site) • 80 Large Background Websites (site)
Branding/Identity at VU • Vanderbilt Graphics Standards and Logo (site) • Office of Web Communications (site) • VMC Web Development (site)
Coding/Production • CMS or not? • Test in different platforms and browsers (IE6 is used on all clinical workstation computers at the Medical Center) • Validate your code • Optimize images
Planning for Maintenance • Interview your maintainers • Experience? • Willingness to learn? • Online tutorials with screenshots (site)
Launch • Freeze all design and content • Complete testing • Plan announcement strategy • Include a “What’s Changed” screen • Transfer site to the live server • Get ready to answer emails, phone calls, troubleshoot problems
Documentation • Web Styleguide • Required elements (logo etc.) • Colors and fonts • Page templates • Content guidelines • Training • Online tutorials • One-on-one training • Group training in computer labs
Getting Buy-in from Your Users • Redesign websites • Blogs (site) • Facebook (site) • William & Mary (site)