The Essential Guide to Website Planning

Strategy • Content • Design • Functionality

serioussem.com

Table Of Contentso Introduction What is good planning? Why planning is invaluableo Marketing Strategy Buyer Personas Content Creation Social Mediao Site Functionality Gathering Informationo Content Types Modules Details Mattero Site Architecture Site Navigationo Site Interface Design Wireframes Web Designo Technology Choices Content Management Systems eCommerce Marketing Toolso Bringing it all Together The QA Process – Is this it? Summary and Next Steps

Serious SEM integrates your Marketing

with your Website

• Attract Newcomers• Engage Visitors• Convert Leads• Amaze Customers

Research & Strategy Content

SEO Social Media

Lead Generation Administration

serioussem.com

Introduction2 Introduction2

serioussem.com

Your company has evolved. You now have a clearer idea of whatworks with your website, what you would like to accomplish. Thetime has come for a new website. However, in the excitement of anew project there is often a rush to begin work as soon as possible.All too often, a lack of planning produces disappointing results.

What is Good Planning?A complete planning phase to your project must consider thefollowing:

Marketing StrategyEvery web project should begin with a solid understanding of your target market, what they are looking for, and how they use the web. This understanding must be used to create the foundation fora successful website.

Site FunctionalityIt isn’t enough to know what you want your website to accomplish foryou. You must also imagine how a visitor to your site will want to interactwith it.

User Experience DesignA positive user experience is an essential element of website success.You must conduct research to meet the needs and desires of yourvisitors, from visual design to usability.

Technology ChoicesThere is a plethora of technology choices available in the field of webdesign. You need to research the best products available to achieveyour goals.

Why Planning Is InvaluableYou may find it hard to justify committing all of this time and these resources to your project before any development begins. Careful planning, though, will more than justify the cost, and you’ll be confident in your decisions. In addition, problems that could bring your project to a grinding halt can easily be avoided if they are identified in advance.

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 the design and development of your site, you begin to limit yourself based on what has already beendone. You may find yourself moving forward with a site you don’t even like, although you’ve invested so much time and money into it already.

Introduction3

serioussem.com

Finally, planning conveys exactly what it is that 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 easier for your developer to build exactly what you want. Be prepared to spend considerable time in conversation with the site developer.

Marketing StrategyOne of the most common universal mistakes made by businesses is to add social media icons to theirwebsite, and consider that marketing. If the goal of your website is to attract visitors and convertthem into leads, customers, clients, and advocates, then you need to implement a solid marketing strategy to make sure your website is addressing your target market.

Buyer PersonasYour website is the face of your company online, it essentiallyrepresents who you are and what you do. It is completely naturalto make decisions based on how you want your company to beviewed by others. In our experience, this is the wrong approach.You should instead look at your target market, and define yourbuyer personas. Try to view your business through your buyerpersona’s eyes and think about their goals and behavior. If youbuild your website with the end user in mind, you will have a greatchance of attracting and converting them to clients or customers.

Ask yourself these questions when creating buyer personas:• Who are they (demographics, job position, daily activities, personality)?• What are their needs and how can we address them?• What do they value the most?• Where do they go for their information?• What keywords would they use to search for a company like ours?

To truly utilize your personas, you need to think of them as real people. To help accomplish this add a name and a photo to each of your personas. The creation of quality personas will lead to a true marketing strategy, more sales, and happier clients.

Content CreationThe next step in the process is to develop a plan for creating content for your buyer personas toenjoy, learn from, and/or share. This type of content can help you demonstrate your knowledge ofyour field, attract new visitors, and rank better in search engines for your targeted keywords. Providing your audience with engaging and helpful content will bring them back to your websiteand increase conversion rates.

Marketing Strategy4

serioussem.com

Types of content include:• Web content• Blog Posts• eBooks or Whitepapers• Case Studies• Free templates• Videos or Webinars• Podcasts

Social MediaWord of mouth has always been the most useful (andbudget friendly) marketing tool around. This is why usingsocial media is vital to your business's success.Figure out which networks are most used by your buyerpersonas and increase your presence on each one.When discussing the layout and design of your websitewith your developer, be sure to include social mediabuttons on each and every page. Insist that your contentmust be easy to share on various networks. If possible,try to create a community for your current and futurecustomers/clients where they can interact with one another.By coming up with a solid marketing strategy first, you will be able to begin your web project in the right mindset for meetingyour goals.

Site FunctionalitySince you first decided to re-build your website, you’ve probablyspent a lot of time thinking about what functionality youwant your website to have. In other words, what you want yoursite to do.

Gathering InformationWhen deciding what your website will offer users, considerthese questions:• Who are your users?• What are they looking for?• What are the key features of your website?.• What will make your site different from the competition?• What are the key components that your site simply could notlaunch without?

You may find it advantageous to launch your website with onlythe critical functionality in place. This way, you can build aloyal group of users who will facilitate word-of-mouth promotion,while you develop and add additional features based onuser feedback.

Content Types5

serioussem.com

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• Videos• Products• Customer testimonials

These are all slightly different types of content, and each has its own specific fields, views, andlayouts. You should try to be as specific as possible regarding what differentiates these different types of content.

ModulesThis development work not only goes toward continually improving the core platforms themselves; it is also directed toward building optional pieces of functionality that arecalled 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 need to 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.

Details MatterWhile many websites share similar traits, they do not all look and act the same way. Be precisewith your instructions. The more detail you provide, the less chance there is that your developers will deviate from what you have in mind. For example, rather than saying “I want a blog,” list all the features your blog page should have, such as:• Multiple authors• A comment box for logged in users• Rating system• An RSS feed• Links to share posts on social bookmarking sites• Images – maybe even videos

With a list like the one above, you will have given your developers a checklist that they can use to create this portion of your site. Be prepared to include information like this for every page.

Site Architecture6

serioussem.com

Site NavigationThe 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. When going through this process with our clients, we typically ask them the following questions:• What information do you want to present to users?• How do you want your site be structured?• How will your users navigate through the site?• How are your competitors organizing their site, what do you like/dislike about it?

The next step is to translate this hierarchy effectively into site navigation. Designing navigationinvolves many principles, including memory. For example, most people can only remember a list ofseven things, so navigation with more options than this can be overwhelming.

Navigation that is too many levels deep is also hard tomanage. When planning navigation, you’ll want to makesure you are grouping things into logical categories.Don’t use your company’s internal jargon to label menusand pages. Take the time to research the terminology thatyour users would employ.

Ideally, you want to design a site that is completely intuitive.With every element of your site, ask yourself if it willhelp your users accomplish their goals, or if it will be ahindrance.

Site Interface DesignThe next step in the process is to specify how your site should look and feel. This stage requires more than deciding on a blue or red background. It means designing a website that is engaging, easy-to-use, and yes, attractive as well.

WireFramesWe often begin the design phase of a project by creating detailed, clickable wireframes of the sitebased on the decisions we’ve already made in the process (the features of the site, their relative importance, etc.). This provides an opportunity to create a usable, organized interface, before worrying about visual design elements. Think of wireframes as the blueprints of a new house, they help you see the layout of the website as a whole before you begin adding a design.

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.

Site Interface Design 7

serioussem.com

DesignOnce the basic layout of your website is established,you should start thinking about how you want it to lookand feel to visitors when they first see each page.Design can be the most time-consuming phase of anyweb project, as there are millions of options for everydecision that must be made. Therefore, you should beas specific and detailed as possible when brainstormingideas.

Before you begin creating a design, come up with acreative brief for the project. In this brief, answer thefollowing questions:• Is there a specific style guide you will need to follow?• What message/feeling should visitors receive when they first see your website?• How do you want to be viewed online (eco friendly, safe, edgy, modern, etc.)?• What are your buyer personas looking for in a design?

Once you have those questions answered, do some research. Pick between three to five (or more)websites that jump out at you and write down what you do, and do not, like about the design. Consider everything about the site, including its images, colors, functionality, navigation, even down to the font size.

Technology ChoicesEvery web project is unique with its own set of goals, challenges, and ultimate vision. Therefore,there isn’t a single “one size fits all” solution, which is why you should choose the technology your web project utilizes with care. Content Management SystemsA Content Management System (CMS) is an interface built on top of a web application framework. It allows users to easily edit and add various type of content to a website. Today, many people turn to content management systems (CMS) because they are easy to use, and facilitate frequentcontent updates. With a user-friendly CMS at your disposal, there’s no need to wait for your IT person to do site updates for you. You can make changes when you want to make them.

Though CommonPlaces develops many projects in the popular Drupal CMS, we will always recommend using the best CMS for the task at hand, rather than attempting to fit a square peg in a round hole. Some of the CMS’s we work with include Drupal, WordPress, Magento, EzPublish, HubSpot, CMO and Accrisoft Freedom Software. Each platform has its own individual strengths and we make it our job to ensure that your site is built using the best platform for your business.

Technology Choices8

serioussem.com

EcommerceFor an eCommerce based business, the platform youchoose to run your shop-ping cart on is just as importantto your website as the battery in your computer. A poorlydesigned and managed shopping cart can cause visitorsto run for the hills. It is very important to look back at yourbuyer personas and do research on how they navigatethrough a shopping cart, and what type of interface theyfeel most comfortable with. Your shopping cart should bethree things; seamless, secure, and navigable.

While many CMS’s have their own commerce capabilities,it is advisable to use an ecommerce platform, such asMagento, to build your shopping cart. Magento is an opensource platform that provides users with the ability toeasily scale and expand their cart from one product tothousands without changing platforms.

Whatever tools you choose to use, make sure they fit your needs and budget. Keep in mind thatadding different products and platforms can become costly. Be realistic when you are planning and choosing your site’s technology, and stay on track with your ultimate goals.

Marketing ToolsThe pressure to provide detailed and accurate information on visitors, leads, and customers is growing every day. With the change from traditional marketing to digital marketing, it has never been more important to have the ability to monitor and analyze customers to understand their behavior. Choosing the right tools to help your business, and marketing team, meet their goals has never been more important.

There are social media management tools, such as HootSuite, which allow marketers to schedule and monitor social media activity. Lead nurturing and lead generation tools, like HubSpot, are becoming increasingly popular as they provide detailed information on visitors and provide the opportunity to stay in touch with these contact through workflows and e-mail campaigns. One of the most valuable suite of tools, for a wide variety of marketing tasks, is Google Apps. These can be customized under your own domain name and, because they’re cloud based, can be used by your team virtually anywhere.

Bringing it all Together9

serioussem.com

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:• Marketing Strategy• Detailed descriptions of desired functionality andcontent 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’ completeplanning services, these documents 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.

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 greatpatience, concentration, and attention to detail. Fortunately, yourplanning documents will be there to help.

At this stage, take out the planning documents you created, anduse them as a checklist as you look at the finished product. Does itinclude all of the functionality you specified? Are the pages organizedin the correct way? In the excitement of seeing your newwebsite, 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 yoursite is supposed to look. Use this as a blueprint as you movethrough your QA process. QA also involves periodic product testing by select customers. You need to engage the opinions of thosewho regularly use the website

10

serioussem.com

Summary and Next StepsGood planning keeps projects on time and on budget.A thorough planning phase also ensures that you getexactly what you were envisioning. One of the greatestchallenges for web developers is translating yourwants and needs into a website. You can help yourdeveloper overcome this obstacle by clearly laying outwhat you want before development begins.

A great developer can always guide you through theplanning process to ensure your project comes in ontime and on budget. Give us a call and we’ll get startedright away.

So, what’s next...While developing a website you can’t forget search engine optimization (SEO). ImplementingSEO tactics on your website will help you rise in the rankings and get found bypotential customers.

Bringing it all Together