ATILUS® | www.atilus.com 1

How to Plan & Develop a Website

October 1, 2015

Whitepaper

A Business’s Guide to Getting the Most from a Website before Contacting a Web Design Agency.

ATILUS® | www.atilus.com 2

About Atilus

Atilus is a digital agency that provides full web design, web development and online marketing. Growing your business

online: the driving force behind everything we do at Atilus. We don’t just build websites. Our one and only goal is to help

our clients grow their businesses and increase their bottom lines.

Project Team

Our team is the most important component to ensuring your project is a success. We’re all in-house, W2 employees,

based right in the United States. On the web, how you code plays a vital role in our clients’ success online that’s why

we’re not just experts at our respective disciplines, but we’ve also cross trained (and do a monthly team training session)

so that nothing gets missed and you have the best experience and see the greatest results from your project.

Kristen Bachmeier Client Services Manager

Kristen is our in-house client advocate. She will be working

intimately with you to define your project strategy and

translate our team’s suggestions and expertise into your

online solutions.

Ryan Ulrich UX Designer

Ryan is a highly regarded designer whose process-driven

approach to designing rich customer experiences helps our

clients get to market faster and more effectively.

Bryan Zarbhanelian Senior Developer

Bryan has more than 15 years of programming experience

under his belt. He is passionate about working on complex

problems.

Sammi Merritt Front-Developer

Sammi is Atilus’ front-end developer whose work helps bring

our designs to life. Sammi’s expertise spans from new

projects, existing client projects and support.

Harry Casimir Project Manager

Harry leads the Atilus project team. Harry is a Certified

SCRUM Master and a member of the AGILE Alliance and

Project Management Institute (PMI).

Jennifer Coomer New Client Specialist

Jennifer is the new client specialist who works directly with all

new clients. Jennifer will play an instrumental role welcoming

all new clients and providing support.

The Atilus Experience

For more than a decade, we’ve helped hundreds of clients grow, market and run more effectively using

the web. Our average client sees a 900% increase in leads. From construction and service to

telecommunications to business consultancy, we’ve provided custom web solutions to our clients that

have provided results, and more importantly, a return-on-investment.

3

Introduction

After reading and planning along with this whitepaper your company or organization will:

Save Time

Save Money

Improve Communication

Have a Faster Website Turn-Around

Get Exactly What You Want

The initial parts of a web design and development project are crucial to the success of your

business’s online marketing strategy, and hence your brand’s visibility and authority. What is often

observed is that most companies, business owners, and marketing directors want to jump right into

design without dedicating adequate thought, research, and planning into requirements for their

web design. However, there are certain steps that must be taken to ensure effective communication

between you and the web design firm you select to perform your project, receive the best possible

quotes, and ultimately create something that meets your expectations and goals — on time and on

budget.

This whitepaper will guide you in planning your web project before contacting a web design agency.

This whitepaper can also be used for senior managers to familiarize them with the process of web

development and hence better communicate with their internal web departments. Although you

don’t necessarily NEED to go through every step prior to development, knowing what will be

required and having a framework for communication will significantly reduce misunderstandings

and help you succeed in with any web project — no matter who you are working with, an external

freelancer, a full web design agency, or even an internal staff member.

Finally, although YOU may not necessarily need to perform the items outlined throughout this

whitepaper — it is very important that any firm you work with understands them and guides you

through these steps. Hence, it can act as a litmus test when researching and selecting the right

design agency.

The aim of this whitepaper is to simplify the process of “communication of

expectations” between you and your design agency

4

Thoroughly planning your project requirements, expectations, budget, and timeframe requires time

and research. It is helpful that as a client this planning is performed by you before contacting a

design agency.

Why?

Because, project requirements and expectations that are communicated and agreed upon during

the initial meetings define the basic website design, layout, features, content management system,

the budget, and the timeframe for the project. All of which are not just vital to the initial project’s

success, but also to your organizations eventual success online; because websites are unique as

their initial setup will affect your organization’s online marketing for years to come.

Planning allows you to convey exactly what it is that you want. Rushed planning, at best, causes

communication gaps, additional meetings and an increased price. At worst, rushed planning or no

planning causes your developer to make assumptions which could mean repeated do-overs and an

unhappy relationship from both your perspective as client and for your developer who can’t seem

to understand what it is you’re looking to accomplish.

Dedicating time to producing a complete plan of your site will make it easier for your developer to

build what you want.

This whitepaper is structured into six sections. Each section addresses crucial information that you

must document and communicate to your prospective design agency:

1. Preliminary Questions

2. Mapping Your Project To Your Business

3. Defining Your Audience & Their Needs

4. Design

5. Technical Requirements

6. Budget & Timeline

Let’s start with preliminary questions that will aid you in developing a web design specification.

5

Developing a Web Design Specification

The first step in developing a web design specification is to understand the place that your

investment in web design occupies. Three questions govern your initial research and information

gathering:

1. Why do you need a website designed and developed?

2. What are your expectations for the agency you work with?

3. What are your expectations for the final product?

You do not need to answer any of these questions technically, rather you have to present and

elaborate the purpose of your web design project and how it fits with your overall business needs,

marketing strategy, and demands.

Why do you need a website designed and developed?

Think about your overall strategic business goals, annual objectives, and how your website fits into

your overall business strategy. Why does your business need to establish an online presence? Often

times the answers to this question is very “non-technical.” What big problems are you dealing with

that could be a major reason for needing to overhaul your site? Are you answering your potential

customers’ questions? Are you addressing existing customers’ needs and concerns? Do you need to

keep pace with competition? Do you need to increase sales or improve customer service numbers?

What are your expectations for the agency you work with?

As a business we like to work with companies that share our values. Every professional design

agency shares this concern as its team members are passionate about their work and are

committed to leveraging creativity, innovation, and best-in-class technologies and practices to

deliver results. When our clients share our values, projects run more smoothly. Hence, it is

important to know: What kind of company do you want to work with?

Is it important that your design agency has great customer service? How is their reputation within

their community? Do they offer dedicated staff for support issues? Have they recently been through

issues and emergencies? Do they have a sizeable team capable of handling internal personnel issues

without causing harm to your website, online marketing, and business goals?

6

You’re about to entrust your online brand and home for your business to another company —

hence it is crucial that you think about and communicate important attributes that you are looking

in your future developer. Examples include:

Years in Business

Design Acumen

Technical Ability

Overall Business Experience

Company Size

Price

Industry Experience

Results

Clear Process

Comfort/Values Fit

Company Size

Reputation

Customer Service

Experience With Emergencies

What are your expectations for the final product?

Get specific in your expectations. We prefer to break these out into multiple categories — design,

technical features, and other business goals. For example the site needs to look a certain way, it

needs to have a calendar, but ultimately it needs to facilitate $1,000,000 in new business (design,

technical, business). In answering this question ask yourself are your goals or expectations based

on researched, tested, and measurable metrics and KPIs? Are they in line with or based on your

marketing strategy?

Do Your Research — Know What You Want to Achieve

Think beyond a “New Site”, “First ranking on Google” or “More Traffic”

Going further into your goals for your site and online marketing invest some time and thought into

your goals. You must define goals that if achieved, guarantee you and the company you’re

working with your investment was well spent and that you both did a great job.

List some of the goals that you want to achieve with your website, examples include:

Improving brand and/or product

visibility and/or awareness

Add an additional revenue stream to

your business bottom line

Increasing online sales

Generating more qualified leads

Increasing customer engagement

Decreasing customer bounce rate

Improving customer service

Better communicating your values

Your website is not simply an online brochure; it will become a part of your sales process. Most of

the companies we work with see a transformation of their sales process. This makes sales easier as

sales teams and management direct people to answers on the website, or customers are answering

their own questions before becoming a prospect and contacting. Normally, client websites become

the primary driver of new business.

However it is important to realize that your web design agency can only perform these feats (a

website that drives business, achieves your goals, and speaks to your prospective customers) if

you’ve assisted them by detailing out your project requirements, and/or helping them work

through the planning process.

Gathering Information

Once you have compiled the list of reasons as to why you’re going through the website redesign (or

having it developed from scratch), and clarified your business goals, it is time to begin gathering

some additional information on specifics — particularly the ones that relates to your prospective

customers and the audience for your soon-to-be completed website. This basic research and

brainstorming is about building target user profiles for which this website will be designed for.

Important questions include:

• User Profiles —Who are your users? What are their demographics? What is their buying

process? Here it helps to loop in actual existing customers, or your sales staff (anyone that

helps your customers make the decision and purchase) in order to document who they are.

• User Needs —Why will they visit your website? What are they looking for? What is your

business offering them and what is the best type of content that can engage them? Again,

dive-deep into your company’s value-offering to your customers. What are they struggling

with and what need or desire does your service fulfill.

• Competition Analytics —Who is your competition? How are they using their website?

What do you think are its weaknesses? What do you think will make your site different from

them? Agencies will analyze your competitors’ existing online marketing to immediately

determine ways to catch-up and then surpass them.

• Core Components —What are the absolutely most important elements to achieve your

goals, and marry them with the above needs of your customers? In web terms we call this

the Minimum Viable Product – which is essentially the first phase of the redesign process. If

your website could have nothing but some key components, what will they be? Defining this

helps keep costs down and timelines in check. Adding on later is always easy, but having a

concrete goal as it relates to this and milestones help move you forward.

These questions will give you a clearer insight and a stripped down version of the website that will

deliver the functionality that you want. It will also help developers understand the core structure

they should be building around, leaving additional features left for the later part of the development

phase.

However, to communicate these core elements, your web project plan must translate your business

needs into web design and development needs. Therefore, your plan must address the following

core features.

Content Types

What will be the staple content type on your website? An often ignored piece of the planning

process, involves selecting the right content types that you feature. Primary content types that

websites normally support include:

Blog Posts News Articles

Videos/Webcasts Podcasts

Products Customer Testimonials

eBooks/ Whitepapers Case Studies

All of these are different types of content, each of which requires specific layouts, fields, and views.

Hence, the content type(s) that you choose will define the basic design, layout, and backend Content

Management System of the website. This portion of the planning process is a bit technical. A

seasoned design team with an internet marketing background can help you select the best content-

types to include, however knowing a head of time that you absolutely need certain content types

included is always helpful. For example, a blog is crucial in staying competitive in today’s business

environment and should be considered a weapon in your online marketing arsenal and a seasoned

design and marketing team can help explain why, and what integration with the rest of your

website look like.

YouTube is designed to handle video content, manage millions of video channels and subscriptions,

and catering user generated comments.

Pinterest, on the other hand is designed and developed to handle predominantly pictures as its

primary form of content.

Forbes’ and About.com websites are designed for handling blog content and news articles that

requires extensive categorization and tagging.

Etsy.com websites are designed to handle products as their primary content types.

Learn From Competition

Research your competitors. Visit their website, go through their content, keeping an eye out for

how their content is presented, how videos and other content (Infographics, images, guides, etc.)

are embedded. Gauge which type of content, content presentation, and/or content formatting are

impeding user experience, or affecting or limiting how users are or can interact with the website or

the brand.

Learn from them. Figure how your business has brought in additional or more competitive value

preposition for its customer base, and which type of content has so far proven itself at targeting

your potential audience. You can leverage various business analytics and competition analytics

tools to figure out what they are doing, etc.

While your competition and other sites that you have come to trust and rely on may show similar

traits in terms of the content types and layouts, they do not act the same way. This is where detailed

instructions come to fore.

Turn To Details. They Matter

Make your instructions both precise and detailed. The more detail you provide (and which

developers normally ask for), the less chance there is that your developers will deviate from what

you have in mind. Speak in terms of the functionalities you want instead of modules.

For example, instead of simply stating that you “need a blog,” for adding content, list important

features that the page should have, both at the front end and the backend, such as:

• A CMS with multiple authors

• Closed comments unless users are logged in

• A comment rating system

• Social media share buttons

• Subscription boxes either timed (5 seconds into the post) or event triggered (visitor has

scrolled 75% of the post)

• An RSS feed, custom email subscription dialogue box

• Special templates for specific events and marketing materials, e.g. different headers for

different blog series, special templates for promotional blog posts with image, flash, and

video embeds

With a list like the one above, the “blog” that you had in mind can easily be understood by the team

of developers. Be prepared to include information like this for every page.

Now, at times it can become difficult to communicate the functionality that you want. In such cases

the best thing to do is to simply add the link to the website or blog where you came across the

feature, and add basic description such as why you liked it and how you intend to use it with your

website’s marketing.

Your Plan Must Address Your Content and Messaging Plan

Your website alone is not the things that will get you visitors. It’s simply a frame that will house

your content and messaging. You have to work around the content. You can either decide to employ

the right copywriters, negotiate collaboration with your marketing team, or let the agency find and

load the content that will get the results chugging.

This requires that prior to researching and contacting a design agency, you must bring your

marketing department on board. Unless you have planned a robust marketing strategy and

developed or started working with the developing a content and editorial calendar, target social

media platforms, and estimated budget for your organic and PPC marketing, your website will not

be able to boost your marketing venture, and instead may impede it.

When you know what you need to accomplish your goals, you will be able to

see if an agency fits the bill.

Determine Content Marketing Goals

Determine your goals, target content, and KPIs for measuring the success of your marketing efforts.

If your business website is for improving or increasing brand visibility and awareness, then your

marketing will be more geared towards establishing your brand authority in the industry vertical.

This is best done by creating content that is informative and educational. Whereas, in case of an e-

commerce website, the focus might be on increasing conversions, gaining higher ROI, and building,

expanding, and retaining customer base.

Your Plan Must Address Basic Site Design

How do you want your website to look like? What impression should it give to your visitors?

Please list the names of two or more of your competitors and describe how you differ from

them?

The competition in the internet is very high. That means that the website you’re creating will be

compared to a lot of other sites. So the point is to make the website memorable and stand out from

the crowd.

What actions do you want visitors to take on the site?

A site can sell products, provide information, educate, and also make a visitor to make a phone call

or fill out the form. Depending on the client’s needs the website structure, functionality and design

can vary substantially.

Design agencies have dedicated graphic designers, artists, coders, and developers. Yet all that

creativity cannot create your required website design if all you have given them is “a website that

relies on our existing brand colors”.

For designers and developers, a website’s design has to be captivating, its layout must be intuitive,

its navigation should be user friendly, and its backend programming and architecture should be

light and white hat — allowing faster loading times and higher search engine rankings.

This requires getting more information than simply the website colors.

Professional designers and developers often begin by creating a detailed,

clickable wireframe design of the website

A wireframe layout is like a website’s blueprint. It allows developers to create an organized and

usable interface without worrying about the visual design elements. Hence, developers need

information about the design layout you have in mind for your website.

Add details about how you want the site’s page to appear. Add example websites, and if you want a

radically different layout, give descriptions, or if possible act proactively and add sketches.

Think Design after Layout

Clients are often more focused on the visual design of their website instead of the dull layout that

developers take on first. Design itself can be the most time-consuming phase of any web project,

especially if the developers are made to continuously revisit the layout to make room for new

design ideas. Given that virtually millions of design options exist — ranging from navigation bar to

how the CTA button should look like — it is necessary that you create specific and detailed

information about layouts before creating briefs about the design phase.

This brings us to a common problem: separately defining layout and design.

Your layout briefing should be in line with what you want on that layout. Hence, when creating a

design brief for the project, answer the following questions:

• What is the specific style guide that the designers must follow?

• What feeling/message should your design send or induce on first visit?

• How do you want your business to be viewed online (modern, techy, caring, eco-friendly,

safe, enthusiastic, etc.)?

• What are your buyer personas looking for in a design?

Once you have those questions answered, research multiple websites and write down what you do,

and do not, like about the design. Consider everything about the site, including its images, colors,

functionality, and navigation— all the way down to the font size.

Your Plan Must Address Site Navigation

The scalability of any website depends on how clear the site map is. A site map defines where each

piece of the website’s content will exist. Though this is backend work, answers to the following

questions dramatically simplifies the design of the site map. Questions include:

• Which information do you want to target the most?

• What navigation path do you want to have for your visitor? How do you want the user to

navigate through the site after their visit?

• How do you want your site to be structured? Which menu items and pages do you want to

keep in spotlight and readily accessible?

• How are your competitors organizing their site, state which navigational elements you

liked/disliked?

Fundamentally, the navigation design of your visitors depends on their buying habits and decision

power. Website navigation designed for teenagers, moms, and business executives would vary as

each has a different buying persona and content needs.

Designing navigation involves many principles, including memory. As a rule of thumb, navigation

with a list containing more than 7 elements cannot be remembered by most people. Therefore, if

your website’s navigation has multiple levels, it becomes harder for your visitor to find their way

through the website.

Creating the right categories and grouping navigation tabs into them is only possible when the

developers know which information is crucial for your audience and must be presented with

greater ease and linked to supporting information.

NOTE: Avoid using company jargons and labels for use as titles to your site’s navigation. Research

the right terminology that is readily employed by your target audience before adding them to your

web project plan.

Simply ask yourself: Is this design description the route to creating an intuitive navigation? Will it

allow users to easily accomplish their goal, and find the right information without hindrance?

Budget and Timeframe

Atilus has been the leader in the standardized and transparent pricing in web design for nearly a

decade. However, the web design industry continues to be a strange place for getting clear pricing –

and even for our team, quoting projects continues to be part science, part experience, part intuition,

due to thousands of factors on even the simplest of projects that can explode time and price.

However, knowing ahead of time what you can afford, and setting aside a budget for both web

design and ongoing marketing can help ensure success.

Website design and development can be approached from multiple angles to meet different budget

constraints. Having a budget ahead of time can provide the agency you’re considering a framework

for how to execute your project. For example, a site that needs a sophisticated calendar might use

something out of the box which is less expensive, but not customizable – or a totally custom-

programmed tool – depending on budget and impact.

Most development agencies focus on creating a website that addresses and meets the core

requirements needed to achieve your business objectives. Hence, while budgeting your website

project and the timeframe within it you want it completed (expedited work means additional

costs), the factors and questions must be considered:

Project type — new website or redesign?

Website type — Do you want a responsive, adaptive, or normal desktop website

How detailed is your requirement document

Content creation and insertion — have the graphics and content been created for the

website?

Do you need to add a Content Management System and a blog?

Contracted time for Web Planning, Design, and Development Time — How many hours

are you willing to pay for?

Multimedia elements — what content types do you want to add on your website (video,

flash, etc.)

Special features — eCommerce system, Search Engine Optimization (SEO), social media

channels, etc.

Site Maintenance — Who will take over the maintenance work?

Keep in mind that new sites often cost more than redesigns as the designer and developer have to

start from scratch, and have no existing elements for your online brand to work with or improve

upon.

Creating content and populating your website falls into the domain of content development and

may require collaboration with your marketing team and should be budgeted separately as content

budget per page.

Furthermore, special features that need to be redesigned, developed, and integrated into your

website should be dealt with separately. Some important features that you will come across

include:

Custom Content Management Systems —If you are looking for a CMS that can be

managed without technical know-how, then it will require developing custom solutions

using existing CMS platforms such as WordPress, Drupal, Joomla, and others. The prices can

range from $3,000 to over $15,000 depending on the traffic and the amount of content your

website will be dealing with.

A Blog — Costs depends on whether the blog is a standalone addition to your website or

part of the CMS. Costs can range from $1,000 to over $3,000.

Targeted Landing Pages— Custom lead generation or promotional pages do not rely on

the existing template of your website, and are nearly a brand new, custom design. They are

normally priced higher than single website pages i.e. if a single page is set at $150, then a

custom landing page can go over $400.

E-commerce Functionality — eCommerce functionality is different from creating an

ecommerce store. If your website needs ecommerce features such as an inventory

management system, a front end shopping cart and payment processing system, then the

costs can range from $1,500 to over $5000 depending on the requirements.

Auto-responders — Collecting and curating email subscribers can be done by third party

services, but customizing email marketing campaigns and integrating these software with

your email templates can cost from $700 and above.

Identity and Branding —Design company logo, favicons, or personalized artwork.

Depending on how extensive your branding is (logo only may start from over $500 to

$3,000).

Custom Surveys and Contact Forms

PPC Integration — Integration of Google AdWords, Bing Ads, Yahoo!, etc.

Backend Analytics — Custom business reporting, Google analytics, etc.

SEO — on-page and off-page optimizations for boosting webpage ranking in Search Engine

Results Page. Depending on your marketing needs and budget can go over $3,000

These, among other design and development considerations can add to your budget and the

timeframe within which the website can reasonably be designed and developed.

Create a flexible budget range. This will prove helpful in starting the conversation with a focus on

the fundamental requirements of your project. Furthermore, a good agency will plan the

development process in terms of the services and products that are crucial for successful

development of your website, and which features can be left out of the discussion due to budget

constraints while still delivering a website that will allow your company to meet business critical

tasks.

Consider Your Timeframe

When do you want the web project completed? Are you budgeting an urgent promotional event or

can respond to a more lenient timeframe? Keeping in mind the features and development and

design work that you have budgeted for, avoid creating arbitrary timelines for the project. The

easiest way to create a reasonable timeline is to engage with the agency itself.

Be Structured

Agencies want to know whom they’ll be working with on the project. This streamlines the whole

communication process by creating a single node of interaction. In case multiple stakeholders are

involved, it should be clarified up front so that the agency can figure the process for getting their

work approved. At times, multiple stakeholders that are nor in line with each other’s roles impedes

project direction causing the approval process to become complex, non-linear, and vertical.

Keep in mind that agencies work with multiple clients, completing many projects per year. Hence,

organization is essential. Disorganization at the stakeholder level in the approval process often

results in clients spending more time and money on their project. Therefore, it is essential that

prior to negotiating a quote, you internal approval process and structure is solidified.

Like with any business venture, a consolidated game plan is crucial for establishing a firm line of

communication with the second party. The more linear and consolidated your approval process, the

easier it will be to communicate and negotiate with the designer agency, resulting in an end product

that reflects your business goals.

Write Your Project Description

A proper web project specification will enable agencies bidding on your project to properly

understand your requirements and expectations. A thoroughly researched and planned web project

will also give you the confidence in researching design agencies, assessing their portfolio and

credibility, and selecting the right design agencies. As a result, you will face significantly reduced

pricing divergence and risk of future disagreements about project expectations and requirements.

The biggest issue you will deal with while shopping for an agency is pricing divergence. Different

agencies will charge differently for the same project for a variety of reasons. But if you do not have a

proper, thorough spec, the divergence will be even worse.

Revisit your project requirements. Does it show a web project concept that is thoroughly

researched? Have the requirements taken into account buying persona, and competition? Are the

requirements in line with your marketing goals? If they are, simplify the language and communicate

it as precisely as possible.

Sample Project Document

Project Expectations

Preliminary details about your goal, expected budget, and timeframe.

Goals that if achieved, guarantee you and the company you’re working with your investment was well spent and

that you both did a great job.

My Web Design Goals [Basics]

This web design project is meant to cater the following business goals:

Business Goal Preliminary Details

Improving brand and/or product

visibility and/or awareness

Add an additional revenue stream to

your business bottom line

Increasing online sales [Name of products/services]

Generating more qualified leads

Increasing customer engagement

Decreasing customer bounce rate

Improving customer service

Better communicating your values

Our Target Audience’s Profile

Here’s a detailed profiling of our target audience

Component Questions Details

User Profiles

Who are my users?

What are their

demographics?

What is their buying

process?

User Needs

Reason for visiting our

website?

What will they be looking

for?

The best type of content

that can engage them?

Competition

Analytics

My competition? List of competitors

How are they using their

website?

Their weaknesses

What will make your site

different from them?

Core

Components

What my Minimum Viable

Product should have

My Budget and Time Frame

Below is my estimation of the project. I’m open to discussions of

Project Component Estimated Budget Estimated Time Frame

Project type

Website type

Content creation and insertion

Do you need to add a Content

Management System and a blog?

Contracted time for Web Planning,

Design, and Development Time

Multimedia elements

Special features

Site Maintenance

Other

Additional Website Features

Feature Details/Example Website

Custom Content Management Systems

A Blog

Targeted Landing Pages

E-commerce Functionality

Auto-responders

Identity and Branding

Custom Surveys and Contact Forms

PPC Integration

Backend Analytics

SEO

Others

About Your Design Agency

Our business’s mission is [ADD]. We are committed to [Core Values]. I’m looking for a design agency that can [Core

values]. If you are interested, kindly provide me with your portfolio, detailing:

About Your Company Expected Information

Years in Business

Design Acumen Kindly

Technical Ability

Overall Business Experience

Company Size

Price

Industry Experience

Results

Clear Process

Comfort/Values Fit

Company Size

Reputation

Customer Service

Experience With Emergencies