The Process of Website Design & Development – I

December 2nd, 2009 by Lowell D'Souza Add your Comments »

Website development is a long and challenging process but if the right steps and sequence is followed along with a dollop of discipline, you’re guaranteed to have a successful website.

By that I mean, you’ll have a website that is user-friendly, presents the right information to your site visitors, is SEO optimized, has the right social media hooks and runs on a current back end. All you really need is a process and some discipline.

Assuming that you’re an Internet marketing manager guiding a web designer, a team of programmers and coordinating with a business to get their objectives for creating/rebuilding a website, here are the basic steps that one typically follows :

Research (Business)
Planning (Content & Technology)
Design
Development
Testing
Launch

Step One: Research (Business)

The first step is research and information gathering. This step is critical since the rest of the process and other activities will be driven by the information obtained from this step.

Essentially, this step involves a thorough understanding of the business that the website is being created for. Get a strong understanding of the business objectives, their customers and their products. Start by understanding the following :

Purpose
What is the purpose of the site? Is information being provided or are products and services being promoted/sold?
Business Objectives
What does the business aim to accomplish by building this web site? Is it increasing sales, obtaining leads, obtaining email sign-ups, getting more folks to download their product brochures or are they merely a business aiming to provide information and then monetize their visitor traffic through advertising campaigns online?
Business Expectations
The most important part. Make sure that you and the business are on the same page in terms of design. Ask probing questions about how they expect the website to look? Ask for concrete website examples. Probe thoroughly. Note that this is also a sensitive situation as you’ll have to balance your strong knowledge of Internet best practices with what the business desires .
Target Audience
This is key. The overall web experience is shaped by your understanding of this piece. What are your customers like? Get demographic and psychographic information (if you can), analyze your website traffic (Is there a specific group of visitors that will help you reach your goals? Do an 80-20 analysis.) Understand the browsing habits of your customer as strongly as possible. You’ll get more information when you run user group testing at the wire-frame stage of design and development.
Content
What kind of information is your target audience seeking about you? Is it more in depth information about a social issue, a travel product, a gift item, a charitable cause? This will shape your content strategy (which is part of an SEO strategy).

Step Two: Planning

Now, that you know what the business needs, you should create a plan to make it happen. Here are some of the things you need to do as part of your planning process:

Scope
You now have an understanding of what the scope of the project is from a business standpoint. Communicate with the design and development teams to get a sense of what’s involved with making this project happen. Get ideas about the technology involved – is it PHP/my SQL or will you use Microsoft ASP? What kind of back end CMS will you use? Is it WordPress or Drupal or Frog? Get some basic answers to complete your scope. You can select the best option as the project progresses.

Content Strategy

While this part falls within the purview of an SEO strategy, it’s necessary to address this here since the overlap is more than evident i.e. you’ll need to have a menu and sub menu structure to aid the designer with the website design and the SEO team will require to know what content you aiming to place on the website so that the copy writing team can create the same after the SEO team has completed the appropriate keyword strategy. Also, having the menu structure will help you create the sitemap of your website.

Timeline

Ensure that you have a time line for the rest of the steps : design, development, testing and launch. You already have an idea of the scope of the project now so use a Gantt chart to put some hard time frames in place. Conversations with the design and development teams will give you an indication of the time required to complete certain tasks. Put in some float time so that you have some leeway in case anything goes wrong.

Technology

Step Three: Design

You now know your business objectives and you’ve scoped out your project. Now, it’s time to determine the look and feel of your site.

Your target audience is one of the key factors taken into consideration. A site aimed at babyboomers, for example, will look much different than one meant for a financial institution. As part of the design phase, it is also important to incorporate elements such as the company logo or colors to ensure that you have consistent branding across all media.

Work with your design team to create a couple of prototype designs for your web site. Most web designers use Adobe Photoshop and will send you a jpeg file to review. Often times you will be sent an email with the mock-ups for your web site, while other designers take it a step further by giving you access to a secure area of their web site meant for customers to view work in progress.

Once you’ve sat down with your web designer and wire framed the website, hold a meeting with the stakeholders of the project to get feedback on the same. Remember that it’s easier to make changes to the design when it is in the ‘Design’ phase rather than when it’s in the ‘Development’ phase. Also, run the wire frame by a sample user group to get their feedback on the design as well as to get a sense of user behavior – this will help you make the website more intuitive. Get feedback from both the stakeholder and user group and implement the same. Run another meeting with both groups for feedback and after getting changes and implementing them, freeze the design.

In this phase, communication between both you, your design team, your stakeholders and your user group is crucial to ensure that the final web site meets expectations.

Step Four: Development

Here your development team works to create your website. They will typically take all of the individual graphic elements from the prototype and use them to create the working website.

The home page is developed first followed by a “shell” for the interior pages. This is your wire frame during development. Only if it’s critically vital, can you make changes here else no changes to design and functionality should be done during this phase. The shell serves as a template for the content pages of the site, as it contains the main navigational structure for the web site. Once the shell has been created, the content can be distributed throughout the site, in the appropriate areas.

Ensure that your programmers have a good understanding of front-end web development and are able to write valid XHTML / CSS code that complies to current web standards.

Step Five: Testing

Here, the development team will attend to the final details and run a stress test on the website. They will test things such as the complete functionality of forms or other scripts, as well last testing for last minute compatibility issues (viewing differences between different web browsers), ensuring that your web site is optimized to be viewed properly in the most recent browser versions. At this point, run an alpha test and open it for testing from your user group as well as stakeholders and other willing testers from your team or the stakeholders.

As part of testing, the development team should check to all the code written for your web site to make sure that it’s valid. Valid code means that your site meets the current web development standards – this is helpful when checking for issues such as cross-browser compatibility as mentioned above.

Once you’ve identified issues as part of the alpha testing, get the development team to remedy the same and then open up the site for Beta or pre-launch phase. This will mean having your website live on a sub-domain like new.yourwebsitename.com. Also, have a new website invitation on the top of your current website along with a feedback tab asking existing site visitors for feedback.

Step Six: Launch

Once you’ve completed Beta testing and everyone’s satisfied with the outcome. it’s time to launch. Typically, do this at the end of the business week. The devs will use a FTP (File Transfer Protocol) program to upload the web site files to your server. Once the web site uploaded to the server, the site should be put through one last run-through. This is just precautionary, to confirm that all files have been uploaded correctly, and that the site continues to be fully functional. This essentially will mark the official launch of your site.

Next comes the very important SEO part where after completing the technical SEO part of the website like 301 redirects, 404 error pages, server load balancing issues etc you actually begin on-page SEO implementation. Here you optimize your website to ensure that key elements like the page title, on-page content, meta description and keyword tags are tweaked to reflect your SEO strategy. After that of course, comes the linking part with the right anchor text, both internally and externally as well as ensuring that images are optimized in addition to renaming any urls that are not optimized.

A quick note on a CMS :

A CMS (Content Management System) tallows a website owner to be more hands-on. With a CMS, the programmers typically utilize online open-source software to develop a database-driven site for your needs. Drupal, Joomal and WordPress are the most common CMS systems used these days. A CMS gives you the ability to edit the content areas of the web site as you have access to a back-end administrative area, where you can use an online text editor (similar to Microsoft Word). It’s possible to edit, add, modify new pages, images and content yourself.

Posted in Internet Marketing