Guide to Planning Your Next Web Project
- 1. A Guide to Planning Your
Next Web Project
CommonPlaces’ Approach to Planning Successful Websites and
Web Applications
commonplaces
Strategy Creativity Technology
Inside:
Introduction ............................................. 2
What Is Good Planning? ........................... 3
Why Planning Is Worth It ......................... 4
Site Functionality ..................................... 5
Site Architecture Design .......................... 7
Site Interface Design ............................... 8
Technology Choices ................................. 9
Bringing It All Together ........................... 11
The QA Process - “Is This It?” ................. 12
Summary and Next Steps ...................... 13
- 2. Introduction
In the excitement of a new project, it’s easy to get so carried away that you
want to begin work as soon as possible. But all too often, a lack of planning
produces disappointing results.
Perhaps before we talk about what makes for good planning, we should identify
poor Web planning practices, so we can avoid them. The following should NOT
be considered adequate documentation for your project:
A napkin note. As romanticized as the idea may be, scribbled notes on a
cocktail napkin will rarely produce a good final result – at least not quickly or
efficiently. You may have captured the basic concepts, but there is no detail
here.
A list of websites you like. Though you may have a clear mental picture of the
finished product, a list of sites you admire is much more likely to produce a
Frankenstein than a cohesive website.
A brief description of what you want your site to do. This is a good start, but
it is only that - a start. The details are what will separate your website from the
competition.
© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 2
- 3. What Is Good Planning?
Now we know what isn’t good planning. But what is good planning? A complete
planning phase to your project should consider the following:
• Site Functionality
• Site Interface Design
• Site Architecture
• Technology Choices
Why is all this necessary?
At first, you may find it
hard to justify committing
this amount of time and
resources to your project
before any development
begins. But the benefits of thorough planning are clear, and more than justify
the cost. We’ll explore these benefits in greater detail on the next page, and
throughout this document.
© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 3
- 4. Why Planning Is Worth It
As we so often tell our clients, there are numerous benefits to complete Web
planning.
First, we encourage clients to view planning as an investment, because it always
saves time and money further down the line. Problems that could bring your
project to a grinding halt can easily be avoided if they are spotted ahead of
time.
Planning also offers the opportunity to figure out exactly what you want your
website to do and exactly how you want it to look – while your options are still
wide open. Once you start to advance with the design and development of your
site, you begin to limit yourself based on what has already been done. You may
find yourself moving forward with a site you don’t even like, simply because you
have already invested so much time and money into it.
Lastly, planning helps by clearly conveying exactly what it is you DO want. You
may have a clear picture of your future site in your mind, but unfortunately
your developer is (probably) not a mind reader. If you dedicate the time to
producing a clear and complete plan of your site, it will make it easy for your
developer to build exactly what you want.
© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 4
- 5. Site Functionality
Since you first decided to build or re-build your website, you’ve probably spent
a lot of time thinking about what functionality you want your website to have.
In other words, what you want your site to do.
When deciding what your website will offer users, consider these questions:
Who are your users? What are they looking for? It’s also important to decide
on the key features of your site. What will make your site different from the
competition? What are the key components that your site simply could not
launch without? In the majority of cases, you may find it advantageous to
launch your website with only the critical functionality in place. This way, you
can build a loyal group of users who will facilitate word-of-mouth promotion,
while you develop and add additional features based on user feedback.
At this stage, you will also want to plan out the types of content that your site
will include. This is an often ignored piece of the planning process, but it can
be instrumental to getting what you envisioned. For example, your site might
include blogs, news articles, podcasts, products, customer testimonials, etc.
These are all slightly different types of content, and each has its own specific
fields, views, and layouts. You should try to be as specific as possible regarding
what differentiates these different types of content. As an example, though
many blogs share similar traits, not all blogs look and act in the same way. So be
specific!
© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 5
- 6. Site Functionality
When communicating your plans to your developers, it is critical to be as clear,
specific, and accurate as possible. The more detail you provide, the less chance
there is that your developers will deviate from what you have in mind.
Rather than saying “I want a blog,” give them all of the details.
For example, I want a blog with:
• Two authors (Frank and Sally)
• Commenting by logged in users
• Rating system (five stars)
• An RSS feed
• Links to share posts on social bookmarking sites
• Five categories (News, Products, Events, etc.)
• Each post and comment should include a user image (avatar)
With a list like the one above, you have given your developers a checklist that
they can use to create this portion of your site. All of the features above should
also be reflected in your wireframes (see Page 8).
© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 6
- 7. Site Architecture Design
How will your site be structured? The first step in this process should be to
Home
create a complete site map. This will determine where every piece of content
should exist within the structure of the site. The next step is to translate this
About Products Blog Contact
hierarchy effectively into site navigation.
History Designing navigation involves many principles, including memory – for example,
most people can only remember a list of seven things, so navigation with more
options than this can be overwhelming. Navigation that is too many levels deep
is also hard to manage for some users. When planning navigation, you’ll want
to make sure you are grouping things intuitively into categories. Don’t use your
company’s internal jargon to label menus and pages. Take the time to research
the terminology that your users would employ.
Ideally, you want to design a site that is so intuitive, it doesn’t even require
instructions. With every piece of your site, ask yourself if it will help your users
accomplish their goals (and your goals), or if it will be a hindrance. If this piece
might represent a barrier to some users, remove or modify it.
© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 7
- 8. Site Interface Design
Home The next step in the process is to specify how your site should look.
Unfortunately, this doesn’t just mean deciding on a blue or red background. It
means designing a website that is engaging, easy-to-use, and yes, attractive as
well.
We often begin the design phase of a project by creating detailed, clickable
wireframes of the site. This provides an opportunity to create a usable,
organized interface, before worrying about visual design elements. Considering
the decisions you’ve already made in the process (the features of your site,
their relative importance, etc.), create a wireframe of your site that organizes
About Products Blog Contact your content and functionality in a clear and sensible way.
This process requires you to make decisions regarding the placement of
elements on the page, their relative size and importance, their overall ease
of use, and many other factors. Content should be arranged on the page so
that users can easily scan through it. Use headings and lists to break up topics,
include images, and be as concise as possible. Make sure you plan for a clear
conversion path, with obvious calls to action.
Lastly, it’s important to consider how search engines will move through your
site, and plan for this in your design as well. Even if your site looks presentable
to users, a disorganized underlying structure could hinder search engine spiders
from crawling your site completely.
© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 8
- 9. Technology Choices
What tools will you use to build your website? Today, many people turn
to content management systems (CMS) because they are easy to use, and
facilitate frequent content updates. With a user-friendly CMS at your disposal,
there’s no need to wait for your IT person to make site updates for you. You can
make changes when you want to make them.
CommonPlaces develops exclusively with open source platforms. The reasons
why we’ve chosen open source fill an entire white paper by themselves (you
can download it here). But stated simply, we believe strongly in the open
source model, and feel that if used by an experienced developer, it produces
better results for a lower initial investment.
Though we feel that open source is an easy choice to make, choosing which
CMS is right for your project is not so easy. Each has its own unique strengths...
and a community that stands behind it.
Though CommonPlaces develops many projects in the
Drupal CMS, we will always recommend using the best
CMS for the task at hand, rather that attempting to fit a
square peg in a round hole. If you would like to talk with
our development experts regarding the right platform for
your site, don’t hesitate to contact us.
© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 9
- 10. Technology Choices
Community contributions are a large part of the open source model, and the
open source platforms that we use at CommonPlaces are no exception to this
rule. Platforms like Drupal and WordPress depend upon the development work
of the community at large.
This development work not only goes toward continually improving the core
platforms themselves; it is also directed towards building optional pieces
of functionality that are called modules, extensions, plug-ins, or add-ons,
depending on the community. Regardless of what you call them, these pieces
have the potential to provide much of the functionality you want, without the
need to build it from scratch. In other words, you won’t have to reinvent the
wheel for the purposes of your project.
However, it is critical to assess the modules you will need before you begin
development. Some may not be compatible with each other; others may not
be frequently updated. This research should be done with the help of your
development partner, who will have the experience with the platform and its
community necessary to deliver appropriate recommendations.
© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 10
- 11. Bringing It All Together
At this point, most of your planning work is complete. The final step is to bring
all of your work together and create one Project Specification, which you can
hand over to your (very grateful) developers. Based on the work you have done,
this “Spec” should include:
• Detailed descriptions of desired functionality and content types
• Site map
• Site wireframes
• Site designs
• A choice of platform/CMS
• A list of needed modules/extensions
Whether you develop these pieces on your own, or take advantage of
CommonPlaces’ complete Planning services, these document should create
a very clear picture of your future site. This means that development will be
faster, and the final result will be much closer to your initial intentions than if
you handed your developers a couple of sketches on the back of a napkin.
© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 11
- 12. The QA Process - “Is This It?”
The planning documents that you create will be of incredible value throughout
the development process. However, they will prove themselves valuable again
at the completion of your project, when the time comes for that critical but
often ignored step - QA (quality assurance).
If you have ever performed quality assurance on a large scale, you’ll know that
it can be incredibly challenging. It requires great patience, concentration, and
attention to detail. Fortunately, your planning documents will be there to help.
At this stage, take out the planning documents you created, and use
them as a checklist as you look at the finished product. Does it
include all of the functionality you specified? Are the pages
organized in the correct way? In the excitement of seeing
your new website, it can be easy to overlook these
small but critical details. Luckily, your planning
specifications should include all of the functionality
of your website, how it is supposed to work, and
how your site is supposed to look. Use this as a
blueprint as you move through your QA process.
© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 12
- 13. Summary and Next Steps
Good planning keeps projects on time and on budget.
A thorough planning phase also ensures that you get exactly what you were
envisioning. One of the greatest challenges for Web developers is translating
your “wants” and “needs” into a website. You can help your developer
overcome this obstacle by clearly laying out what you want before development
begins.
In addition, planning documents are an incredibly valuable tool in the QA
phase of your project. We advise all our clients to use them as a checklist,
guaranteeing that every feature that was planned for appears accurately and
completely in the final design.
The planning experts at CommonPlaces love discussing the merits of project
planning, and talking to people about their project ideas. If you would like to
talk to someone about the planning details of your next project, feel free to
contact us.
Lastly, please share this document with others who would like to learn more
about the benefits of incorporating a complete planning phase into their next
web project.
© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 13