Website Design Projects: The Right Process, The Right Plan, Every Time

Dec 04

A website design project can become an overwhelming experience if you don’t fully understand the process. Years ago there was no “rule book” or “guide” to play by that would help you prepare yourself for a website development project. Below is the first post in the series “Website Design Projects” that will help to give you clarification to what a website project entails.



After developing websites for nearly 15 years,  Firefly has developed a firm understanding of how a website design project process works. In fact, we practically invented process by combining the best the ad agency and software development processes. The basic stages of the process include:

  • Discovery
  • Needs Analysis
  • Design
  • Production
  • Launch

Trial-and-Error = Trial-and-Terror!

website design processFor most, the entire experience is still strictly trial-and- error, or as some know it – trial-and-terror. While there might be a clear vision of the final product, unless you’ve been through several website development projects, most have no idea how to get from vision to reality.

Even today, few people have been a part of more than one or two website development projects. And most of those people would describe the experience as anything less than frustrating and chaos. I know many who would call it terror.

Given our depth of experience and our confidence that few people know it better, we are able to share with you what we’ve learned, lessons that will surely benefit you as you begin your website development project process. While we don’t claim to have the only successful process, its a proven process, with 100′s of successful projects completed using it.

Understand and master the important stages of the process and approach the process strategically, instead of spending all of your time figuring out the process through trial-and-error. This will give you more time on sound strategy and great content.

Here’s how a typical website design or website re-design breaks down:

website design discovery phase

Discovery

The Discovery stage explores and documents your organization’s history, culture, products and services, market and competition. This step is also where you define your online needs and gain insight into what you expect your website to deliver in terms of performance and design.

If you’re working with a development firm, this information is used to develop:

  • The solution
  • Cost estimate
  • Time frame
  • Proposal

(If you’re developing the project in-house, the same approach applies.)

In addition, a few basic questions should be answered to establish a historical context and perspective of your organization. Understanding who you are, how you operate, and what makes your organization successful establishes the foundation of your strategy and content.

  • When did your start your business?
  • What do you do?
  • Who is your audience/customer?
  • How do you interact with customers?
  • Who are your competitors?
  • Why do people do business with you?
  • How do you operate your business?

website design needs analysis stageNeeds Analysis

The Needs Analysis stage explores and establishes:

  • Project requirements
  • A cost estimate
  • A tentative schedule

This phase establishes “where you are going” and outlines the challenges and goals of the project. It determines what’s needed to proceed in overcoming those challenges and accomplishing those goals.  This creates the framework of your plan of action.

Next, it is time to estimate the time and resources needed in implementing that plan, and to develop a cost estimate based on the work involved.

If you are working with an outside development firm, at the end of this stage a proposal is being delivered. At the conclusion of the needs analysis, a working meeting is conducted to drill down to the details of what the project will entail.

This stage is concluded by documenting your project’s needs to establish a clear understanding of the  expectations by laying out the project in work scope and time schedule.

website design design stageDesign

The Design stage involves the visual aspect or look-and-feel of the project.  This includes your team’s input regarding graphic design needs and preferences which are used to produce a design concept for your website, mobile site, or application. This stage usually involves a lot of input from the team, including:

  • What do you think the website should look like?
  • What are your corporate colors?
  • Do you have a logo?
  • Do you have high quality photos on hand?
  • What other websites can you provide as references?
  • What do you like about these reference sites?
  • What don’t you like about these sites?
  • What do they want your visitors to do while on the site?

The look-and-feel, or design concept, for the homepage and one or more secondary pages is usually developed, often starting with a wire-frame or simple layout sketch to gain consensus from decision-makers.

Consensus is one of the greatest challenges in any design project. Most people develop a fuzzy vision of how their website will look. However, no design concept can capture the precise vision of any one team member, much less several fuzzy visions, and it is unrealistic to believe this is possible.

Therefore, everyone should provide input, but release their vision and trust that the designer will capture these ideas and combine them with the functional requirements to produce an effective design that no one could have imagined

production

Production

Often called “slicing and dicing,” the production stage is when the static design concept mockups are turned into attractive, functioning web pages. This includes:

  • HTML production
  • CSS production
  • Content development
  • Graphic and image editing
  • Programming
  • Custom applications development
  • Content management system implementation
  • Pages and content implementation
  • Shopping cart implementation

This is the stage where webpages come to life.

launchLaunch

The launch stage involves several steps, including:

  • Review and testing
  • Training
  • Go-live

In preparation of a launch, a final review is conducted by the team to make sure the website is working properly, including testing the applications, fixing bugs, link testing and copy editing.

Training for you and your team on the Content Management System (CMS) is conducted and a time is scheduled for launch!

The go-live or public launch must be scheduled with your host and technical team to ensure time is allotted for DNS migrations, the time it takes for the go-live URL to become available to visitors across the Internet.

Even well-managed projects can be rigorous and challenging. Not understanding or not adhering to a sound project process and plan almost always leads to frustration, disappointment and a poor final result. In broad strokes, this project process has proven to keep projects on-time, on-budget and an effective final result.

Planning prior to the project is a task that you and your team can benefit from significantly. An effective process and detailed plan will allow your business to better understand what’s really required in a website design and development project.



One comment

  1. Website development cost has increased as the demand to be on the organic page of a website search and tweaking this website
    may be some of the contributing factors. Q: What are your predictions
    for the industry for the next year. You can use this document to identify a niche in the market and locate
    a customer base you wish to target.

Trackbacks/Pingbacks

  1. Website Design Projects: Website Project Planning Resources | Firefly Blog - [...] you are unsure of what to expect in a website development project refer to our previous blog: Website Design ...

Leave a Reply

Your email address will not be published. Required fields are marked *


3 + two =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>