discovery

specification

design

development

build & test

go live

Take the time to understand what you’re really after. Lots of examples, lots of

discussion about what you need vs. what you want, talks about how you’ll use the

site, what you hope to gain, how visitors will navigate your new site.

Put things down on paper, make sure they make sense. Identify everything that

needs to be considered, consider it, plan it. All future actions stem from the

specification, testing will be performed against the spec.

The fun part. Bringing color to all the things discussed in the previous two phases.

Functionality comes into better focus, how the site will be used becomes for

apparent, your brand is finally applied.

The boring part. The heads-down, quiet-music-playing-in-the-background phase of

the project. Opportunity to get stuff done on your end, to get the building blocks

built and to make course corrections as needed.

Putting things together and seeing if they work. Really, it’s like that. Sometimes

adding content will break the design, sometimes a solution to a business problem is

inadvertently discovered, we always use an issues list to track what needs to be

done.

The big day, and everything that goes into it: SEO plan, advertising plan, hosting

situation, DNS transfer, training, email blast to existing clients… the launch party.

Most importantly, the launch party.

Talk about abstracts.

Lay down some thoughts on paper and build on them.

Put up the scaffolding. Generate increasingly more complete wireframes until the scope

is clear and the specification process can start.

discovery

“We’re an Interior Design company, so, we have tons of pictures that we want

to highlight on the home page. Our market is very segmented, so we want to

be able to speak to each segment on the home page before directing them to

their own dedicated pages.”

You say:

“Yes, but our images are smaller than that. And we need to have the ability to

place images in the text section as well. In fact, we would like to make that

section a blog that we update daily or weekly. And our CEO wants a new

tagline with the logo.”

You say:

“And we need to have visitors sign up for our mailing list.”

“Got it. Let’s talk about your market segments.” I say:

You say:

Describe each element of each page.

Record all integrations with 3rd party applications, databases, payment systems, etc.

Spell out how visitors will use your site.

Spell out how you will use the site.

specification

Describe each element of

each page.

Record all integrations with 3rd

party applications, databases,

payment systems, etc.

Spell out how visitors will use

your site.

Spell out how you will use the

site.

It looks like this…

Outlines everything the

designers and developers

need to know to build the site.

And like this…

Options presented based on

wireframes and specification.

Chance to discuss the visual as well

as continue the visitor experience

discussion.

Set of page templates delivered

design

Designs are based on the

information and functional

descriptions provided in the

specification, as well the layout

presented in the wireframes.

wireframe

Literal interpretation of

wireframe.

Main elements presented as

outlined in the spec.

Main image rotates to display

market-segment-specific

images, though market

navigation is not clearly

defined in this example.

design example 1

Less literal interpretation of wireframes.

Market segmentation is presented inside the main image, with navigation moving to a

horizontal access, but overall similar in layout to the presented wireframes.

design example 2

Least literal interpretation.

Market segments are divided by the panels, which flip upon roll-over to present a new,

market-specific image and link to landing page. More modern design, uses Flash.

design example 3

Is boring.

Is an opportunity for you to get things

wrapped up on your end, like content

creation.

Consists of heads-down work, rarely

attractive.

development

basecamp

Online project

management tool.

Access to your project

provided at start of

project.

Tracks all milestones,

files, comments, To-

Do’s, etc. in real time.

Eliminates confusion

about project

direction, scope.

Continuous record

of communications

and decisions made.

Fit all the pieces together.

Generate all pages of your site, begin filling with your content.

Testing performed by us relative to spec, by you according to your vision.

build and test

basecamp

Issues, bugs, defects,

things that just aren’t

right go in Issues List.

Each issue has an

owner.

Real-time

collaboration, does

not replace good ol’

phone conversations.

Goal is to resolve all

issues.

Site is built, testing is complete, all issues resolved.

Flip the switch…

go live