The Web Development Process

Web Design ProcessIn the evolution of any systematic project, there is always a development process to be followed, whether written or otherwise. Any professional Web designer can attest to the fact that much of their work is repetitive. We find ourselves repetitively completing the same tasks, even if ever so slightly modified, again and again on each project. This is not to say that every significant web project does not poses its own unique challenges. Far from it, each has its own needs, requirements, targets, functions, etc., but the overall development process no matter how complex, generally follows five major stages that you should think through before crafting your final project planning and proposal documents.

By crafting a detail oriented website design and development process, we are able to speed up our work and help our clients understand their role in the project. Through this process, we are able to organize our thoughts, plan of action, speed up a project’s timeline and provide a detailed plan of approach document to our clients.

As you consider the flow outlined below, note that the construction of the pages that make up the web site is one of the last things that takes place in a well-designed project.

Our web development process consists of these five phases:

Analysis & Web Design Consultancy – Phase I

This is the project definition phase, where we consult with the client and analyze their web design needs so as to advice and map the course of action. This process involves

  1. Client Interview
  2. Project Brief
  3. Personas
  4. Initial Tech Specs
  5. Project Timeline
  6. Initial Maintenance Panning

The most critical step in the web development process is creating an accurate project definition. A project definition includes a project brief and a project plan. The client survey is used to gather the information needed to develop the project brief and plan.

Step 1: Conduct a Client Survey Interview – The purpose of this interview is to determine the purpose of the project, the target audience, branding/perception goals, content source, initial technical specs and communication strategy.

Step 2: Write the Project Brief/Creative Brief – Based on the information gathered in the client survey, we write the project brief to define in black and white the project goals, audience profile, audience perception, primary message and competitive advantage.

Step 3: Develop Persona(s) – We look back at the client survey and project brief and develop a persona for the primary audience. Use the persona template to bring an imaginary audience member to life by filling in the following details: photo, name, quote, description, demographics, technical profile, top three user goals, top three business objectives for site.

Step 4: Write the Project Technical Specifications – Using the information gathered in the client survey along with the technical standards of your organization, document the Technical Specifications to clearly establish requirements like screen resolution, browser compatibility, download time, web standards and accessibility.

Step 5: Develop the Project Plan/Timeline– Establish the timeline for deliverables and tasks for each phase of the project. Assign due dates and resources.

Step 6: Document Maintenance Considerations – We develop a web site maintenance plan that documents how the site will be updated and reviewed regularly. Why in the world would you consider maintenance at the beginning of a project? It is important to set clear expectations that web sites and web applications require support and maintenance. It helps to make sure our clients plan to keep the site healthy by explaining maintenance requirements up front.

Web Design & Development – Phase II

This phase is the actual project implementation state and involves a couple of mini phases of its own:

Site Structure Development

“Redesigning a website is like remodeling a kitchen – you must figure out what features and capabilities you need and how you will use them before you design your layout, place appliances and plugs, and select tiles, curtains and counter tops.” — Web Redesign 2.0

Good web design requires a solid site architecture based on the site’s goals and target audience established in the project brief. The deliverables from this phase are: The following four deliverables are dependent on each other and are completed sequentially.

Content Outline

We work closely with our clients, creating a list of all existing content. We brainstorm content that needs to be created for the site, review the list of content, trimming anything that does not match the goals or audience needs as stated in the project brief. We take time to think about the future and how the site content might need to grow, making sure we leave room for growth. We then group your content into categories. As we categorize your content, we may request user feedback through a card sort. Once your categories are established, we create an outline of your content and review it with you for accuracy.

Site Diagram

We take the final content outline and create a sitemap or site diagram. A site diagram is just a visual representation of your content outline and site structure.

Visual Design

“Structuring the site on paper before starting visual design is a critical step toward effective presentation of content to your intended audience.” “Designers are not mindreaders or magicians. Good design is dependent on good site structure and a solid project definition.” Now it is time to let us the designers to be creative! Here we review the project brief, sitemap and wireframes with the, then we brainstorm on solutions and develop the ideal visual designs. We also review any branding guidelines as well as the technical requirements for screen resolution, browser compatibility, download time, web standards and accessibility. At this point, we have a clear idea of the purpose of the site, the content that will comprise the site, the site architecture and the elements that need to be on each page. Drawing on our knowledge of design principles ( balance, rhythm, proportion, dominance), design elements (point, line, shape, color, typography) and user centered design (usability), we can now develop design options that meet the project goals. A sample of the visual design tasks:

  • 1st draft of visual designs for home page and one sub-page
  • Client provides feedback on designs
  • 2nd draft of visual designs for home page and one sub-page
  • Client selects design and provides feedback
  • 3rd draft of visual design for home page and all unique sub-pages
  • Client provides feedback on design
  • Final visual designs for home page and all unique sub-pages
  • Client approval of final design

Site Development

Now it is time to actually build the site. There are two major steps during this stage:

  1. Confirm and Refine Technical/Functional Plan
  2. Build and Integrate the Site

Technical/Functional Plan

We start by reviewing the Project Brief, Site Structure and Visual Design and confirm that everything is in alignment and supports the overall project goals and needs. Next, we review and adjust the technical/functional specifications for the site: Target Technical Specs – what browsers, OS, resolution and connection speeds will you target.

  1. Browsers – what browsers will you target?
  2. Operating Systems – Mac, Windows, Other?
  3. Display Resolution – what is the screen resolution the site will be designed for? what other screen resolutions will be supported gracefully?
  4. Connection Speed – what is expected connection speed for your primary users, what other connection speeds will you target?
  5. Page Download Size

Confirm Functional Specs – We determine what functionality the site requires.

    • CSS
    • Flash
    • (X)HTML version
    • JavaScript
    • Rich Media (video, audio)
    • Search
    • Secure Credit Card Transactions
    • Backend Technologies (database, cgi, CMS, personalization, login)
    • Web Analytics

Project Plan – We then review the original timeline and the technical and functional specs we’ve just established. We verify that we have the resources we need to complete the project on time and within budget? We then refine and add details to the project plan we drafted during the Project Definition Stage. The project plan should now include a detailed list of concrete tasks, assignments, target dates and dependencies between tasks.

Build and Integrate the Site

It’s finally time to turn all this planning into reality! The steps include: Build templates using web standards

  • CSS – separate presentation from content
  • (X)HTML – use valid (X)HTML
  • Javascript – add light scripting, make sure to degrade gracefully and maintain accessibility
  • Optimize – optimize images, css and (x)html
  • Run initial tests on templates

Create Pages

  • Pour content into templates
  • Establish method for content contributors to review, update and add content

Back-end Development

  • Code dynamic features of the site that require database/cgi and integration like:
    • search
    • personalization/login
    • secure transactions
    • web analytics

Website Testing & Debugging – Phase III

This is the final phase of the web development process, right before the site is launched. To certify that the web site is complete and stable a couple of procedures that involve testing and refining are required:

Quality Assurance Testing

  1. Content – accurate, understandable, spelling, grammar (review conducted by content contributors / content editors)
  2. Links – review site for broken links
  3. Functionality – does the site perform the functions defined in the original project definition, create task list and conduct methodical testing
  4. Validity – validate (X)HTML, validate CSS
  5. Accessibility – automated section 508 tests
  6. Browser/OS/Resolution – test site on the target browsers
  7. Connection Speed – get analysis and recommendations on the speed/size of your pages
  8. Usability – conduct informal or formal usability testing with your target audience
  9. Search Engine Optimization – review site for semantic markup.
  10. Load Testing – contact server administrator to discuss load testing techniques
  11. Security – review file authorizations, review authentication method, conduct authentication test

Prioritize Issues

Taking the time to conduct testing prior to production is an important element for us in launching a high quality site. We believe that, if you wait until the site is perfect, you will never launch, so a balance between perfection and realistic quality must be struck. As we monitor the list of issues that are uncovered during the testing phase, we prioritize them in at least three categories:

  • Priority 1 – critical, must be fixed before launch
  • Priority 2 – would enhance the site, but we can go live without it, address as soon as time permits
  • Priority 3 – future enhancements, nice idea/feature, will consider for future release

Refine Site

After all of this good work, we make sure to actually implement the priority 1 changes to the site before release.

Site Deployment and Hosting – Phase IV

The site is now certified complete and ready for the web. On this stage, your web site is ready to be launched to the web and the following web development processes are set:

Style Guide

As the site gets ready to go to live production, we document the style guide. A style guide consists of the following elements:

  • Visual Design Standards – logos, colors, typography (to keep the site on brand)
  • Naming Conventions – for files, directories, css, images, titles
  • Site Structure – document the site diagram and indicate how the structure is built to handle growth
  • Templates – provide the (X)HTML templates and CSS indicating layout, typography, size, color, navigation, menus

Launch the Site

We consult the client to plan the best date to go live. Considering the client’s current web site traffic patterns (if this is a redesign) we attempt to launch in a way that minimizes downtime. We then conduct one final stage of quality assurance testing on the live site after it is fully in production to make sure everything is running smoothly. We then take a moment to celebrate and then get some sleep! To prepare and cater for last minute surprises, we scheduling time to fine tune or solve any unexpected challenges during the first few days or weeks of the site debut.

Maintenance Plan

We implement the maintenance plan that was developed in the first stage of this process. Emphasize the importance of keeping a site

  • Complete
  • Current
  • Coherent
  • Searchable
  • Accessible
  • Attractive
  • Robust
  • Secure
  • Cost Effective
  • Aligned with the spirit and goals of the project

Promotion and Marketing – Phase V

This is the final stage of the website development process. The success of this process will largely depend on whether advanced SEO service was implemented. Advanced SEO allows for more targeted and refined Search Engine Optimization to make your site fully optimized and rank higher on search engine thus translating to higher traffic and leads.

  1. Optimization -SEO (separate services)
  2. Search engine submission
  3. Advertising and Marketing Campaign (part of #1 above)
With our carefully thought web development process, we are sure that your site will be successfully build and that the final results will ultimately become an important record of your enterprise’s future, your success, and a valuable marketing tool for your business growth.