Overview of our Web Design Process

Stage One: Project Definition Jump
Stage Two: Site Structure Jump
Stage Three: Visual Design Jump
Stage Four: Site Development Jump
Stage Five: Testing Jump
Stage Six: Launch Plus Jump

Stage One: Project Definition

The most critical step in the web design process is creating an accurate project definition. The 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.

How do we create the project definition?

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, technical specs and communication strategy.

Step 2: We [in consultation with the client] write the Project 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 the Project Plan/Timeline*- We establish the timeline for deliverables and tasks for each phase of the project. Assign due dates, expeectations and resources requirements.

Step 4: Document Maintenance Considerations - We develop a web site maintenance plan* that documents how the site will be updated and reviewed regularly.

"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 countertops." -- Web Redesign 2.0

For effective web design you 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:
1. Content Outline
2. Site Diagram
3. Wireframes
These three deliverables are dependent on each other and need to be completed sequentially.

Content Outline
Working closely with your clients, we create a list of all existing content. Brainstorming content that needs to be created for the site. We Review the list of content, trimming anything that does not match the goals or audience needs as stated in the project brief. We challnge our clinets to take time to think about the future and how the site content might need to grow. We are sure to leave room for growth.

Next content is grouped into categories. As we categorise your content, you can review and provide actual client references industry -specific kknowledge etc. Once your categories are established, we create an outline of your content and review it with you for accuracy.

Site Diagram
We then take your 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. You can use Excel, or any other effective application to create your site diagram.

Stage Three: Visual Design

We Know that structuring the site on paper before starting visual design is a critical step toward effective presentation of content to your intended audience. A good design is dependent on good site structure and a solid project definition, and we take time to prepare this.

Now it is time to let the designers be creative! We review the project brief, sitemap and wireframes with the designer(s), then give them free reign to brainstorm solutions and develop the different visual designs. The designer(s) should 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 [the designer(s)] 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, dominence), design elements (point, line, shape, color, typography) and user centered design (usability), we can 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

Stage Four: Site Development

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

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

1. 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, set 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? see UT's web guidelines on browsers
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 -
* 30K and under
* 30-80k (typical page)
* 80-100k (graphic heavy)
* 100k+ (not recommended unless all users are high-bandwidth)

Functional Specs - what functionality does your site require? Use of W3C web standards is recommended to insure that your site pursues the goals of web for everyone and web on everything.
* CSS
* Flash
* (X)HTML version
* JavaScript
* Rich Media (video, audio)
* Search - htdig and google at UT
* Secure Credit Card Transactions
* Backend Technologies (database, cgi, CMS, personalization, login)
* Web Analytics - Urchin Statistics for your site at UT

Project Plan - We review your original timeline and the technical and functional specs we've just established. We refine and add details to the project plan you drafted during the Project Definition Stage. The project plan should now includes a detailed list of concrete tasks, assignments, target dates and dependencies between tasks.

2. Building and Integrating the Site

Finally! Time to turn all this planning into reality! The steps include:

Building 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

Backend Development
* Coding dynamic features of the site that require database/cgi and integration like:
* search
* personalization/login
* secure transactions
* web analytics

Stage Five: Testing

Here we create a realistic QA plan, manage the testing process, prioritze issues, ensure that high priority issues are solved and conduct the final review and release of the site.

Quality Assurance Testing

1. Content - accurate, understandable, spelling, grammar (review conducted by content contributors / content editors)
2. Links - review site for broken links using an automated tool like WebXM
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 using an automated tool like WebXM , manual section 508 tests
6. Browser/OS/Resolution - test site on the target browsers your defined earlier either manually or using browsercam
7. Connection Speed - use the Web Page Analyzer to 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 your site for semantic markup. Read 10 Tips on SEO by Alan K'necht in his article entitled SEO and Your Web Site
10. Load Testing - contact your server administrator to discuss load testing techniques
11. Security - request automated SecurityXM Scan, review file authorizations, review authentication method, conduct authentication test
12. Prioritize Issues

We monitor the list of issues that are uncovered during the testing phase, prioritizing 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 enhancment, nice idea/feature, will consider for future release

Refine Site

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

Stage Six: Launch

1. Launch
3. Maintenance

Launch the Site
We plan the best date to go live. Consider your current web site traffic patterns and attempt to launch in a way that minimizes downtime. Make sure that everyone on the team is on call for any challenges that might occur during launch. If possible, we consider a soft launch (a quiet beta launch that allows you to confirm everything is up and running before the official launch date).

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.

Maintenance Plan
WE IImplement 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

View Our maintenance plans

NOTE THAT this design process is here to give you information about services that we offer. A project-specific process will be issued for every time.