web redesign ladd bosworth web operations manager

Download Web Redesign Ladd Bosworth Web Operations Manager

Post on 03-Jan-2016

217 views

Category:

Documents

4 download

Embed Size (px)

TRANSCRIPT

  • Web Redesign

    Ladd BosworthWeb Operations Manager

  • About Me10 years website development experienceManage Intranet with 20,000 documents and 30 content contributors in 6 different countriesRedesigned Intranet in 2006Manage public website, redesigned 2005

  • Our Team StructureWeb OperationsManagerIT TeamDesign FirmWeb ContentDesignerContent Contributors

  • Redesign TipsFocus on your AudienceRedesign toward web standardsTest site in IE, Firefox, SafariWindows and MacBelieve in usability testingThink long term, but focus on short term. Identify scope and what is included and what is not included in this iterationDont get bogged down by what you cant control right now (application content, etc)

  • Redesign TipsLadds Number One Rule:Just because you can, doesnt mean you should

    Make sure bells and whistles dont detract from the goals of the site.

  • Redesign Process FlowDefine the ProjectDevelop Site StructureDesign the Visual InterfaceBuild and IntegrateLaunch and BeyondElements of Website Redesign:

  • 1. Define the Project

  • 1. Define the ProjectUnderstanding Your AudienceClient Survey: key questions for in-house stakeholders to frame the overall redesign processCustomer Survey: 5 questions relating to current site features and possible enhancements

  • 1. Define the ProjectUnderstanding Your Audience: User ProfilesBuild User Profiles: 3-5 fictional characters that represent aspects of your audience.Based on User Survey ResponsesBasic demographicsLikes, dislikesFrustrations with your siteProduct-related desires

  • 1. Define the ProjectAnalyzing Your IndustryGather web team around a computer or projectorSurf other industry-related websitesCreate a Features list (even if you dont like the feature)Look at all competition, small or large, and even other divisions within your companyStart a file with screen shots of competition sites

  • 1. Define the ProjectPreparing a Creative BriefProject OverviewTarget AudienceEnd-User Perception/ToneNon-visual: dont include mock-ups or other visuals hereProject Framework: This document will guide the steps that follow

  • 2. Develop Site Structure

  • 2. Develop Site StructureAudit Existing ContentWhat content exists on the site today?Should it stay on the site?Is it up-to-date?Is it functional?

  • 2. Develop Site StructureCreate a Content Delivery PlanWhat 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 StructureDetermining Site StructureExisting site: What works? What doesntWhat new content are you adding?Sitemapping: show a visual representation of the structure and flowThe sitemap will help you determine the navigation and which areas need content

  • 3. Design the Visual Interface

  • 3. Design the Visual InterfaceWorking with a Design Firm or DesignerAlthough we have several talented designers in-house, we contract out our full site designFull time site designers have fresh ideas and are not bogged down by corporate emotionsDifference 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 InterfaceWireframingEncourage your designer or design firm to produce wireframes. Some dont. 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 pageInclude navigation, functionality, links, header, footer, login, banner ads, marketing text, etcDont include specific graphics or design elements. Keep it simple.

  • 3. Design the Visual InterfaceAddressing NavigationNavigation can be tabs, list of links, menus, etcNever hide content from users behind nifty navigation gizmos like drop downsChoose words carefully, make sure they will make sense to the end users and are not industry-speak or gimmicky.

  • 3. Design the Visual InterfaceReviewing Site GoalsAfter 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 InterfacePresenting Designs & Gathering FeedbackAsk the designer or design firm for three design options to reviewGather the web team to review the initial designs. Leave the executives and non-web people out of this meeting for now.Dont take a design for a whole package. Pick aspects of each that you like and dont 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 InterfaceCreating Graphic TemplatesWe 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 InterfaceCreating a Design Style GuideA Style Guide is simply a reference of the colors, CSS styles, image sizes, and other site standardsIt can be as simple as a one page document Guides future development and maintenance of the site.

  • 4. Build and Integrate

  • 4. Build and IntegrateCreating HTML Templates and PagesCreating templates now will save you maintenance concerns laterProcess will vary based on your content management systemIf the designer is coding your pages, ensure that they create templates to make adding content later easier

  • 4. Build and IntegrateConducting QA TestingSet-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. Dont make the mistake of excluding a customer based on their browser!

  • 4. Build and IntegrateConducting Usability TestingNow 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 IntegrateConducting Usability TestingSit 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 dont help them.Ask the subject to talk out loud about his/her impressions, thoughts, and articulate their movements. Im looking for login, but I cant see it. I will click about us and see if it is there

  • 5. Launch and Beyond

  • 5. Launch and BeyondPreparing an Announcement PlanDesigned to ease your customers into the new site. Dont just change the site and expect them to adapt.Tell them what youve changed, and why youve changed it.Highlight new features or key improvementsIf there is new navigation, alert them to it and explain the benefitSolicit 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 BeyondOptimizing for Search EnginesDont submit your site and dont pay anyone to improve your rankingThe 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 BeyondLaunching the SitePlan 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 BeyondMaintaining the SiteAs 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 BeyondInternal vs. External Maintenance TeamsThe 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 teamAlso 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 BeyondNext StepsDont 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 improvementFormulate a plan to continue updating and improving the site over the next 2 years.

  • Also ConsiderWeb Analytics: If you dont 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 DemandFirefox Developer Toolb