Web Design Process

An Inside Look at the Web Design Process

The design process incorporates a healthy dialogue, check-ins and a few pass-backs

Web Design Timetable*:

Description	Days
Stage 1: Discovery	3
Stage 2: Requirement Gathering	3
Stage 3: Business Intel	2
Stage 4: Information Architecture	3
Stage 5: Wire-frames	2
Stage 6: Rough Cut Comp	5-10 (depends on first impressions)
Stage 7: Final Comp	14
Stage 8: Front-End Development (coding)	10
Stage 9: Testing & Fixing	2
Stage 10: Padding	3

*While this is an ideal scenario for design, there are areas that can take longer than necessary based on the above dependencies.

Stage 1: Discovery

Which sites you want to be like, which sites you don’t want to be like. Sites, art, ideas that inspire you. Who are we dealing with? This stage is also for any sort of business history that would help define the requirements.

Stage 2: Requirement Gathering

Requirements may be “I need all photos to be 250px wide” or “I only want users to only click twice to get to a product” or “I all the buttons on the site to be fuchsia”. The most important part of this process is actually “documenting” what is to be solved with the design and what your core competencies are. This keeps expectations on point, future feature creeping and revisions to a minimum.

Stage 3: Business Intel

Data gathering is simply a stage where we take a long hard look at past web site analytic reports, user feedback, past issues and identity weak areas in the current design. Data gathering may be which pages have the highest bounce rate, customers not finding various help topics, load times or simply which browsers most of your users access your site with. These areas are the catalyst for some of our data driven decisions. We don’t just want to make something pretty, we want to solve problems.

Stage 4: Information Architecture

Good information architecture is creating intuitive, efficient navigation that not only makes sense to the user, but to your business as well. While this seems very straight forward, this is an area most skipped. There are traditional areas areas of navigation, but most businesses have their own set of requirements. Some businesses may need to bubble up testimonial links and others may want to give their users better shipping or technical info and still others may have a special drop-down/search/sort/filter thingie that they want worked into the architecture.

Stage 5: Wireframes

This simply takes the first two stages and puts it in a visual form for us here internally, although we are open to sharing it. This document is “usually” without color or assets. It’s usually a bunch of rectangles and copy which gives us a good idea of where things should go. Example: where exactly should your social media links go, where best to put FAQs, your most popular product position, where should your super special links go or special sign-up form go?

Stage 6: Rough-Cut Comp

This is the first version of the design. It is presented in a PDF from a .psd or .ai file. This is an important part of the project. Right away, you should decide if this is a direction you would like to go. If not, a second rough-cut is created from the feedback. Once signed off as a definite direction, we move to the next stage.

Stage 7: Final Comp

This is the culmination of feedback and multiple revisions from the rough-cut process. This is also inclusive of a style guide which will be used for all later campaigns and development.

Stage 8: Front-End Development

This involves all the changes to the .css file, template file, and uploading of all design assets. This is also inclusive of any special client-side scripting.

All design is done on the Schawel Volusion/Bigcommerce server until final payment is made. Once the final payment is made, all assets and code are moved over to the clients production server.

Stage 9: Testing & Fixing

This is the QA (quality assurance) of all design and functionality as it pertains to the front-end development. This is inclusive of cross browser compliance (defined by client and analytics) w3.org for CSS and HTML. Most QA is done with at least two cycles, sometimes more.

Stage 10: Padding

We give ourselves a few days as padding for the unexpected. If the web design production lands on holidays, people are sick, clients are unresponsive, miscommunication, etc.