Project Organization

We are ready to start a new project, project parameters are set, and stakeholder roles are in place. I usually follow the outline below when I start a new project. I’m not saying this is the only way to organize a web project or the gospel according to Matt, but it’s the way I organize my web design projects and works for me.

In the first phase of the development process, we call the “discovery phase” I will start a “New Project” folder; I like to use google drive and a staging server, obviously you can use SugarSync, Dropbox, your own server- whatever you like. My new project folder structure looks like this:

New Project
This folder will hold my information regarding the project.
This folder and its subfolders will house all of our non-public files, logos, artwork like raw photoshop files.
Ooh, la, la, the design playground.
Content Audit
Inventory and ranking of existing content.
Content Deck
This folder is the actual content for the new website – a document for each page of the actual site. Copy and images will be placed here for the live site. I’ve found giving clients access to this folder and allowing them to add or view their content helps move the project forward.
This will house all of the information from the Discovery Phase; each folder will house questions, methods, links and tools I may use to craft the user experience. Over the years I have accumulated a large toolbox for solving problems, I’ve gathered a lot of good questions that help in the design process and a book that I really like on different methods for different stages of the design process is Universal Methods of Design: 100 Ways to Research Complex Problems. It doesn’t go into much detail but provides a good overview of methods and the links in the book lead to some great information.
My typical Discovery folder has the following sub folders…

  • Accessibility Discovery
  • Audience Discovery
  • Brand Discovery
  • Goals-Objectives
  • SEO Discovery
  • Speed Discovery
  • Usability Discovery
If I don’t have definite data, I’ll try to sketch a user profile as close as I can.
Usually clickable interfaces derived from the wireframes.
Style Guide
This is where we will define our styles for maintaining the live site.
User Flows
You can lead a user to the content, but you can’t make them click. However, we will try our best to persuade them.
This is the skeleton of our website.
All the public web files, the actual website.


System Files
Any files that need to be accessed from the web but I would like to keep out of the public view, like include files, database info.

Download the empty folder structure.