Creating or updating a website is a disciplined process where each phase builds on the last. This interactive guide explains each phase, why it’s important, and the client input we need to move forward through the phases. We also created examples of the deliverables for each phase, based on a fictional company called "GUTovation". Our experience shows that by providing a clear roadmap and seeking input and approval from the right stakeholders every step of the way can help us create a great user experience and keep digital projects on time and on budget.
We meet with your website stakeholders and take a deep dive into your existing web properties to thoroughly understand your audience, goals, requirements, and validate project scope.
The download meeting brings together key players from your team and ours to officially kick off the project. The meeting can take place in person or via web conferencing.
The download gives everyone a chance to learn about the project’s goals, team roles and responsibilities, process and timeline.
We’d like you to share any and all information that’s relevant to the project. This is also the time to clear up any lurking murkiness to make sure we’re all moving in the same direction.
Relevant information that will inform our technical and creative approach.
The site audit is a thorough inventory and analysis of the current site. It covers the sitemap, content, assets (images, graphs/charts, videos/animations, forms, PDFs), user flows and SEO. Think of the audit as a home inspection with an inventory of what’s inside.
The audit reveals what’s working well (popular content) and what isn’t (redundancies, inconsistencies, outdated information, and under performing pages). These insights help us identify gaps and needs.
You’re the subject matter experts for your company, so we depend on your input regarding the accuracy and quality of your existing content and assets. Although it takes time and focus to review and respond to the audit, it’s hard to overstate its importance.
High-level inventory and analysis of the current site.
The tech brief outlines all technical requirements and considerations that go into building the site.
The tech brief identifies the web browsers and devices the site will need to support, where the site will be hosted, who will purchase the domain(s) and the level of analytics tracking we will implement.
This step gives you a chance to confirm technical responsibilities and supported devices, which will minimize surprises during development. It is important to have your internal IT stakeholder(s) review the brief to make sure it aligns with your company’s hosting or domain policies.
Technical brief.Examples Tech Brief
The creative brief articulates the site’s purpose, function, primary audience(s) and brand personality.
For the creative team, the creative brief acts like a blueprint that guides design, functionality, messaging, content and imagery.
We’re looking for your feedback on the site’s purpose, the business opportunity, audience drivers and barriers, and how we’ll measure success.
Creative brief.Examples Creative Brief
With the insights gained from the first phase, we establish the framework for your website—how content is organized and how it will reflect your brand—to ensure a great user experience.
The content outline identifies all the pages on the site and provides an overview of the content included on each page. If you were designing a home, the outline would be a list of each room’s appliances and/or furniture without a description of fabric, dimensions or color.
The content outline informs the sitemap, provides an overview of the content buckets and walks you through how content is organized on the site. Once approved, the content outline guides the writer through the copy development process.
Your feedback will tell us if we’ve correctly outlined the content buckets and key points on each page. If not, it’s much simpler, faster and more cost-effective to make revisions to the content outline than it is to make changes to the fully written site.
Content outline.Examples Content Outline
A sitemap identifies the pages that will exist within the site, as well as page hierarchy. If we were building a house, the sitemap would identify all the rooms and their relationship to each other.
The sitemap allows us to define the pages of the site before we begin working out the details. It’s far simpler and less expensive to make changes at this step in the process, so it’s essential that we’re completely aligned before moving ahead.
We’re looking for feedback on page hierarchy—specifically, whether any pages should be moved, renamed, added or deleted. This is a good time to ask questions about page hierarchy or structure.
The homepage design represents the first page the user sees when they visit your website. The emphasis is on layout, colors, image placement and navigation—not the actual words in headers or body copy. Homepage design is like a full color rendering of your future home’s exterior.
The homepage design establishes the visual tone for the entire website and shapes the design and structure for all pages. Together with the sitemap, it helps communicate navigation and information architecture.
We want to make sure the homepage design reflects your vision for the site, aligns with your brand and offers an excellent user experience. We’re looking for feedback specific to the homepage design.
Homepage design.Examples Homepage Design
We get into the nitty gritty now, developing content page by page and establishing navigation and interface conventions.
The template guide specifies the number of design templates the site will require and which pages will use which template.
The template guide helps us plan our approach to content development as we further define the site experience. The size of the guide will vary from one template for a single-page microsite to multiple templates for much larger sites.
With your feedback, we can make sure we’ve correctly identified the right template for each page.
Template guide.Examples Template Guide
Wireframes visually explain how a page will work by defining functionality details and content buckets. Wireframes are like the architectural blueprints of a house.
Wireframes help communicate what we’re building before we build it, an essential step that helps us avoid time-intensive (and expensive) revisions. Intentionally void of color and design, wireframes allow us to focus on user experience, determine the content and assets we need, and discover potential flaws in the architecture.
We’re looking for feedback on the organization of information, page functionality, content buckets and navigation.
Wireframes for each template.Examples Wireframe
Template designs bring the wireframes to life by showing how the design plays out across each template. A style guide is also created during this time to maintain consistencies across all templates and for future edits.
Template designs enable us to consistently extend the homepage design across pages while accommodating different types of content.
We’re looking for feedback on page design.
Template designs and web style guide.Examples Template Design Style Guide
Content communicates who you are, what you do, how you’re different from competitors and, most importantly, why customers should care. Depending on the specific objectives of the site, content can increase sales, reach new audiences, raise awareness and build brand loyalty.
We’re looking for feedback on the accuracy and relevance of the copy.
Full website copy, including metadata.
In this final phase, we’re creating the site: programming, beta testing, bug fixing, testing, fixing and testing some more. With your final approval, we work with your technical contact and/or your selected hosting provider to push the site live. We also monitor the site for a few weeks to make sure it’s performing properly.
In the development phase, the design files are translated into code and the content is entered, typically into a CMS, or content management system. Development is like the construction phase of a new home.
Development takes the sitemap, written content, assets, homepage design and design templates, and turns them into a fully functional site.
You’ll evaluate development after we complete testing and proofing.
Full website with all content, assets, visual design, information architecture, functionality and standard Google Analytics. Optional but highly recommended: Google Analytics event-level tracking.
Quality assurance (QA) includes browser and device testing, and copy proofing.
Before your site goes live, we make sure it functions equally well across the browsers and devices specified in the tech brief. We also proof the copy for spelling and grammar, and check that all internal and external links work as intended.
You’ll review the site on the test server to make sure it aligns with the approved vision. Because design and copy have already been approved, any copy edits at this stage should be minor.
Fully tested and proofed website.
The post-launch evaluation includes a review of specific performance indicators during the 2–4 weeks following the launch of your site.
We use Google Analytics to give us a high-level view of site traffic, page views, most popular pages and average time spent on the site. This data provides a baseline for future tracking.
Using the data, you can decide whether to make adjustments to your site, or to continue tracking for a set period of time before implementing any changes.
Google Analytics dashboard.Examples Dashboard
We provide the support you need to maintain and monitor your site after it launches. Choose the level of support that fits best with your infrastructure and budget, and we’ll provide a detailed estimate based on the scope of work.
You receive information you can use to improve your site and track the success of your marketing efforts. We create a custom analytics dashboard tailored to your site’s objectives, and share results, insights and recommendations each month. The dashboard distills information from Google Analytics and includes overall measures of site health, plus metrics on your site-specific goals.
Google Analytics event-level tracking provides additional insights into how users are interacting with content on your site. It’s used to track site events such as clicks, downloads, external links, video plays and form submissions. We help you identify meaningful events based on your site’s objectives, implement code so that identified events are tracked, and provide a Google Analytics dashboard that makes it easy to find and interpret specific data.
After your site goes live, it will require ongoing management to ensure it continues to deliver a great user experience. If you don’t have the time or resources to maintain your site, we can help. Services range from helping with CMS questions to editing content and images and creating entirely new sections.