how to plan & develop a website€¦ · business’s online marketing strategy, and hence your...
TRANSCRIPT
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