web redesign ladd bosworth web operations manager

Web RedesignLadd Bosworth

Web Operations Manager

About Me

• 10 years website development experience

• Manage Intranet with 20,000 documents and 30 content contributors in 6 different countries

• Redesigned Intranet in 2006

• Manage public website, redesigned 2005

Our Team Structure

Web OperationsManager

IT Team Design Firm

Web ContentDesigner

Content Contributors

• Focus on your Audience

• Redesign toward web standards

• Test site in IE, Firefox, Safari

• Windows and Mac

• Believe in usability testing

• Think long term, but focus on short term. Identify scope and what is included and what is not included in this iteration

• Don’t get bogged down by what you can’t control right now (application content, etc)

Redesign Tips

Redesign Tips

•Ladd’s Number One Rule:

•Just because you can,

•doesn’t mean you should

•Make sure “bells and whistles” don’t detract from the

goals of the site.

Redesign Process Flow

1. Define the Project

2. Develop Site Structure

3. Design the Visual Interface

4. Build and Integrate

5. Launch and Beyond

Elements of Website Redesign:

1. Define the Project

1. Define the Project

• Understanding Your Audience

• Client Survey: key questions for in-house stakeholders to frame the overall redesign process

• Customer Survey: 5 questions relating to current site features and possible enhancements

1. Define the Project

• Understanding Your Audience: User Profiles

• Build User Profiles: 3-5 fictional characters that represent aspects of your audience.

• Based on User Survey Responses

• Basic demographics

• Likes, dislikes

• Frustrations with your site

• Product-related desires

1. Define the Project

• Analyzing Your Industry

• Gather web team around a computer or projector

• Surf other industry-related websites

• Create a Features list (even if you don’t like the feature)

• Look at all competition, small or large, and even other divisions within your company

• Start a file with screen shots of competition sites

1. Define the Project

• Preparing a Creative Brief

• Project Overview

• Target Audience

• End-User Perception/Tone

• Non-visual: don’t include mock-ups or other visuals here

• Project Framework: This document will guide the steps that follow

2. Develop Site Structure

2. Develop Site Structure

• Audit Existing Content

• What content exists on the site today?

• Should it stay on the site?

• Is it up-to-date?

• Is it functional?

2. Develop Site Structure

• Create a Content Delivery Plan

• What content is missing from the site?

• Who in the company provides that content?

• What are their deadlines?(Remember, content is ALWAYS late, so pad these dates!)

2. Develop Site Structure

• Determining Site Structure

• Existing site: What works? What doesn’t

• What new content are you adding?

• Sitemapping: show a visual representation of the structure and flow

• The sitemap will help you determine the navigation and which areas need content

3. Design the Visual Interface

3. Design the Visual Interface

• Working with a Design Firm or Designer

• Although we have several talented designers in-house, we contract out our full site design

• Full time site designers have fresh ideas and are not bogged down by corporate “emotions”

• Difference between designing a great banner ad and designing a great site and user interface. You want an interface designer.

• Share the Creative Brief you created earlier with the designer. Talk about the goals of the projects and any design constraints such as color etc.

3. Design the Visual Interface

• Wireframing

• Encourage your designer or design firm to produce wireframes. Some don’t. This is a great way to work out small layout and navigation issues without being distracted by color or design.

• Show rough layout, graphic space, key headers, and any other elements that need to appear on the page

• Include navigation, functionality, links, header, footer, login, banner ads, marketing text, etc

• Don’t include specific graphics or design elements. Keep it simple.

3. Design the Visual Interface

• Addressing Navigation

• Navigation can be tabs, list of links, menus, etc

• Never hide content from users behind “nifty” navigation gizmos like drop downs

• Choose words carefully, make sure they will make sense to the end users and are not industry-speak or gimmicky.

3. Design the Visual Interface

• Reviewing Site Goals

• After the wireframes are created, but before the initial designs are presented, review the site goals and the creative brief.

• Has anything changed? Does it need updates based on discoveries in the wireframing process?

3. Design the Visual Interface

• Presenting Designs & Gathering Feedback

• Ask the designer or design firm for three design options to review

• Gather the web team to review the initial designs. Leave the executives and non-web people out of this meeting for now.

• Don’t take a design for a whole package. Pick aspects of each that you like and don’t like. Encourage open discussion and brainstorming.

• Two or three rounds of the design phase are not uncommon. After two iterations, try to narrow the design to one option and present that to the non-web stakeholders.

3. Design the Visual Interface

• Creating Graphic Templates

• We pay the design firm or designer to create 3 graphic templates of the site for us.

• Usually includes Homepage, news/feature page, and a sub-page.

• Our web team then codes the pages, images, CSS, and scripting to meet our technical requirements.

• Alternately, you could pay the design firm to create the site and the bulk of the content for you. Most design firms and designers will code as much or as little as you request.

3. Design the Visual Interface

• Creating a Design Style Guide

• A Style Guide is simply a reference of the colors, CSS styles, image sizes, and other site standards

• It can be as simple as a one page document

• Guides future development and maintenance of the site.

4. Build and Integrate

4. Build and Integrate

• Creating HTML Templates and Pages

• Creating templates now will save you maintenance concerns later

• Process will vary based on your content management system

• If the designer is coding your pages, ensure that they create templates to make adding content later easier

4. Build and Integrate

• Conducting QA Testing

• Set-up a test environment with a functional copy of your site.

• Find spelling errors, misplaced content, browser inconsistencies, and other minor bugs.

• Double check compatibility with IE 6, IE 7, Firefox, and Safari. Don’t make the mistake of excluding a customer based on their browser!

4. Build and Integrate

• Conducting Usability Testing

• Now is the time to ensure you have created a site that the end-users will love.

• Identify 8-10 people who can test the site. Some should be internal, but most should be members of the target audience. People who responded to your user survey are often eager to help improve the site.

4. Build and Integrate

• Conducting Usability Testing

• Sit one subject at a computer and have one moderator give them specific tasks to accomplish. The hardest part of this is keeping the moderator from “helping” the user. Remember, if they get stuck you have identified a potential problem in the design, so don’t help them.

• Ask the subject to talk out loud about his/her impressions, thoughts, and articulate their movements. “I’m looking for login, but I can’t see it. I will click ‘about us’ and see if it is there”

5. Launch and Beyond

5. Launch and Beyond

• Preparing an Announcement Plan

• Designed to ease your customers into the new site. Don’t just change the site and expect them to adapt.

• Tell them what you’ve changed, and why you’ve changed it.

• Highlight new features or key improvements

• If there is new navigation, alert them to it and explain the benefit

• Solicit feedback. Remember, humans are naturally resistant to change, but their comments will help identify any issues that might not have been discovered in the QA or usability testing.

5. Launch and Beyond

• Optimizing for Search Engines

• Don’t submit your site and don’t pay anyone to improve your ranking

• The number one way to increase your ranking? Standards Based Design. Code your site so that the spiders can read it. Alt tags on images, CSS, proper use of h1-h3 tags.

• No frames, Flash, splash pages, fancy JavaScript navigation, etc.

5. Launch and Beyond

• Launching the Site

• Plan to launch the site during off-peak times. We launch Friday nights so that if something goes wrong we have all weekend to fix it.

• Back-up the old site, or have some way to roll back, just in case. Most content management systems make this easy.

• QA test the live server. Make sure all of your files moved over from the test server correctly.

5. Launch and Beyond

• Maintaining the Site

• As soon as the site is live, the Maintenance phase kicks in.

• How often your site needs to be changed to stay fresh depends on your product. Banking sites do not need to be as dynamic as blogs or news sites.

5. Launch and Beyond

• Internal vs. External Maintenance Teams

• The firm that designed the site, a contract designer, or in-house designer are all options.

• Depending on the size and capabilities of your internal web team

• Also consider how often the site will be updated? Do you post news items daily? Or is it just monthly rotation of marketing materials?

5. Launch and Beyond

• Next Steps…

• Don’t rest.

• If you only redesigned part of the site, what other aspects of the site could be improved?

• Which items that were out-of-scope for this project would be a target for improvement

• Formulate a plan to continue updating and improving the site over the next 2 years.

Also Consider…

• Web Analytics: If you don’t track statistics for your website usage now, a redesign is the perfect time to start. Solutions vary from the free Google Analytics to the expensive WebTrends on Demand

• Firefox Developer Toolbar: excellent for testing sites, disabling css, etc.

• Original PSD Files: Make sure your designer gives you the original PhotoShop files for your design. If something goes wrong later on, you’ll need them.

• Usability Testing: Learn more at www.uie.com

Also Consider…

• Content Management

• Options vary based on the size and complexity of the site

• For simple sites, I favor using Adobe Dreamweaver for the pro designers and Adobe Contribute for the content contributors

Credits

•The foundation for the process outlined in this presentation is from “Web ReDesign 2.0: Workflow that Works” by Kelly Goto and Emily Cotler