2. discovery 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. specification 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. design 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. development 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. build & test 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. go live 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.

4. discovery 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. What’s a Wireframe?

5. You say: “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.”

6. 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.”

7. 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:

10. 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. What’s a Spec look like?

11. It looks like this… 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.

12. And like this… Outlines everything the designers and developers need to know to build the site.

15. design 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 What’s a design comp?

16. wireframe Designs are based on the information and functional descriptions provided in the specification, as well the layout presented in the wireframes. design example 1 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.

17. design example 2 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.

18. design example 3 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.

21. development 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. How do we stay coordinated?

22. 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.

25. build and test 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. How do we track issues?

26. 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.

29. go live Site is built, testing is complete, all issues resolved. Flip the switch… Click to see Site Live!