Guide to Planning Your Next Web Project

A Guide to Planning YourNext Web Project

Inside:IntroductionWhat Is Good PlanningWhy Planning Is Worth ItSite FunctionalitySite Architecture DesignSite Interface DesignTechnology ChoicesBringing It All TogetherThe QA Process - “Is This It?”Summary and Next Steps

............................................. ? ........................... ......................... ..................................... .......................... ............................... ................................. ........................... ................. ......................

2345789

111213

CommonPlaces’ Approach to Planning Successful Websites and Web Applications

commonplaces Strategy Creativity Technology

© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com

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.

Introduction

2

http://www.commonplaces.com


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.

3



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.

4



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!

5



Site Functionality

6

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



Site Functionality Site Architecture Design

How will your site be structured? The first step in this process should be to 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 hierarchy effectively into site navigation.

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.

7

Home

Blog ContactProductsAbout

History



Site Interface Design

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

8

About Products Blog Contact

Home



Site Interface Design 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.

9


http://www.commonplaces.com/open-source-white-paper

http://www.commonplaces.com/open-source-white-paper

http://www.commonplaces.com/contact

© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 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.



Technology Choices 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.

11


© 2010 CommonPlaces e-Solutions, LLC | www.CommonPlaces.com 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.



The QA Process - “Is This It?”

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.




Guide to Planning Your Next Web Project

Technology

site different

planning process

future site

site functionalitysince

lack of planning

isnt good planning

site architecture design

complete web planning