Web Redesign: Workflow That Works
Authors: Kelly Goto, Emily Cotler
Venue:  (2001)

From the Book:Presenting a single, comprehensive workflow that can be incorporated and adapted by all web development teams. The Core Process, put forward in Web ReDesign: Workflow that Works in five sequential phases, is a one-process-fits-all system with a focused emphasis geared especially toward the specific needs of redesign. One process fits all projects? Yes. The Core Process can be followed by all types of teams, for all kinds of companies, and with all ranges of budgets. Flash or HTML, complex functionality or nothing more involved than simple JavaScript rollovers, redesigned site or brand new web presence...every site shares common construction requirements. All web projects need to be thoroughly planned and defined. All need to have their content organized and structure blueprinted. All need to be designed aesthetically. All need to be built. All need to be launched. All sites. Every last one.. Web ReDesign: Workflow that Works describes what you should do (necessary), what you can do (extra), and what you should watch out for. We also highly recommend two additional processes  testing for usability and analyzing your competition. Should time and budget allow, your adaptation of the Core Process should incorporate these processes.. This overview offers a singular panorama of the entire workflow  you can actually see the entire Core Process from start to finish. It is often helpful, especially when in Phase 1, to see everything still to come. When you are building your budget, budget by task, and tick off each task in each phase as you allocate hours. When you are scheduling, you can see all the steps laid out in list format and gain a better timeline view. For project management, being able to see the next several steps at any point in the process can be valuable for staying on top of your team.. What follows here is a Cliff Notes version of the Core Process  an abbreviated overview. We also include ready-to-use tools, charts, helpful lists, and more. Here we provide a concise overview...sprinkled with a few helpful tips.. Phase 1: Defining the Project This first phase of the Core Process is all about gathering and analyzing the information necessary to clearly identify the scope of the project and then prepare for kick-off. You will start by asking a lot of questions (relax, we'll give you the questions), and you will amass a lot of data  data that you will use to shape and communicate the expectations of the project. No matter the size or scope of the project, the need to plan is ever present.. In Phase 1, you set the stage for your redesign. Many of the items that get addressed here affect every phase, and a few, like knowing your audience, figure into every step. When defining project scope, you must have an understanding of everything from budget to maintenance.. This is the biggest phase of the Core Process. The work you do here will define the entire project  every move you make and every deliverable you create.. Phase 1 is divided into three stages: DISCOVERY, CLARIFICATION, and PLANNING, each containing several steps. Phase 1 helps you set the stage for your project.. Phase 2: Developing Site Structure With Phase 2, the actual hands-on work begins. Developing site structure is all about content and information strategy  determining how to organize information so that site users can find it quickly and easily. Whether working on a brand new site or a redesign, whether the budget is $5,000 or $250,000, the need for a logical structure is a constant across all websites. Yes, the client is anxious to see the look and feel of the redesign, but devising a solid, well-thought-out plan will lay the foundation for everything to come  including the visual design.. Phase 2 looks at the site structure (as its forms) from three views: CONTENT-VIEW, SITE-VIEW, and PAGE-VIEW, each containing several steps. Phase 2 helps you structure your redesign project.. Phase 3: Visual Design and Testing The visual design, the look and feel, the graphic interface  it's the first experience the user has with the site. Even before users know if the site is easy to use, they see what it looks like. Designing the visual face of any site is exciting, and in Phase 3, designers finally get to be creative. At this stage, all design elements are created based on the established information design and the tone and goals set forth in the creative brief. The design is then approved, refined, and tested.. Production designers also start working during Phase 3. They begin to test functionality and assumptions. By developing a Protosite, they can confirm navigation and content organization.. Visual design and testing, whether through the development of a Protosite or through straight functionality testing, work toward the same goal on all sites  to create an overall interactive design that meets the needs of the user and that will smoothly translate to HTML.. Phase 3 is divided into three stages: CREATING, CONFIRMING, and HANDING OFF, each containing several steps. Phase 3 helps you stay on budget and on schedule while you design the visual face of your website.. Phase 4: Production and QA Phase 4 is where you put together all the pieces and make them work. Production merges content, design, and HTML and/or Flash production into the completed site. Phase 4 sees the backend technical implementation (if applicable). This is also the time when you should conduct quality assurance (QA) testing on your site. Test the site against your requirements. Test for HTML fluidity. Run QA. Identify the bugs, prioritize the fixes, and then fix them. Get user feedback and iron out the kinks. Launch is imminent.. Phase 4 is divided into three stages: PLANNING, BUILDING, and TESTING, each containing several steps. Phase 4 helps keep you on track as you complete the actual HTML building of the pages of your site.. Phase 5: Launch and Beyond Getting to this phase means you are ready to go live with your redesign. Congratulations! Launching your site is a major milestone, but you're not done yet. This phase covers what you need to think about before, during, and after your site goes live. It is about gathering loose ends and wrapping the project up before the site moves into the next phase of production: ongoing maintenance.. Phase 5 is where the distinction sharpens between in-house teams and external web development firms. In Phase 5, we are careful to note where the responsibilities of the different teams usually start and stop.. Phase 5 is divided into three stages: DELIVERY, LAUNCH, and MAINTENANCE, each containing several steps. Phase 5 helps get your project properly published and smoothly transitioned into maintenance.. The following sections cover some overall tips  things to keep in mind as you follow the Core Process.. Prepare for Scope Creep Understand the concept of Scope Creep and how it will affect your project. The slow, inevitable swelling of a project's scope from something defined to something significantly bigger, Scope Creep happens with almost every project. Little things add up. Beware of seemingly casual client requests for small changes. Scope Creep is subtle; you usually don't recognize that it is happening. At your kick-off meeting, define Scope Creep to both your client and your team and explain how keeping careful tabs on the schedule, deliverables, and process will help keep the project on target.. Track Your Hours In general, organizations that track their hours  and usually know where their budget stands and how it is being utilized  are profitable. Those that don't track their hours either aren't profitable or are lucky. Establish a method for tracking hours...and then actually, truly, diligently track those hours. Time tracking is critical for both design firms and in-house departments; it helps you track profitability and keep team members accountable for their projected hours (and your projected budget).. Get Signed Approvals Nothing makes a client more accountable than a signature on paper. Here's a good rule to live by: If it discusses scope, budget, or schedule, get it signed. If the client signed it, save it. Email approvals are a good start, but follow up with a hard copy to protect yourself  get a physical signature via fax whenever possible. Establish one contact from the client side who has final sign-off. You will not want to redesign for a committee.. For every project, create a project folder (or a physical binder) to house all signed documentation: contracts, briefs, the initial proposal and subsequent revisions, the approved sitemap, visual design directions, and so on. Clients sometimes suffer from short-term memory loss. Gently remind them of things they have approved and dates they have agreed to throughout the process.. Combat Content Delay Late content is the number one reason for project delay. Why? The task itself and the resources needed to complete said task are severely underestimated. Accept it. Plan for it. Charge for it. One way to combat content tardiness is to HIRE A CONTENT MANAGER: a person to manage and oversee the entire content-delivery process. A second way is to CREATE A CONTENT DELIVERY PLAN. This is a schedule that outlines realistic dates for delivery according to readiness.. Incorporate Smart Design Smart Design serves the user's environment and capabilities. Smart Design is functional and fast loading. It is focused on the user's experience rather than on the ambitions of the designer, the desire to use Flash, the positioning of the company's advertisers, or even the personal quirks of the CEO of the client's company. If it detracts from the user, it is not Smart Design even if it is cool. How do you practice Smart Design? Simple. Think like the user. Browse, click, and download like the user. Incorporate your information design rather than fight it.. Incorporate Usability Testing Of all forms of user feedback, the data collected from usability testing is the most valuable because it measures not how you think your users will behave, but rather how an individual user actually navigates, finds information, and interacts with your website. Results are immediate and indisputable. By conducting informal testing throughout the development process, you can test assumptions and make decisions, thus refining your site's information design, navigation, naming and labeling, and visual design along the way. Incorporate usability testing into your process.. Conduct a Competitive Analysis Analyzing both your industry and your competition can help you better understand how your site rates. Review the main features and usability of a cross-section of competitive sites. An informal analysis conducted from the user's point of view allows for a greater understanding of features, services, and ease of use. Further formal research and analysis can allow for an in-depth look into the client and the industry, coming with a higher budget and utilizing greater expertise. A competitive analysis should be part of the discovery process, no matter the level of your approach.