The document outlines the website design workflow process, which includes discovery, definition, design, development, and deployment phases. In the discovery phase, goals, features, users, and design are determined. Definition involves site mapping, content organization, and wireframes. Design encompasses visual elements and user experience. Development is coding the design. Deployment includes testing, launching, and submitting to search engines. The process aims to strategically plan websites to achieve goals.

1. The Web Design Workflow Process
Keys to a Successful Build
Prepared by:
Kabeed K. Mansur, CEO/COO
© Tech Out Solutions, LLC

2. The Website Design Workflow and Process
Discovery
The first approach in a successful website design is the discovery phase which helps o
determine the goals fo the site, features, user demographics, desired functionality, and
design aesthetics. This phase should be viewed as the foundation that drives the rest of
the site design and development. It will help determine the most appropriate
architecture that will create a feature rich environment for the intended user.
1. Strategy Consultation
Company Goals – What does the company do? What type of industry
does the company occupy? What is the company’s current marketing and
branding strategy? What value does the company want it’s website to add
to its present infrastructure?
Market and Competitor Analysis – Who is the company’s direct
competition? What other companies exist that are doing similar things to
the client’s company? What companies would the client like to emulate?
Audience – Who is the client trying to reach/influence?
2. Design and Strategy Brief
Draft a 1 to 2 page strategy and design brief organizing the critical
information gathered during the first phase of discovery – that is, explain
the contours of the company as identified above, and then a brief general
idea regarding the design/style/layout (the information architecture).

3. Define
Without proper organization, a website will only be a burden to both the client, and the
clients’ consumers. If a client or his/her consumers are unable to find what they are
looking for within the first few seconds – then they will become frustrated, move on to
the next site, and in effect the company with have lost a customer. Therefore, we must
begin the process with a site map and wireframe designs to establish the major
architecture and placement of the most important content/features. These wireframes
are discussed and refined until an agreement that most accurately achieves the
intended site goals.
1. Site Map
A visual hierarchy
2. Content Inventory
Outline for developing and managing content
3. Page Flows / Work Flows
Page flows and click paths
4. Wireframes
Visual representation of content positioning on the individual pages. These
rough sketches will show where important elements fall on a page.

4. Design
This phase encompasses much more than making pretty things. Rather, we focus on
the user experience. We view design as a tool to empower the use to act, to generate
emotions, make a complex idea easy to understand, and, ultimately lead a buyer down
a desired/mission critical path.. After careful examination and discussion of the results
of the information architecture, the design process begins in earnest. Once finalized, the
visual elements replace the wire frames and the details of the site design begin to take
shape.
1. Concept
Initial ideas and a generalized artistic vision/design road map
2. Sketching
Design layouts
3. Lock & Feel
Visual elements and styling
4. Revisions
Modifications to fine tune the designs base on client revisions/comments
5. Page Types
Developing subsequent sub-pages

5. Development
Only after the discovery and design phases are complete does the development of the
site code begin. The hosting plan is purchased, the chosen software installed, and the
design is sliced and coded by placed into the software application.
1. Tech Review
Technical analysis of open source technologies to be used
Strategy Discussion regarding best technical approaches to provide
desired functionality for site as conceived in the design phase.
2. Programming
Coding of the visual design
3. Optimization/Preparation for Organic SEO
Site optimized for prominence of following search engines: Google,
Yahoo!, and Bing.
4. Content Management System (if applicable)
A CMS allows administrators to add, edit, and delete content throughout
the site. We can provide full CMS systems or targeted systems for
selected sections of the site.
5. Database Application Integration (if applicable)
Occasionally a site needs to be integrated into an existing database
application or software that is being used for internal purposes. For
example, a contact form that automatically populates a new ‘lead’ in Sales
force, a popular CRM tool. This feature would be discussed in the
discovery phase and then implemented in the development phase.
6. Shopping Cart (E-Commerce Integration)

6. Deployment
All design elements, development features, and software are tested, adjusted, and re-
tested on multiple browsers by a number of people on different systems to make sure all
work is built correctly. Every attempt is made to break the beta site to be sure that all
bugs are worked out before launch. Once AP testing is complete the site is launched
live to the public and submitted to all major search engines to be indexed. Any new
features and augmentations that need to be made post-launch are typically addressed
in a ‘Phase Two’ project.
1. Testing
Browser compatibility – all major browsers (including Firefox, Safari,
Chrome, IE< and Opera) will be tested to make sure your site displays as
intended.
Functionality – Our team vigorously tries to break the site, so that any
potential problems will be found and fixed before launch.
2. Launch
After final testing is complete the website is launched ‘live’ on the internet
and submitted to all major search engines.
We announce the launch of your site via our website, case study, and any
other applicable venue.

7. Conclusion
Building a website is very similar to any other building project – take for example,
building a house. First, one must determine who is going to live in the house and what
type of environment the house will live in. The architect begins sketching the plans
based on interviews with the home owner and the home builder. The blue prints are
drawn, the functionality of the house is determined, and the drawings are finalized. Only
then is the ground broken and the foundation poured. The master builders are brought
in to work their trade and the house begins to take shape. In the end the ribbon is cut
and home owner moves in.
It is very east to lose track of the purpose of the website. We will avoid making design
decisions based on what other people are doing or the latest trends. If a website is built
through strategic planning with specific goals in mind and a brand to fall back on, then
the end product will most likely get you the rests you expect. Think through every
decision that we make. Ask yourselves: Who is going to the website? What do I want
them to do when they get there? What are my goals for the site: How can I track the
results?